feat(notifications): sync with @carbon/react v11 (carbon-design-syste…

…m#10338) * feat(notifications): notifications v11 carbon sync * chore(slider): fix slider spec test * feat(notifications): new actionable variant * feat(notification): additional functionality * chore(notifications): add license to helper file * chore(notifications): update docs * feat(notification): warning icon fill and storybook adjustments
kennylam · Apr 18, 2023 · 1b44481 · 1b44481
1 parent d652b99
commit 1b44481
Show file tree

Hide file tree

Showing 19 changed files with 821 additions and 117 deletions.
diff --git a/...mponents/packages/carbon-web-components/examples/codesandbox/form/redux-form/src/index.js b/...mponents/packages/carbon-web-components/examples/codesandbox/form/redux-form/src/index.js
@@ -15,7 +15,7 @@ import { Field, SubmissionError, reduxForm, reducer as reduxFormReducer } from '
 import BXBtn from '@carbon/web-components/es/components-react/button/button.js';
 import BXFormItem from '@carbon/web-components/es/components-react/form/form-item.js';
 import CDSTextInput from '@carbon/web-components/es/components-react/text-input/text-input.js';
-import BXInlineNotification from '@carbon/web-components/es/components-react/notification/inline-notification.js';
+import CDSInlineNotification from '@carbon/web-components/es/components-react/notification/inline-notification.js';
 import './index.css';
 
 const reducer = combineReducers({
@@ -70,7 +70,7 @@ const SubmitValidationForm = reduxForm({
 })(({ error, handleSubmit, pristine, reset, submitting }) => (
   <form>
     {error && (
-      <BXInlineNotification kind="error" title="Login failed" subtitle="Please correct below errors." hideCloseButton={true} />
+      <CDSInlineNotification kind="error" title="Login failed" subtitle="Please correct below errors." hideCloseButton={true} />
     )}
     <Field name="username" type="text" component={FieldImpl} label="Username" />
     <Field name="password" type="password" component={FieldImpl} label="Password" />

diff --git a/...kages/carbon-web-components/src/components/notification/actionable-notification-button.ts b/...kages/carbon-web-components/src/components/notification/actionable-notification-button.ts
@@ -0,0 +1,34 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import CDSButton from '../button/button';
+import styles from './actionable-notification.scss';
+
+/**
+ * Actionable notification action button.
+ *
+ * @element cds-actionable-notification-button
+ */
+@customElement(`${prefix}-actionable-notification-button`)
+class CDSActionableNotificationButton extends CDSButton {
+  update(changedProperties) {
+    super.update(changedProperties);
+    this.shadowRoot!.getElementById('button')?.classList.add(
+      `${prefix}--actionable-notification__action-button`
+    );
+
+    this.setAttribute('size', 'sm');
+  }
+
+  static styles = styles;
+}
+
+export default CDSActionableNotificationButton;
diff --git a/...ckages/carbon-web-components/src/components/notification/actionable-notification-story.ts b/...ckages/carbon-web-components/src/components/notification/actionable-notification-story.ts
@@ -0,0 +1,120 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { action } from '@storybook/addon-actions';
+import { boolean, select } from '@storybook/addon-knobs';
+import textNullable from '../../../.storybook/knob-text-nullable';
+import { NOTIFICATION_KIND } from './inline-notification';
+import './actionable-notification';
+import './actionable-notification-button';
+import storyDocs from './notification-story.mdx';
+import { prefix } from '../../globals/settings';
+import kinds from './stories/helper';
+import '../button/button';
+
+const noop = () => {};
+
+export const Default = () => {
+  return html`
+    <cds-actionable-notification
+      kind="${NOTIFICATION_KIND.ERROR}"
+      title="Notification title"
+      subtitle="Subtitle text goes here">
+      <cds-actionable-notification-button slot="action"
+        >Action</cds-actionable-notification-button
+      >
+    </cds-actionable-notification>
+  `;
+};
+
+export const Playground = (args) => {
+  const {
+    actionButtonLabel,
+    closeOnEscape,
+    hasFocus,
+    kind,
+    title,
+    subtitle,
+    hideCloseButton,
+    lowContrast,
+    role,
+    inline,
+    statusIconDescription,
+    disableClose,
+    onBeforeClose = noop,
+    onClose = noop,
+  } = args?.[`${prefix}-actionable-notification`] ?? {};
+  const handleBeforeClose = (event: CustomEvent) => {
+    onBeforeClose(event);
+    if (disableClose) {
+      event.preventDefault();
+    }
+  };
+  return html`
+    <cds-actionable-notification
+      ?close-on-escape="${closeOnEscape}"
+      ?has-focus="${hasFocus}"
+      kind="${ifDefined(kind)}"
+      title="${ifDefined(title)}"
+      subtitle="${ifDefined(subtitle)}"
+      role="${ifDefined(role)}"
+      ?inline="${inline}"
+      ?hide-close-button="${hideCloseButton}"
+      ?low-contrast="${lowContrast}"
+      status-icon-description="${ifDefined(statusIconDescription)}"
+      @cds-notification-beingclosed="${handleBeforeClose}"
+      @cds-notification-closed="${onClose}">
+      <cds-actionable-notification-button slot="action"
+        >${actionButtonLabel}</cds-actionable-notification-button
+      >
+    </cds-actionable-notification>
+  `;
+};
+
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-actionable-notification`]: () => ({
+      actionButtonLabel: textNullable(
+        'Action button label (action-button-label)',
+        'Action'
+      ),
+      closeOnEscape: boolean('Close on escape (close-on-escape)', true),
+      hasFocus: boolean('Has focus (has-focus)', false),
+      hideCloseButton: boolean(
+        'Hide the close button (hide-close-button)',
+        false
+      ),
+      inline: boolean('Inline (inline)', false),
+      kind: select(
+        'The notification kind (kind)',
+        kinds,
+        NOTIFICATION_KIND.ERROR
+      ),
+      lowContrast: boolean('Use low contrast variant (low-contrast)', false),
+      role: textNullable('Role (role)', 'alertdialog'),
+      subtitle: textNullable('Subtitle (subtitle)', 'Subtitle text goes here'),
+      statusIconDescription: textNullable(
+        'statusIconDescription (status-icon-description)',
+        'notification'
+      ),
+      title: textNullable('Title (title)', 'Notification title'),
+      onBeforeClose: action(`${prefix}-notification-beingclosed`),
+      onClose: action(`${prefix}-notification-closed`),
+    }),
+  },
+};
+
+export default {
+  title: 'Components/Notifications/Actionable',
+  parameters: {
+    ...storyDocs.parameters,
+  },
+};
diff --git a/...s/packages/carbon-web-components/src/components/notification/actionable-notification.scss b/...s/packages/carbon-web-components/src/components/notification/actionable-notification.scss
@@ -0,0 +1,170 @@
+//
+// Copyright IBM Corp. 2019, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/components/notification/index' as *;
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/button/mixins' as button-mixins;
+@use '@carbon/styles/scss/components/button/vars' as button-vars;
+
+@include actionable-notification;
+
+:host(#{$prefix}-actionable-notification) {
+  @extend .#{$prefix}--actionable-notification;
+
+  display: none;
+  outline: none;
+}
+
+:host(#{$prefix}-actionable-notification-button):not(
+    [low-contrast]
+  )[kind='tertiary']
+  button {
+  @include button-mixins.button-theme(
+    transparent,
+    $notification-action-tertiary-inverse,
+    $notification-action-tertiary-inverse,
+    $notification-action-tertiary-inverse-hover,
+    currentColor,
+    $notification-action-tertiary-inverse-active
+  );
+
+  &:focus {
+    border-color: $focus-inverse;
+    background-color: $notification-action-tertiary-inverse;
+    box-shadow: inset 0 0 0 button-vars.$button-outline-width $focus-inverse,
+      inset 0 0 0 button-vars.$button-border-width $background-inverse;
+    color: $notification-action-tertiary-inverse-text;
+  }
+
+  &:hover {
+    color: $notification-action-tertiary-inverse-text;
+  }
+
+  &:active {
+    border-color: transparent;
+    background-color: $notification-action-tertiary-inverse-active;
+    color: $notification-action-tertiary-inverse-text;
+  }
+}
+
+:host(#{$prefix}-actionable-notification-button)[low-contrast][kind='ghost']
+  button {
+  &:hover,
+  &:active {
+    background-color: $notification-action-hover;
+  }
+
+  &:focus {
+    outline-color: $focus;
+  }
+}
+
+:host(#{$prefix}-actionable-notification-button):not(
+    [low-contrast]
+  )[kind='ghost']
+  button {
+  color: $link-inverse;
+}
+
+:host(
+    #{$prefix}-actionable-notification-button
+  )[hide-close-button][kind='ghost']
+  button {
+  margin-right: $spacing-03;
+}
+
+:host(#{$prefix}-actionable-notification):not([inline]) {
+  @extend .#{$prefix}--actionable-notification--toast;
+}
+
+:host(#{$prefix}-actionable-notification[open]) {
+  display: flex;
+}
+
+:host(#{$prefix}-actionable-notification[hide-close-button])
+  .#{$prefix}--actionable-notification__close-button {
+  display: none;
+}
+
+:host(#{$prefix}-actionable-notification[kind='success']) {
+  @extend .#{$prefix}--actionable-notification--success;
+
+  &[low-contrast] {
+    @extend .#{$prefix}--actionable-notification--low-contrast,
+      .#{$prefix}--actionable-notification--success;
+  }
+}
+
+:host(#{$prefix}-actionable-notification[kind='info']) {
+  @extend .#{$prefix}--actionable-notification--info;
+
+  &[low-contrast] {
+    @extend .#{$prefix}--actionable-notification--low-contrast,
+      .#{$prefix}--actionable-notification--info;
+  }
+}
+
+:host(#{$prefix}-actionable-notification[kind='info-square']) {
+  @extend .#{$prefix}--actionable-notification--info-square;
+
+  &[low-contrast] {
+    @extend .#{$prefix}--actionable-notification--low-contrast,
+      .#{$prefix}--actionable-notification--info;
+  }
+}
+
+:host(#{$prefix}-actionable-notification[kind='warning']) {
+  @extend .#{$prefix}--actionable-notification--warning;
+
+  &[low-contrast] {
+    @extend .#{$prefix}--actionable-notification--low-contrast,
+      .#{$prefix}--actionable-notification--warning;
+  }
+
+  /* TODO: Remove this once the following issue with icon fill is resolved:
+  ** https://github.com/carbon-design-system/carbon/issues/13616
+  */
+  .#{$prefix}--inline-notification__icon path[data-icon-path='inner-path'] {
+    fill: $black-100;
+    opacity: 1;
+  }
+}
+
+:host(#{$prefix}-actionable-notification[kind='warning-alt']) {
+  @extend .#{$prefix}--actionable-notification--warning-alt;
+
+  &[low-contrast] {
+    @extend .#{$prefix}--actionable-notification--low-contrast,
+      .#{$prefix}--actionable-notification--warning;
+  }
+
+  /* TODO: Remove this once the following issue with icon fill is resolved:
+  ** https://github.com/carbon-design-system/carbon/issues/13616
+  */
+  .#{$prefix}--inline-notification__icon,
+  .#{$prefix}--toast-notification__icon {
+    path[data-icon-path='inner-path'] {
+      fill: $black-100;
+      opacity: 1;
+    }
+  }
+}
+
+:host(#{$prefix}-actionable-notification[kind='error']) {
+  @extend .#{$prefix}--actionable-notification--error;
+
+  &[low-contrast] {
+    @extend .#{$prefix}--actionable-notification--low-contrast,
+      .#{$prefix}--actionable-notification--error;
+  }
+}