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
  );
  }