feat(notification): introduce light variant

carbon-design-system · May 24, 2019 · 368edcf · 368edcf
1 parent a06d7fe
commit 368edcf
Show file tree

Hide file tree

Showing 8 changed files with 144 additions and 24 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--light`   | Use light 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--light`   | Use light 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
@@ -33,7 +33,6 @@
     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,23 +47,49 @@
     }
   }
 
+  .#{$prefix}--inline-notification--light {
+    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--light.#{$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--light.#{$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--light.#{$prefix}--inline-notification--info {
+    @include notification--experimental(
+      $support-04,
       $notification-info-background-color
     );
   }
@@ -76,6 +101,13 @@
   .#{$prefix}--inline-notification--warning {
     @include notification--experimental(
       $inverse-support-03,
+      $inverse-02
+    );
+  }
+
+  .#{$prefix}--inline-notification--light.#{$prefix}--inline-notification--warning {
+    @include notification--experimental(
+      $support-03,
       $notification-warning-background-color
     );
   }
@@ -139,6 +171,10 @@
       fill: $inverse-01;
     }
   }
+
+  .#{$prefix}--inline-notification--light .#{$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
@@ -43,30 +43,62 @@
     }
   }
 
+  .#{$prefix}--toast-notification--light {
+    color: $text-01;
+  }
+
   .#{$prefix}--toast-notification--error {
     @include notification--experimental(
       $inverse-support-01,
+      $inverse-02
+    );
+  }
+
+  .#{$prefix}--toast-notification--light.#{$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--light.#{$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--light.#{$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--light.#{$prefix}--toast-notification--warning {
+    @include notification--experimental(
+      $support-03,
       $notification-warning-background-color
     );
   }
@@ -112,6 +144,10 @@
     }
   }
 
+  .#{$prefix}--toast-notification--light .#{$prefix}--toast-notification__close-button .#{$prefix}--toast-notification__close-icon {
+    fill: $ui-05;
+  }
+
   .#{$prefix}--toast-notification__title {
     @include type-style('heading-01');
 
@@ -129,12 +165,20 @@
     word-break: break-word;
   }
 
+  .#{$prefix}--toast-notification--light .#{$prefix}--toast-notification__subtitle {
+    color: $text-01;
+  }
+
   .#{$prefix}--toast-notification__caption {
     @include type-style('body-short-01');
 
     color: $inverse-01;
     margin-bottom: $carbon--spacing-05;
   }
+
+  .#{$prefix}--toast-notification--light .#{$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: 'default--light',
+      label: 'Inline Notification (light)',
+      context: {
+        variant: 'inline',
+        light: true,
+        items,
+      },
+    },
     {
       name: 'toast',
       label: 'Toast Notification',
@@ -65,5 +74,19 @@ module.exports = {
         items,
       },
     },
+    {
+      name: 'toast--light',
+      label: 'Toast Notification (light)',
+      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',
+        light: 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 ../light}} {{@root.prefix}}--{{../variant}}-notification--light{{/if}}" role="alert">
     {{#is ../variant "toast"}}
       {{#is type "error"}}
         {{ carbon-icon 'ErrorFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}

diff --git a/packages/components/src/globals/scss/_theme-tokens.scss b/packages/components/src/globals/scss/_theme-tokens.scss
@@ -241,26 +241,26 @@
   /// @type Color
   /// @access public
   /// @group notification
-  /// @deprecated Global theme token will be used directly in next major release.
-  $notification-info-background-color: $inverse-02 !default !global;
+  $notification-info-background-color: $ibm-color__blue-10 !default !global;
 
   /// @type Color
   /// @access public
   /// @group notification
-  /// @deprecated Global theme token will be used directly in next major release.
-  $notification-error-background-color: $inverse-02 !default !global;
+  $notification-error-background-color: $ibm-color__red-10 !default !global;
 
   /// @type Color
   /// @access public
   /// @group notification
-  /// @deprecated Global theme token will be used directly in next major release.
-  $notification-warning-background-color: $inverse-02 !default !global;
+  $notification-warning-background-color: mix(
+    $ibm-color__yellow-20,
+    $ibm-color__white-0,
+    15%
+  ) !default !global;
 
   /// @type Color
   /// @access public
   /// @group notification
-  /// @deprecated Global theme token will be used directly in next major release.
-  $notification-success-background-color: $inverse-02 !default !global;
+  $notification-success-background-color: $ibm-color__green-10 !default !global;
 
   // Progress Indicator
 

diff --git a/packages/react/src/components/Notification/Notification-story.js b/packages/react/src/components/Notification/Notification-story.js
@@ -19,6 +19,7 @@ const kinds = {
 };
 const notificationProps = () => ({
   kind: select('The notification kind (kind)', kinds, 'info'),
+  light: boolean('Use light variant (light)', false),
   role: text('ARIA role (role)', 'alert'),
   title: text('Title (title)', 'Notification title'),
   subtitle: text('Subtitle (subtitle)', 'Subtitle text goes here.'),

diff --git a/packages/react/src/components/Notification/Notification.js b/packages/react/src/components/Notification/Notification.js
@@ -212,6 +212,11 @@ export class ToastNotification extends Component {
      */
     kind: PropTypes.oneOf(['error', 'info', 'success', 'warning']).isRequired,
 
+    /**
+     * Specify whether you are using the light variant of the ToastNotification.
+     */
+    light: PropTypes.bool,
+
     /**
      * Specify the title
      */
@@ -304,14 +309,16 @@ export class ToastNotification extends Component {
       subtitle,
       title,
       kind,
+      light,
       hideCloseButton,
       ...other
     } = this.props;
 
     const classes = classNames(
       `${prefix}--toast-notification`,
       {
-        [`${prefix}--toast-notification--${this.props.kind}`]: this.props.kind,
+        [`${prefix}--toast-notification--light`]: light,
+        [`${prefix}--toast-notification--${kind}`]: kind,
       },
       className
     );
@@ -359,6 +366,11 @@ export class InlineNotification extends Component {
      */
     kind: PropTypes.oneOf(['error', 'info', 'success', 'warning']).isRequired,
 
+    /**
+     * Specify whether you are using the light variant of the InlineNotification.
+     */
+    light: PropTypes.bool,
+
     /**
      * Specify the title
      */
@@ -428,14 +440,16 @@ export class InlineNotification extends Component {
       subtitle,
       title,
       kind,
+      light,
       hideCloseButton,
       ...other
     } = this.props;
 
     const classes = classNames(
       `${prefix}--inline-notification`,
       {
-        [`${prefix}--inline-notification--${this.props.kind}`]: this.props.kind,
+        [`${prefix}--inline-notification--light`]: light,
+        [`${prefix}--inline-notification--${kind}`]: kind,
       },
       className
     );