fix(styles): update notification to new token format (#9582)

* docs(carbon-react): update storybook to use background theme color * fix(eslint): update to exclude *.stories.js files * docs(notification): add playground for toast * refactor(styles): update notification tests to one file * feat(themes): add support for component tokens * feat(styles): add support for CSS Custom Property in component tokens * fix(styles): update notification to new token format Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Sep 2, 2021 · 4d424f0 · 4d424f0
1 parent 4c31ac6
commit 4d424f0
Show file tree

Hide file tree

Showing 12 changed files with 328 additions and 173 deletions.
diff --git a/config/eslint-config-carbon/plugins/react.js b/config/eslint-config-carbon/plugins/react.js
@@ -49,7 +49,7 @@ module.exports = {
     // In these cases, we don't need to handle prop type validation like we
     // would for code we ship to users.
     {
-      files: ['*-story.js'],
+      files: ['*-story.js', '*.stories.js'],
       rules: {
         'react/display-name': 0,
         'react/prop-types': 0,

diff --git a/packages/carbon-react/.storybook/styles.scss b/packages/carbon-react/.storybook/styles.scss
@@ -5,10 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-$feature-flags: (
-  enable-v11-release: true,
-);
-
 @use '../index.scss' as styles with (
   $css--font-face: true,
   $css--plex-arabic: true,
@@ -32,6 +28,10 @@ $feature-flags: (
   @include styles.theme(styles.$g100, button.$g100, tag.$g100);
 }
 
+body {
+  background: styles.$background;
+}
+
 html[lang='en'] body {
   font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
 }

diff --git a/packages/carbon-react/src/components/Notification/Notification.stories.js b/packages/carbon-react/src/components/Notification/Notification.stories.js
@@ -25,6 +25,11 @@ const toastNotificationProps = () => ({
 
 export default {
   title: 'Components/Notifications',
+  parameters: {
+    controls: {
+      hideNoControlsWarning: true,
+    },
+  },
 };
 
 export const Toast = () => (
@@ -35,6 +40,45 @@ export const Toast = () => (
   />
 );
 
+export const ToastPlayground = ({
+  kind = 'info',
+  title = 'Notification title',
+  subtitle = 'Notification subtitle',
+  caption = '00:00:00 AM',
+  lowContrast = false,
+}) => {
+  return (
+    <ToastNotification
+      kind={kind}
+      title={title}
+      subtitle={subtitle}
+      lowContrast={lowContrast}
+      caption={caption}
+    />
+  );
+};
+ToastPlayground.argTypes = {
+  kind: {
+    options: [
+      'error',
+      'info',
+      'info-square',
+      'success',
+      'warning',
+      'warning-alt',
+    ],
+    control: {
+      type: 'select',
+    },
+  },
+  lowContrast: {
+    value: false,
+    control: {
+      type: 'boolean',
+    },
+  },
+};
+
 export const Inline = () => (
   <InlineNotification
     {...notificationProps()}

diff --git a/packages/styles/scss/components/__tests__/inline-notification-test.js b/packages/styles/scss/components/__tests__/inline-notification-test.js
diff --git a/packages/styles/scss/components/__tests__/notification-test.js b/packages/styles/scss/components/__tests__/notification-test.js
@@ -0,0 +1,44 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/notification', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+      @use 'sass:map';
+      @use 'sass:meta';
+      @use '../notification';
+
+      $_: get('mixins', (
+        toast-notification: meta.mixin-exists('toast-notification', 'notification'),
+        inline-notification: meta.mixin-exists('inline-notification', 'notification'),
+      ));
+
+      $_: get('tokens', map.keys(meta.module-variables('notification')));
+    `);
+
+    expect(unwrap('mixins')).toEqual({
+      'toast-notification': true,
+      'inline-notification': true,
+    });
+    expect(unwrap('tokens')).toEqual([
+      'notification-background-error',
+      'notification-background-success',
+      'notification-background-info',
+      'notification-background-warning',
+      'notification-action-hover',
+      'notification-tokens',
+    ]);
+  });
+});
diff --git a/packages/styles/scss/components/__tests__/toast-notification-test.js b/packages/styles/scss/components/__tests__/toast-notification-test.js
diff --git a/packages/styles/scss/components/notification/_index.scss b/packages/styles/scss/components/notification/_index.scss
@@ -9,8 +9,11 @@
 @forward 'inline-notification';
 @forward 'toast-notification';
 
-@use 'inline-notification';
-@use 'toast-notification';
+@use '../../theme';
+@use './tokens';
+@use './inline-notification';
+@use './toast-notification';
 
+@include theme.add-component-tokens(tokens.$notification-tokens);
 @include inline-notification.inline-notification;
 @include toast-notification.toast-notification;
diff --git a/packages/styles/scss/components/notification/_inline-notification.scss b/packages/styles/scss/components/notification/_inline-notification.scss
@@ -15,9 +15,9 @@
 @use '../../themes' as *;
 @use '../../type' as *;
 @use '../../utilities/convert' as *;
-@use '../../utilities/component-tokens' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/focus-outline' as *;
+@use './tokens' as *;
 
 /// Inline notification styles
 /// @access public
@@ -102,7 +102,7 @@
   .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--error {
     @include notification--experimental(
       $support-error,
-      get-token(var(--cds-background-error))
+      $notification-background-error
     );
 
     &::before {
@@ -120,7 +120,7 @@
   .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--success {
     @include notification--experimental(
       $support-success,
-      get-token-value(var(--cds-background-success))
+      $notification-background-success
     );
 
     &::before {
@@ -140,7 +140,7 @@
   .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--info-square {
     @include notification--experimental(
       $support-info,
-      get-token-value(var(--cds-background-info))
+      $notification-background-info
     );
 
     &::before {
@@ -160,7 +160,7 @@
   .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--warning-alt {
     @include notification--experimental(
       $support-warning,
-      get-token-value(var(--cds-background-warning))
+      $notification-background-warning
     );
 
     &::before {
@@ -241,7 +241,7 @@
     .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:active,
   .#{$prefix}--inline-notification--low-contrast
     .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:hover {
-    background-color: get-token-value(var(--cds-action-hover));
+    background-color: $notification-action-hover;
   }
 
   .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:focus {

diff --git a/packages/styles/scss/components/notification/_toast-notification.scss b/packages/styles/scss/components/notification/_toast-notification.scss
@@ -19,6 +19,7 @@
 @use '../../utilities/convert' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/focus-outline' as *;
+@use './tokens' as *;
 
 /// Toast notification styles
 /// @access public
@@ -82,7 +83,7 @@
   .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--error {
     @include notification--experimental(
       $support-error,
-      get-token(var(--cds-background-error))
+      $notification-background-error
     );
   }
 
@@ -96,7 +97,7 @@
   .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--success {
     @include notification--experimental(
       $support-success,
-      get-token(var(--cds-background-success))
+      $notification-background-success
     );
   }
 
@@ -112,7 +113,7 @@
   .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--info-square {
     @include notification--experimental(
       $support-info,
-      get-token(var(--cds-background-info))
+      $notification-background-info
     );
   }
 
@@ -128,7 +129,7 @@
   .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--warning-alt {
     @include notification--experimental(
       $support-warning,
-      get-token(var(--cds-background-warning))
+      $notification-background-warning
     );
   }