feat(modal): sync with @carbon/react v11 (#10397)

* feat(modal): syncing the modal with v11 * feat(modal): finish adding props * fix(modal): removed unneeded prop * fix(modal): cleaned styles * fix(modal): fixed left close bug --------- Co-authored-by: kennylam <[email protected]>
carbon-design-system · May 2, 2023 · 851dea5 · 851dea5
1 parent d059e60
commit 851dea5
Show file tree

Hide file tree

Showing 18 changed files with 674 additions and 300 deletions.
diff --git a/...s/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/cdn.html b/...s/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/cdn.html
@@ -24,8 +24,8 @@
 <body>
   <cds-combo-box
     helper-text="Optional helper text"
-    label-text="Combo box title"
-    trigger-content="Filter..."
+    title-text="Combo box title"
+    label="Filter..."
   >
     <cds-combo-box-item value="all">Option 1</cds-combo-box-item>
     <cds-combo-box-item value="cloudFoundry">Option 2</cds-combo-box-item>

diff --git a/...packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/index.html b/...packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/index.html
@@ -24,8 +24,8 @@
 <body>
   <cds-combo-box
     helper-text="Optional helper text"
-    label-text="Combo box title"
-    trigger-content="Filter..."
+    title-text="Combo box title"
+    label="Filter..."
   >
     <cds-combo-box-item value="all">Option 1</cds-combo-box-item>
     <cds-combo-box-item value="cloudFoundry">Option 2</cds-combo-box-item>

diff --git a/web-components/packages/carbon-web-components/src/components/modal/defs.ts b/web-components/packages/carbon-web-components/src/components/modal/defs.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2020, 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.
@@ -22,9 +22,9 @@ export enum MODAL_SIZE {
   SMALL = 'sm',
 
   /**
-   * Regular size.
+   * Medium size.
    */
-  REGULAR = '',
+  MEDIUM = 'md',
 
   /**
    * Large size.

diff --git a/web-components/packages/carbon-web-components/src/components/modal/index.ts b/web-components/packages/carbon-web-components/src/components/modal/index.ts
@@ -1,14 +1,15 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021
+ * Copyright IBM Corp. 2021, 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 './modal';
 import './modal-body';
+import './modal-body-content';
 import './modal-close-button';
 import './modal-footer';
 import './modal-footer-button';

diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal-body-content.ts b/web-components/packages/carbon-web-components/src/components/modal/modal-body-content.ts
@@ -0,0 +1,29 @@
+/**
+ * @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 { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import styles from './modal.scss';
+
+/**
+ * Modal body content
+ *
+ * @element cds-modal-body-content
+ */
+@customElement(`${prefix}-modal-body-content`)
+class CDSModalBodyContent extends LitElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+export default CDSModalBodyContent;
diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal-body.ts b/web-components/packages/carbon-web-components/src/components/modal/modal-body.ts
@@ -18,12 +18,12 @@ import styles from './modal.scss';
  * @element cds-modal-body
  */
 @customElement(`${prefix}-modal-body`)
-class BXModalBody extends LitElement {
+class CDSModalBody extends LitElement {
   render() {
     return html` <slot></slot> `;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXModalBody;
+export default CDSModalBody;
diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal-close-button.ts b/web-components/packages/carbon-web-components/src/components/modal/modal-close-button.ts
@@ -23,21 +23,21 @@ import styles from './modal.scss';
  * @csspart close-icon The close icon.
  */
 @customElement(`${prefix}-modal-close-button`)
-class BXModalCloseButton extends FocusMixin(LitElement) {
+class CDSModalCloseButton extends FocusMixin(LitElement) {
   /**
-   * The assistive text for the button.
+   * Specify a label for the close button of the modal; defaults to close
    */
-  @property({ attribute: 'assistive-text' })
-  assistiveText = 'Close';
+  @property({ attribute: 'close-button-label' })
+  closeButtonLabel = 'Close';
 
   render() {
-    const { assistiveText } = this;
+    const { closeButtonLabel } = this;
     return html`
       <button
         part="button"
-        aria-label="${ifDefined(assistiveText)}"
+        aria-label="${ifDefined(closeButtonLabel)}"
         class="${prefix}--modal-close"
-        title="${ifDefined(assistiveText)}">
+        title="${ifDefined(closeButtonLabel)}">
         ${Close20({
           part: 'close-icon',
           class: `${prefix}--modal-close__icon`,
@@ -53,4 +53,4 @@ class BXModalCloseButton extends FocusMixin(LitElement) {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXModalCloseButton;
+export default CDSModalCloseButton;
diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal-footer.ts b/web-components/packages/carbon-web-components/src/components/modal/modal-footer.ts
@@ -7,9 +7,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit/directives/class-map.js';
 import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import styles from './modal.scss';
 
@@ -19,18 +18,19 @@ import styles from './modal.scss';
  * @element cds-modal-footer
  */
 @customElement(`${prefix}-modal-footer`)
-class BXModalFooter extends LitElement {
+class CDSModalFooter extends LitElement {
   /**
    * `true` if this modal footer has more than two buttons.
    */
-  private _hasMoreThanTwoButtons = false;
+  @property({ type: Boolean, reflect: true, attribute: 'has-three-buttons' })
+  hasThreeButtons = false;
 
   /**
    * Handles `slotchange` event.
    */
   private _handleSlotChange(event: Event) {
-    const { selectorButtons } = this.constructor as typeof BXModalFooter;
-    this._hasMoreThanTwoButtons =
+    const { selectorButtons } = this.constructor as typeof CDSModalFooter;
+    this.hasThreeButtons =
       (event.target as HTMLSlotElement)
         .assignedNodes()
         .filter(
@@ -42,19 +42,7 @@ class BXModalFooter extends LitElement {
   }
 
   render() {
-    const {
-      _hasMoreThanTwoButtons: hasMoreThanTwoButtons,
-      _handleSlotChange: handleSlotChange,
-    } = this;
-    const classes = classMap({
-      [`${prefix}--modal-footer`]: true,
-      [`${prefix}--modal-footer--three-button`]: hasMoreThanTwoButtons,
-    });
-    return html`
-      <div class="${classes}">
-        <slot @slotchange="${handleSlotChange}"></slot>
-      </div>
-    `;
+    return html` <slot @slotchange="${this._handleSlotChange}"></slot> `;
   }
 
   /**
@@ -67,4 +55,4 @@ class BXModalFooter extends LitElement {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXModalFooter;
+export default CDSModalFooter;
diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal-header.ts b/web-components/packages/carbon-web-components/src/components/modal/modal-header.ts
@@ -18,12 +18,12 @@ import styles from './modal.scss';
  * @element cds-modal-header
  */
 @customElement(`${prefix}-modal-header`)
-class BXModalHeader extends LitElement {
+class CDSModalHeader extends LitElement {
   render() {
     return html` <slot></slot> `;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXModalHeader;
+export default CDSModalHeader;
diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal-heading.ts b/web-components/packages/carbon-web-components/src/components/modal/modal-heading.ts
@@ -18,12 +18,12 @@ import styles from './modal.scss';
  * @element cds-modal-heading
  */
 @customElement(`${prefix}-modal-heading`)
-class BXModalHeading extends LitElement {
+class CDSModalHeading extends LitElement {
   render() {
     return html` <slot></slot> `;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXModalHeading;
+export default CDSModalHeading;
diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal-label.ts b/web-components/packages/carbon-web-components/src/components/modal/modal-label.ts
@@ -18,12 +18,12 @@ import styles from './modal.scss';
  * @element cds-modal-label
  */
 @customElement(`${prefix}-modal-label`)
-class BXModalLabel extends LitElement {
+class CDSModalLabel extends LitElement {
   render() {
     return html` <slot></slot> `;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXModalLabel;
+export default CDSModalLabel;
diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal-story.mdx b/web-components/packages/carbon-web-components/src/components/modal/modal-story.mdx
@@ -14,6 +14,17 @@ must be completed before a user can continue. While effective when used
 correctly, modals should be used sparingly to limit disruption to a user
 experience.
 
+- [Modal](#modal)
+  - [Getting started](#getting-started)
+  - [Component API](#component-api)
+  - [Modal sizes](#modal-sizes)
+    - [Overflow content](#overflow-content)
+  - [Modal button variants](#modal-button-variants)
+  - [Using modal title as message](#using-modal-title-as-message)
+  - [Focus management](#focus-management)
+  - [References](#references)
+  - [Feedback](#feedback)
+
 ## Getting started
 
 Here's a quick example to get you started.
@@ -57,6 +68,99 @@ import '@carbon/web-components/es/components/button/index.js';
 </script>
 ```
 
+## Component API
+
+Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
+`<cds-modal open>`) and `false` means not setting the attribute (e.g.
+`<cds-modal>` without `open` attribute).
+
+<Props of="cds-modal" />
+
+## `<cds-modal-footer-button>` attributes and properties
+
+Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
+`<cds-modal-footer-button disabled>`) and `false` means not setting the attribute
+(e.g. `<cds-modal-footer-button>` without `disabled` attribute).
+
+<Props of="cds-modal-footer-button" />
+
+## Opening/closing modal
+
+For both modal variants, you can open/close the modal by changing the open prop. 
+For example, you can implement a button that launches the modal upon click.
+
+```html
+
+<cds-modal>
+```
+
+## Modal sizes
+There are four responsive modal sizes: extra-small (sm), small (sm), default/medium (md), and large (lg). 
+You can set it via the size prop.
+
+```html
+<cds-modal size="lg">
+  <cds-modal-header>
+    <cds-modal-close-button></cds-modal-close-button>
+    <cds-modal-label>Label (Optional)</cds-modal-label>
+    <cds-modal-heading>Modal Title</cds-modal-heading>
+  </cds-modal-header>
+  <cds-modal-body>
+    <cds-modal-body-content>Modal text description</cds-modal-body-content>
+  </cds-modal-body>
+  <cds-modal-footer>
+    <cds-modal-footer-button kind="secondary" data-modal-close
+      >Cancel</cds-modal-footer-button
+    >
+    <cds-modal-footer-button kind="primary">Save</cds-modal-footer-button>
+  </cds-modal-footer>
+</cds-modal>
+```
+
+## Overflow content
+In cases where even the largest modal size does not fit all of the modal content, Carbon design specifies
+ having a "visual fade" at the end of the modal body area to indicate there is additional content out of view. 
+ You can set hasScrollingContent prop to the component as such:
+
+```html
+ <cds-modal has-scrolling-content>
+  <cds-modal-header>
+    <cds-modal-close-button></cds-modal-close-button>
+    <cds-modal-label>Label (Optional)</cds-modal-label>
+    <cds-modal-heading>Modal Title</cds-modal-heading>
+  </cds-modal-header>
+  <cds-modal-body>
+    <cds-modal-body-content>Modal text description</cds-modal-body-content>
+    <p>Some very large contents...</p>
+  </cds-modal-body>
+  <cds-modal-footer>
+    <cds-modal-footer-button kind="secondary" data-modal-close
+      >Cancel</cds-modal-footer-button
+    >
+    <cds-modal-footer-button kind="primary">Save</cds-modal-footer-button>
+  </cds-modal-footer>
+</cds-modal>
+```
+
+## Modal button variants
+With the modal component you can use up to three buttons. One has to be primary, and the others secondary.
+Only the primary button can be a danger button.
+
+## Using modal title as message
+For short, direct messages the title can include the whole message to add visual clarity to an otherwise repetitive title and body message.
+
+```html
+  <cds-modal>
+    <cds-modal-header>
+      <cds-modal-close-button></cds-modal-close-button>
+      <cds-modal-heading
+        >You have been successfully signed out</cds-modal-heading
+      >
+    </cds-modal-header>
+    <cds-modal-body></cds-modal-body>
+  </cds-modal>
+```
+
 ## Focus management
 
 `<cds-modal>` puts focus on one of the following elements (in priority order)
@@ -75,18 +179,14 @@ sequential-focusable element.
 Once `<cds-modal>` gets closed, it puts focus on the last focused element before
 it got open, typically the launcher button.
 
-## `<cds-modal>` attributes and properties
+## References
 
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<cds-modal open>`) and `false` means not setting the attribute (e.g.
-`<cds-modal>` without `open` attribute).
+Check out the
+[usage guidelines](https://www.carbondesignsystem.com/components/modal/usage/)
+on the Carbon Design System website.
 
-<Props of="cds-modal" />
-
-## `<cds-modal-footer-button>` attributes and properties
-
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<cds-modal-footer-button disabled>`) and `false` means not setting the attribute
-(e.g. `<cds-modal-footer-button>` without `disabled` attribute).
+## Feedback
 
-<Props of="cds-modal-footer-button" />
+Help us improve this component by providing feedback through, asking questions
+on Slack,or updating this file on
+[GitHub](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/edit/main/packages/carbon-web-components/src/components/modal/modal-story.mdx).