Merge branch 'master' into col-bot-marg

packages/bundler/src/commands/inline.js

@@ -11,7 +11,9 @@ const fs = require('fs-extra');
 const klaw = require('klaw-sync');
 const os = require('os');
 const path = require('path');
+const isWin = process.platform === 'win32';
 const replace = require('replace-in-file');
+const { reporter } = require('@carbon/cli-reporter');
 
 const tmpDir = os.tmpdir();
 
@@ -24,12 +26,14 @@ async function inline(options, info) {
 
   await Promise.all([fs.remove(inlineFolder), fs.remove(vendorFolder)]);
 
+  reporter.info('Inlining sass dependencies');
   await inlineSassDependencies(
     packageJsonPath,
     sourceFolder,
     vendorFolder,
     cwd
   );
+  reporter.success('Done');
 }
 
 async function inlineSassDependencies(
@@ -50,8 +54,9 @@ async function inlineSassDependencies(
   ];
   const inlinedDependencies = (await Promise.all(
     allPossibleDependencies.map(async dependency => {
-      const [packageFolder, scssFolder] = await findSassModule(dependency, cwd);
-      if (packageFolder) {
+      const modules = await findSassModule(dependency, cwd);
+      if (modules) {
+        const [scssFolder] = modules;
         const dependencyOutputFolder = path.join(vendorFolder, dependency);
 
         await fs.copy(scssFolder, dependencyOutputFolder);
@@ -84,11 +89,7 @@ async function inlineSassDependencies(
         return false;
       }
 
-      if (path.basename(src) === 'index.scss') {
-        return false;
-      }
-
-      return true;
+      return path.basename(src) !== 'index.scss';
     },
   });
   await fs.copy(tmpFolder, inlineFolder);
@@ -113,7 +114,9 @@ async function inlineSassDependencies(
         files: file.path,
         from: REPLACE_REGEX,
         to(_, match) {
-          return `@import '${relativeImportPath}/${match}`;
+          return `@import '${
+            isWin ? relativeImportPath.replace('\\', '/') : relativeImportPath
+          }/${match}`;
         },
       });
     })
@@ -123,20 +126,20 @@ async function inlineSassDependencies(
 function findSassModule(packageName, cwd) {
   let currentDirectory = cwd;
 
-  while (currentDirectory !== '/') {
+  while (currentDirectory !== path.dirname(currentDirectory)) {
     const nodeModulesFolder = path.join(currentDirectory, 'node_modules');
     const packageFolder = path.join(nodeModulesFolder, packageName);
     const scssFolder = path.join(packageFolder, 'scss');
     const packageJsonPath = path.join(packageFolder, 'package.json');
 
     if (fs.existsSync(scssFolder)) {
-      return [packageFolder, scssFolder, packageJsonPath];
+      return [scssFolder, packageFolder, packageJsonPath];
     }
 
     currentDirectory = path.dirname(currentDirectory);
   }
 
-  return [false];
+  return false;
 }
 
 module.exports = inline;

packages/components/docs/sass.md

@@ -7614,6 +7614,7 @@ $disabled-02: if(
   - [select [mixin]](#select-mixin)
   - [slider [mixin]](#slider-mixin)
   - [tabs [mixin]](#tabs-mixin)
+  - [tags [mixin]](#tags-mixin)
   - [text-area [mixin]](#text-area-mixin)
   - [text-input [mixin]](#text-input-mixin)
   - [toggle [mixin]](#toggle-mixin)
@@ -22044,7 +22045,8 @@ Tag styles
     @include tag-theme($ibm-color__warm-gray-20, $ibm-color__warm-gray-100);
   }
 
-  .#{$prefix}--tag--disabled {
+  .#{$prefix}--tag--disabled,
+  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled {
     @include tag-theme($ibm-color__gray-10, $ibm-color__gray-30);
 
     &:hover {
@@ -22065,31 +22067,42 @@ Tag styles
 
     cursor: pointer;
     padding-right: rem(2px);
+
+    &:focus,
+    &:hover {
+      outline: none;
+    }
   }
 
   .#{$prefix}--tag--filter > svg {
-    fill: $inverse-01;
-    margin-left: rem(4px);
-    padding: rem(2px);
+    flex-shrink: 0;
     width: rem(20px);
     height: rem(20px);
-  }
-
-  .#{$prefix}--tag--filter > svg:hover {
+    margin: 0 0 0 rem(4px);
+    padding: rem(2px);
+    border: 0;
+    fill: $inverse-01;
+    background-color: transparent;
     border-radius: 50%;
-    background-color: $inverse-hover-ui;
-  }
 
-  .#{$prefix}--tag--filter:focus,
-  .#{$prefix}--tag--filter:hover {
-    outline: none;
+    &:hover {
+      background-color: $inverse-hover-ui;
+    }
   }
 
   .#{$prefix}--tag--filter:focus > svg {
     box-shadow: inset 0 0 0 2px $inverse-focus-ui;
     border-radius: 50%;
   }
 
+  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled svg:hover {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled svg {
+    fill: $disabled-02;
+  }
+
   // Skeleton state
   .#{$prefix}--tag.#{$prefix}--skeleton {
     @include skeleton;
@@ -22114,6 +22127,7 @@ Tag styles
   - [inverse-01 [variable]](#inverse-01-variable)
   - [inverse-hover-ui [variable]](#inverse-hover-ui-variable)
   - [inverse-focus-ui [variable]](#inverse-focus-ui-variable)
+  - [disabled-02 [variable]](#disabled-02-variable)
 
 ## text-area
 

packages/components/src/components/tag/_tag.scss

@@ -76,7 +76,8 @@
     @include tag-theme($ibm-color__warm-gray-20, $ibm-color__warm-gray-100);
   }
 
-  .#{$prefix}--tag--disabled {
+  .#{$prefix}--tag--disabled,
+  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled {
     @include tag-theme($ibm-color__gray-10, $ibm-color__gray-30);
 
     &:hover {
@@ -97,31 +98,42 @@
 
     cursor: pointer;
     padding-right: rem(2px);
+
+    &:focus,
+    &:hover {
+      outline: none;
+    }
   }
 
   .#{$prefix}--tag--filter > svg {
-    fill: $inverse-01;
-    margin-left: rem(4px);
-    padding: rem(2px);
+    flex-shrink: 0;
     width: rem(20px);
     height: rem(20px);
-  }
-
-  .#{$prefix}--tag--filter > svg:hover {
+    margin: 0 0 0 rem(4px);
+    padding: rem(2px);
+    border: 0;
+    fill: $inverse-01;
+    background-color: transparent;
     border-radius: 50%;
-    background-color: $inverse-hover-ui;
-  }
 
-  .#{$prefix}--tag--filter:focus,
-  .#{$prefix}--tag--filter:hover {
-    outline: none;
+    &:hover {
+      background-color: $inverse-hover-ui;
+    }
   }
 
   .#{$prefix}--tag--filter:focus > svg {
     box-shadow: inset 0 0 0 2px $inverse-focus-ui;
     border-radius: 50%;
   }
 
+  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled svg:hover {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled svg {
+    fill: $disabled-02;
+  }
+
   // Skeleton state
   .#{$prefix}--tag.#{$prefix}--skeleton {
     @include skeleton;

packages/components/src/components/tag/tag.hbs

@@ -5,19 +5,19 @@
   LICENSE file in the root directory of this source tree.
 -->
 
-<div role="list">
+<div>
   {{#each tags}}
-  <span class="{{@root.prefix}}--tag {{@root.prefix}}--tag--{{type}}" role="listitem">
+  <button class="{{@root.prefix}}--tag {{@root.prefix}}--tag--{{type}}">
     <span class="{{@root.prefix}}--tag__label">{{label}}</span>
-  </span>
+  </button>
   {{/each}}
 </div>
 
-<div role="list">
+<div>
   {{#if filter}}
-  <span class="{{@root.prefix}}--tag {{@root.prefix}}--tag--filter" title="Clear filter" tabindex="0" role="listitem">
+  <button class="{{@root.prefix}}--tag {{@root.prefix}}--tag--filter" title="Clear filter">
     <span class="{{@root.prefix}}--tag__label">filter</span>
-    {{ carbon-icon 'Close16' aria-label='Clear filter' }}
-  </span>
+    {{ carbon-icon 'Close16' }}
+  </button>
   {{/if}}
 </div>

packages/elements/tasks/build.js

@@ -40,7 +40,7 @@ async function build() {
   const paths = klaw(BUNDLE_DIR, {
     nodir: true,
     filter(item) {
-      const paths = item.path.split('/');
+      const paths = item.path.split(path.sep);
       const filename = paths[paths.length - 1];
       const folder = paths[paths.length - 3];
 

packages/icon-build-helpers/src/builders/react/builder.js

@@ -8,6 +8,7 @@
 'use strict';
 
 const { camel } = require('change-case');
+const { reporter } = require('@carbon/cli-reporter');
 const fs = require('fs-extra');
 const path = require('path');
 const { rollup } = require('rollup');
@@ -71,6 +72,7 @@ ${modules.map(({ source }) => `export ${source}`).join('\n')}
 export { Icon };
 `;
 
+  reporter.info('Building components');
   const bundle = await rollup({
     input: '__entrypoint__.js',
     external,
@@ -106,6 +108,7 @@ export { Icon };
     })
   );
 
+  reporter.info('Creating aliases');
   // Create aliases for `@carbon/icons-react/es/<icon-name>/<size>`
   await Promise.all(
     meta.map(async icon => {
@@ -114,7 +117,7 @@ export { Icon };
         // The length of this is determined by the number of directories from
         // our `outputOptions` minus 1 for the bundle type (`es` for example)
         // and minus 1 for the filename as it does not count as a directory jump
-        length: outputOptions.file.split('/').length - 2,
+        length: outputOptions.file.split(path.sep).length - 2,
       })
         .fill('..')
         .join('/');
@@ -141,7 +144,7 @@ export default ${moduleName};
     // Drop the first part of `outputOptions.file` as it contains the `es/`
     // directory
     const commonjsFilepath = outputOptions.file
-      .split('/')
+      .split(path.sep)
       .slice(1)
       .join('/');
     const { source: component } = createIconComponent(moduleName, descriptor);
@@ -165,6 +168,7 @@ export default ${moduleName};`;
     };
   }, {});
 
+  reporter.info('Bundling Javascript modules');
   // Using the mapping of file path to file source, we can specify our input to
   // rollup by formatting the filepath so that rollup outputs the file to the
   // correct place. The location is going to match the key that we use in the
@@ -200,6 +204,7 @@ export default ${moduleName};`;
     ],
   });
 
+  reporter.info('Writing to destination');
   await commonjsBundles.write({
     dir: 'lib',
     format: 'cjs',

packages/icon-build-helpers/src/builders/vanilla/builder.js

@@ -209,13 +209,16 @@ async function builder(source, { cwd } = {}) {
 function getModuleName(name, size, prefixParts, descriptor) {
   const width = parseInt(descriptor.attrs.width, 10);
   const height = parseInt(descriptor.attrs.height, 10);
-  const prefix = prefixParts
+  let prefix = prefixParts
     .filter(size => isNaN(size))
     .map(pascal)
     .join('');
   const isGlyph = width < 16 || height < 16;
 
   if (prefix !== '') {
+    if (prefix.match(/^\d/)) {
+      prefix = '_' + prefix;
+    }
     if (!size) {
       if (isGlyph) {
         return prefix + pascal(name) + 'Glyph';