Merge branch 'master' into 2438-generate-sketch-library

carbon-design-system · May 26, 2019 · f04561e · f04561e
2 parents c4805dc + 47ca93d
commit f04561e
Show file tree

Hide file tree

Showing 8 changed files with 498 additions and 393 deletions.
diff --git a/packages/components/src/components/notification/README.md b/packages/components/src/components/notification/README.md
@@ -11,21 +11,23 @@
 
 Use these modifiers with `.bx--inline-notification` class.
 
-| Selector                            | Description                            |
-| ----------------------------------- | -------------------------------------- |
-| `.bx--inline-notification--error`   | Apply error color to border and icon   |
-| `.bx--inline-notification--success` | Apply success color to border and icon |
-| `.bx--inline-notification--info`    | Apply info color to border and icon    |
-| `.bx--inline-notification--warning` | Apply warning color to border and icon |
+| Selector                                 | Description                                                    |
+| ---------------------------------------- | -------------------------------------------------------------- |
+| `.bx--inline-notification--low-contrast` | Use low contrast variant (The color scheme used until `v10.2`) |
+| `.bx--inline-notification--error`        | Apply error color to border and icon                           |
+| `.bx--inline-notification--success`      | Apply success color to border and icon                         |
+| `.bx--inline-notification--info`         | Apply info color to border and icon                            |
+| `.bx--inline-notification--warning`      | Apply warning color to border and icon                         |
 
 Use these modifiers with `.bx--toast-notification` class.
 
-| Selector                           | Description                        |
-| ---------------------------------- | ---------------------------------- |
-| `.bx--toast-notification--error`   | Apply error color on left border   |
-| `.bx--toast-notification--success` | Apply success color on left border |
-| `.bx--toast-notification--info`    | Apply info color on left border    |
-| `.bx--toast-notification--warning` | Apply warning color on left border |
+| Selector                                | Description                                                    |
+| --------------------------------------- | -------------------------------------------------------------- |
+| `.bx--toast-notification--low-contrast` | Use low contrast variant (The color scheme used until `v10.2`) |
+| `.bx--toast-notification--error`        | Apply error color on left border                               |
+| `.bx--toast-notification--success`      | Apply success color on left border                             |
+| `.bx--toast-notification--info`         | Apply info color on left border                                |
+| `.bx--toast-notification--warning`      | Apply warning color on left border                             |
 
 ### JavaScript
 

diff --git a/packages/components/src/components/notification/_inline-notification.scss b/packages/components/src/components/notification/_inline-notification.scss
@@ -30,10 +30,9 @@
     min-height: rem(48px);
     min-width: rem(288px);
     max-width: rem(288px);
-    color: $text-01;
+    color: $inverse-01;
     margin-top: $carbon--spacing-05;
     margin-bottom: $carbon--spacing-05;
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
 
     @include carbon--breakpoint(md) {
       max-width: rem(608px);
@@ -48,21 +47,38 @@
     }
   }
 
+  .#{$prefix}--inline-notification--low-contrast {
+    color: $text-01;
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+  }
+
   .#{$prefix}--inline-notification--error {
+    @include notification--experimental($inverse-support-01, $inverse-02);
+  }
+
+  .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--error {
     @include notification--experimental(
       $support-01,
       $notification-error-background-color
     );
   }
 
   .#{$prefix}--inline-notification--success {
+    @include notification--experimental($inverse-support-02, $inverse-02);
+  }
+
+  .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--success {
     @include notification--experimental(
       $support-02,
       $notification-success-background-color
     );
   }
 
   .#{$prefix}--inline-notification--info {
+    @include notification--experimental($inverse-support-04, $inverse-02);
+  }
+
+  .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--info {
     @include notification--experimental(
       $support-04,
       $notification-info-background-color
@@ -74,6 +90,10 @@
   }
 
   .#{$prefix}--inline-notification--warning {
+    @include notification--experimental($inverse-support-03, $inverse-02);
+  }
+
+  .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--warning {
     @include notification--experimental(
       $support-03,
       $notification-warning-background-color
@@ -136,9 +156,15 @@
     .#{$prefix}--inline-notification__close-icon {
       height: 1rem;
       width: 1rem;
-      fill: $ui-05;
+      fill: $inverse-01;
     }
   }
+
+  .#{$prefix}--inline-notification--low-contrast
+    .#{$prefix}--inline-notification__close-button
+    .#{$prefix}--inline-notification__close-icon {
+    fill: $ui-05;
+  }
 }
 
 @include exports('inline-notifications') {

diff --git a/packages/components/src/components/notification/_toast-notification.scss b/packages/components/src/components/notification/_toast-notification.scss
@@ -28,7 +28,7 @@
     width: rem(288px);
     height: auto;
     padding-left: $carbon--spacing-05;
-    color: $text-01;
+    color: $inverse-01;
     margin-top: $carbon--spacing-03;
     margin-bottom: $carbon--spacing-03;
     margin-right: $carbon--spacing-05;
@@ -43,28 +43,48 @@
     }
   }
 
+  .#{$prefix}--toast-notification--low-contrast {
+    color: $text-01;
+  }
+
   .#{$prefix}--toast-notification--error {
+    @include notification--experimental($inverse-support-01, $inverse-02);
+  }
+
+  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--error {
     @include notification--experimental(
       $support-01,
       $notification-error-background-color
     );
   }
 
   .#{$prefix}--toast-notification--success {
+    @include notification--experimental($inverse-support-02, $inverse-02);
+  }
+
+  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--success {
     @include notification--experimental(
       $support-02,
       $notification-success-background-color
     );
   }
 
   .#{$prefix}--toast-notification--info {
+    @include notification--experimental($inverse-support-04, $inverse-02);
+  }
+
+  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--info {
     @include notification--experimental(
       $support-04,
       $notification-info-background-color
     );
   }
 
   .#{$prefix}--toast-notification--warning {
+    @include notification--experimental($inverse-support-03, $inverse-02);
+  }
+
+  .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--warning {
     @include notification--experimental(
       $support-03,
       $notification-warning-background-color
@@ -108,10 +128,16 @@
     .#{$prefix}--toast-notification__close-icon {
       height: 1rem;
       width: 1rem;
-      fill: $ui-05;
+      fill: $inverse-01;
     }
   }
 
+  .#{$prefix}--toast-notification--low-contrast
+    .#{$prefix}--toast-notification__close-button
+    .#{$prefix}--toast-notification__close-icon {
+    fill: $ui-05;
+  }
+
   .#{$prefix}--toast-notification__title {
     @include type-style('heading-01');
 
@@ -123,18 +149,28 @@
   .#{$prefix}--toast-notification__subtitle {
     @include type-style('body-short-01');
 
-    color: $text-01;
+    color: $inverse-01;
     margin-top: 0;
     margin-bottom: $carbon--spacing-06;
     word-break: break-word;
   }
 
+  .#{$prefix}--toast-notification--low-contrast
+    .#{$prefix}--toast-notification__subtitle {
+    color: $text-01;
+  }
+
   .#{$prefix}--toast-notification__caption {
     @include type-style('body-short-01');
 
-    color: $text-01;
+    color: $inverse-01;
     margin-bottom: $carbon--spacing-05;
   }
+
+  .#{$prefix}--toast-notification--low-contrast
+    .#{$prefix}--toast-notification__caption {
+    color: $text-01;
+  }
 }
 
 @include exports('toast-notifications') {

diff --git a/packages/components/src/components/notification/notification.config.js b/packages/components/src/components/notification/notification.config.js
@@ -52,6 +52,15 @@ module.exports = {
         items,
       },
     },
+    {
+      name: 'low-contrast',
+      label: 'Inline Notification (Low contrast)',
+      context: {
+        variant: 'inline',
+        lowContrast: true,
+        items,
+      },
+    },
     {
       name: 'toast',
       label: 'Toast Notification',
@@ -65,5 +74,19 @@ module.exports = {
         items,
       },
     },
+    {
+      name: 'low-contrast',
+      label: 'Toast Notification (Low contrast)',
+      notes: `
+        Toast notifications are typically passive, meaning they won't affect the user's workflow if not addressed.
+        Toast Notifications use 'kind' props to specify the kind of notification that should render
+        (error, info, success, warning).
+      `,
+      context: {
+        variant: 'toast',
+        lowContrast: true,
+        items,
+      },
+    },
   ],
 };
diff --git a/packages/components/src/components/notification/notification.hbs b/packages/components/src/components/notification/notification.hbs
@@ -6,7 +6,7 @@
 -->
 
 {{#each items}}
-  <div data-notification class="{{@root.prefix}}--{{../variant}}-notification {{@root.prefix}}--{{../variant}}-notification--{{type}}" role="alert">
+  <div data-notification class="{{@root.prefix}}--{{../variant}}-notification {{@root.prefix}}--{{../variant}}-notification--{{type}}{{#if ../lowContrast}} {{@root.prefix}}--{{../variant}}-notification--low-contrast{{/if}}" role="alert">
     {{#is ../variant "toast"}}
       {{#is type "error"}}
         {{ carbon-icon 'ErrorFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}