Merge branch 'master' into unpin-icons-react

carbon-design-system · Dec 10, 2019 · 414d450 · 414d450
2 parents 9710ea2 + ca1e566
commit 414d450
Show file tree

Hide file tree

Showing 7 changed files with 209 additions and 12 deletions.
diff --git a/packages/cli/src/workspace.js b/packages/cli/src/workspace.js
@@ -12,16 +12,32 @@ const fs = require('fs-extra');
 const path = require('path');
 const packageJson = require('../../../package.json');
 
+const denylist = new Set(['.DS_Store']);
 const PACKAGES_DIR = path.resolve(__dirname, '../..');
-const packagePaths = fs.readdirSync(PACKAGES_DIR).map(pkg => {
-  const packageJsonPath = path.join(PACKAGES_DIR, pkg, 'package.json');
-  return {
-    basename: pkg,
-    packageJsonPath,
-    packageJson: fs.readJsonSync(packageJsonPath),
-    packagePath: path.join(PACKAGES_DIR, pkg),
-  };
-});
+const packagePaths = fs
+  .readdirSync(PACKAGES_DIR)
+  .filter(basename => {
+    const filename = path.join(PACKAGES_DIR, basename);
+    if (!denylist.has(filename)) {
+      return false;
+    }
+
+    const stats = fs.lstatSync(filename);
+    if (!stats.isDirectory()) {
+      return false;
+    }
+
+    return true;
+  })
+  .map(pkg => {
+    const packageJsonPath = path.join(PACKAGES_DIR, pkg, 'package.json');
+    return {
+      basename: pkg,
+      packageJsonPath,
+      packageJson: fs.readJsonSync(packageJsonPath),
+      packagePath: path.join(PACKAGES_DIR, pkg),
+    };
+  });
 
 const env = {
   root: {

diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -6595,6 +6595,7 @@ $inverse-link: if(
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
   - [inline-notifications [mixin]](#inline-notifications-mixin)
+  - [toast-notifications [mixin]](#toast-notifications-mixin)
   - [tooltip [mixin]](#tooltip-mixin)
 
 ### ✅field-01 [variable]
@@ -18644,12 +18645,35 @@ Inline notification styles
     }
   }
 
+  .#{$prefix}--inline-notification:not(.#{$prefix}--inline-notification--low-contrast)
+    a {
+    color: $inverse-link;
+  }
+
+  .#{$prefix}--inline-notification a {
+    text-decoration: none;
+  }
+
+  .#{$prefix}--inline-notification a:hover {
+    text-decoration: underline;
+  }
+
+  .#{$prefix}--inline-notification a:focus {
+    outline: 1px solid $inverse-link;
+  }
+
+  .#{$prefix}--inline-notification.#{$prefix}--inline-notification--low-contrast
+    a:focus {
+    @include focus-outline;
+  }
+
   .#{$prefix}--inline-notification--low-contrast {
     // Stop-gap to ensure color contrast (vs. fixed background color) until we have component-specific theme tokens
     color: map-get($carbon--theme--white, 'text-01');
 
     &::before {
       content: '';
+      pointer-events: none;
       position: absolute;
       top: 0;
       left: 0;
@@ -18843,6 +18867,7 @@ Inline notification styles
   - [prefix [variable]](#prefix-variable)
   - [inverse-01 [variable]](#inverse-01-variable)
   - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
+  - [inverse-link [variable]](#inverse-link-variable)
   - [inverse-support-01 [variable]](#inverse-support-01-variable)
   - [inverse-02 [variable]](#inverse-02-variable)
   - [support-01 [variable]](#support-01-variable)
@@ -18855,7 +18880,6 @@ Inline notification styles
   - [carbon--spacing-04 [variable]](#carbon--spacing-04-variable)
   - [carbon--spacing-02 [variable]](#carbon--spacing-02-variable)
   - [carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
-  - [inverse-link [variable]](#inverse-link-variable)
   - [inverse-focus-ui [variable]](#inverse-focus-ui-variable)
   - [inverse-hover-ui [variable]](#inverse-hover-ui-variable)
 
@@ -18953,6 +18977,28 @@ Toast notification styles
     }
   }
 
+  .#{$prefix}--toast-notification:not(.#{$prefix}--toast-notification--low-contrast)
+    a {
+    color: $inverse-link;
+  }
+
+  .#{$prefix}--toast-notification a {
+    text-decoration: none;
+  }
+
+  .#{$prefix}--toast-notification a:hover {
+    text-decoration: underline;
+  }
+
+  .#{$prefix}--toast-notification a:focus {
+    outline: 1px solid $inverse-link;
+  }
+
+  .#{$prefix}--toast-notification.#{$prefix}--toast-notification--low-contrast
+    a:focus {
+    @include focus-outline;
+  }
+
   .#{$prefix}--toast-notification--low-contrast {
     // Stop-gap to ensure color contrast (vs. fixed background color) until we have component-specific theme tokens
     color: map-get($carbon--theme--white, 'text-01');
@@ -19099,6 +19145,7 @@ Toast notification styles
   - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
   - [inverse-01 [variable]](#inverse-01-variable)
   - [carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
+  - [inverse-link [variable]](#inverse-link-variable)
   - [inverse-support-01 [variable]](#inverse-support-01-variable)
   - [inverse-02 [variable]](#inverse-02-variable)
   - [support-01 [variable]](#support-01-variable)

diff --git a/packages/components/src/components/notification/_inline-notification.scss b/packages/components/src/components/notification/_inline-notification.scss
@@ -47,12 +47,35 @@
     }
   }
 
+  .#{$prefix}--inline-notification:not(.#{$prefix}--inline-notification--low-contrast)
+    a {
+    color: $inverse-link;
+  }
+
+  .#{$prefix}--inline-notification a {
+    text-decoration: none;
+  }
+
+  .#{$prefix}--inline-notification a:hover {
+    text-decoration: underline;
+  }
+
+  .#{$prefix}--inline-notification a:focus {
+    outline: 1px solid $inverse-link;
+  }
+
+  .#{$prefix}--inline-notification.#{$prefix}--inline-notification--low-contrast
+    a:focus {
+    @include focus-outline;
+  }
+
   .#{$prefix}--inline-notification--low-contrast {
     // Stop-gap to ensure color contrast (vs. fixed background color) until we have component-specific theme tokens
     color: map-get($carbon--theme--white, 'text-01');
 
     &::before {
       content: '';
+      pointer-events: none;
       position: absolute;
       top: 0;
       left: 0;

diff --git a/packages/components/src/components/notification/_toast-notification.scss b/packages/components/src/components/notification/_toast-notification.scss
@@ -43,6 +43,28 @@
     }
   }
 
+  .#{$prefix}--toast-notification:not(.#{$prefix}--toast-notification--low-contrast)
+    a {
+    color: $inverse-link;
+  }
+
+  .#{$prefix}--toast-notification a {
+    text-decoration: none;
+  }
+
+  .#{$prefix}--toast-notification a:hover {
+    text-decoration: underline;
+  }
+
+  .#{$prefix}--toast-notification a:focus {
+    outline: 1px solid $inverse-link;
+  }
+
+  .#{$prefix}--toast-notification.#{$prefix}--toast-notification--low-contrast
+    a:focus {
+    @include focus-outline;
+  }
+
   .#{$prefix}--toast-notification--low-contrast {
     // Stop-gap to ensure color contrast (vs. fixed background color) until we have component-specific theme tokens
     color: map-get($carbon--theme--white, 'text-01');

diff --git a/packages/icons-vue/tasks/__tests__/createIconComponent-test.js b/packages/icons-vue/tasks/__tests__/createIconComponent-test.js
@@ -212,6 +212,83 @@ describe('createIconComponent', () => {
     expect(node.classList.contains(dynamicClass)).toBe(true);
   });
 
+  it('should support custom styles', async () => {
+    const customStyle = 'z-index: 99; overflow: hidden;';
+    const dynamicStyle = { opacity: '0.99' };
+    const node = render({
+      components: {
+        [MockIconComponent.name]: MockIconComponent,
+      },
+      data() {
+        return {
+          myDynamicStyle: dynamicStyle,
+        };
+      },
+      template: `<MockIcon style="${customStyle}" v-bind:style="myDynamicStyle" />`,
+    });
+
+    const nodeStyle = node.getAttribute('style');
+
+    expect(nodeStyle).toEqual(
+      expect.stringContaining('will-change: transform')
+    );
+    expect(nodeStyle).toEqual(expect.stringContaining(customStyle));
+    expect(nodeStyle).toEqual(expect.stringContaining('opacity: 0.99'));
+  });
+
+  it('should support dynamic styles only', async () => {
+    const dynamicStyle = { opacity: '0.99' };
+    const node = render({
+      components: {
+        [MockIconComponent.name]: MockIconComponent,
+      },
+      data() {
+        return {
+          myDynamicStyle: dynamicStyle,
+        };
+      },
+      template: `<MockIcon v-bind:style="myDynamicStyle" />`,
+    });
+
+    const nodeStyle = node.getAttribute('style');
+    expect(nodeStyle).toEqual(
+      expect.stringContaining('will-change: transform')
+    );
+    expect(nodeStyle).toEqual(expect.stringContaining('opacity: 0.99'));
+  });
+
+  it('should have will-change', async () => {
+    const node = render({
+      components: {
+        [MockIconComponent.name]: MockIconComponent,
+      },
+      template: `<MockIcon />`,
+    });
+
+    const nodeStyle = node.getAttribute('style');
+    expect(nodeStyle).toEqual(
+      expect.stringContaining('will-change: transform')
+    );
+  });
+
+  it('should be able to override helper style will-change', async () => {
+    const dynamicStyle = { willChange: 'height', opacity: '0.99' };
+    const node = render({
+      components: {
+        [MockIconComponent.name]: MockIconComponent,
+      },
+      data() {
+        return {
+          myDynamicStyle: dynamicStyle,
+        };
+      },
+      template: `<MockIcon  style="visibility: hidden" v-bind:style="myDynamicStyle" />`,
+    });
+
+    const nodeStyle = node.getAttribute('style');
+    expect(nodeStyle).toEqual(expect.stringContaining('will-change: height'));
+  });
+
   it('should be focusable if aria-label and tabindex is used', async () => {
     const label = 'custom-label';
     const node = render({

diff --git a/packages/icons-vue/tasks/createIconComponent.js b/packages/icons-vue/tasks/createIconComponent.js
@@ -43,12 +43,13 @@ export default {
       // Special case here, we need to coordinate that we are using title,
       // potentially, to get the right focus attributes
       title: props.title,
-      ...data.attrs,
+      ...data.attrs
     });
     const svgData = {
       attrs,
       on: listeners,
     };
+
     if (data.staticClass) {
       svgData.class = {
         [data.staticClass]: true,
@@ -58,6 +59,13 @@ export default {
       svgData.class = svgData.class || {}; // may be no static class
       svgData.class[data.class] = true;
     }
+
+    // remove style set by getAttributes
+    delete svgData.attrs.style;
+
+    // combine incoming staticStyle, style with default willChange
+    svgData.style = { willChange: 'transform', ...data.staticStyle, ...data.style };
+
     return createElement('svg', svgData, [
       props.title && createElement('title', null, props.title),
       ${content.map(convertToVue).join(', ')},

diff --git a/packages/react/src/components/Notification/Notification-story.js b/packages/react/src/components/Notification/Notification-story.js
@@ -26,7 +26,11 @@ const notificationProps = () => ({
   lowContrast: boolean('Use low contrast variant (lowContrast)', false),
   role: text('ARIA role (role)', 'alert'),
   title: text('Title (title)', 'Notification title'),
-  subtitle: text('Subtitle (subtitle)', 'Subtitle text goes here.'),
+  subtitle: (
+    <span>
+      Subtitle text goes here. <a href="#example">Example link</a>
+    </span>
+  ),
   iconDescription: text(
     'Icon description (iconDescription)',
     'describes the close button'