feat: Add CWC Tearsheet

packages/carbon-web-components/package.json

@@ -70,7 +70,7 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@carbon/ibm-products-styles": "^2.24.0",
+    "@carbon/ibm-products-styles": "^2.27.1",
     "@carbon/styles": "1.51.0",
     "@floating-ui/dom": "^1.6.3",
     "@ibm/telemetry-js": "^1.2.1",

packages/carbon-web-components/src/components/button/button-set-base.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * 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 styles from './button.scss';
+import { prefix } from '../../globals/settings';
+
+/**
+ * Button set without button checks
+ *
+ * @element cds-button-set-base
+ */
+@customElement(`${prefix}-button-set-base`)
+class CDSButtonSetBase extends LitElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'list');
+  }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
+export default CDSButtonSetBase;

packages/carbon-web-components/src/components/button/button-set.ts

@@ -7,19 +7,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { BUTTON_KIND } from './defs';
 import styles from './button.scss';
 import { prefix } from '../../globals/settings';
+import CDSButtonSetBase from './button-set-base';
 
 /**
  * Button set.
  *
  * @element cds-button-set
  */
 @customElement(`${prefix}-button-set`)
-class CDSButtonSet extends LitElement {
+class CDSButtonSet extends CDSButtonSetBase {
   /**
    * Handler for @slotchange, set the first cds-button to kind secondary and primary for the remaining ones
    *
@@ -55,12 +56,6 @@ class CDSButtonSet extends LitElement {
   render() {
     return html` <slot @slotchange="${this._handleSlotChange}"></slot> `;
   }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute('role', 'list');
-  }
-
   /**
    * A selector that will return the child items.
    */

packages/carbon-web-components/src/components/side-panel/side-panel-story.ts

@@ -10,12 +10,11 @@
 import { TemplateResult, html } from 'lit';
 import { boolean, select, text } from '@storybook/addon-knobs';
 import '../button/button';
-import { SIDE_PANEL_SIZE } from './side-panel';
+import { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT } from './side-panel';
 import './index';
 import '../text-input/index';
 import '../textarea/index';
 import storyDocs from './side-panel-story.mdx';
-import { SIDE_PANEL_PLACEMENT } from './defs';
 import Settings from '@carbon/icons/lib/settings/16';
 import Trashcan from '@carbon/icons/lib/trash-can/16';
 import { prefix } from '../../globals/settings';
@@ -197,6 +196,7 @@ const actionItems = {
   'Two buttons with danger': 3,
   'Three buttons with ghost': 4,
   'Three buttons with danger': 5,
+  'Too many buttons': 6,
 };
 
 // TODO: There are problems switching this
@@ -243,6 +243,22 @@ const getActionItems = (index) => {
         <cds-button key="primary" slot="actions" kind=${BUTTON_KIND.PRIMARY}
           >Primary</cds-button
         >`;
+    case 6:
+      return html`<cds-button
+          key="danger"
+          slot="actions"
+          kind=${BUTTON_KIND.DANGER}
+          >Danger</cds-button
+        >
+        <cds-button key="tertiary" slot="actions" kind=${BUTTON_KIND.TERTIARY}
+          >Tertiary</cds-button
+        >
+        <cds-button key="secondary" slot="actions" kind=${BUTTON_KIND.SECONDARY}
+          >Secondary</cds-button
+        >
+        <cds-button key="primary" slot="actions" kind=${BUTTON_KIND.PRIMARY}
+          >Primary</cds-button
+        >`;
     default:
       return null;
   }
@@ -340,7 +356,6 @@ const DefaultTemplate = (argsIn) => {
       selector-page-content=${args.selectorPageContent}
       size=${args.size}
       ?slide-in=${args.slideIn}
-      slug=${args.slug}
       title=${args.title}
       @cds-side-panel-navigate-back=${prevStep}>
       <!-- default slotted content -->

packages/carbon-web-components/src/components/side-panel/side-panel.scss

@@ -14,6 +14,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities/ai-gradient' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use 'sass:map';
 
 $pkg-prefix: 'cds';
@@ -97,6 +98,10 @@ $block-class-action-set: #{$pkg-prefix}--action-set;
         @extend .#{$block-class}--#{$size};
       }
     }
+
+    &[condensed-actions] {
+      @extend .#{$block-class}--condensed-actions;
+    }
   }
 
   #{$prefix}-layer {
@@ -208,6 +213,12 @@ $block-class-action-set: #{$pkg-prefix}--action-set;
       max-inline-size: none;
     }
 
+    ::slotted(#{$prefix}-button[hidden]) {
+      @extend .#{$prefix}--visually-hidden;
+
+      display: none;
+    }
+
     // -1 in @container query is for 1px left border
     @container (width <= #{map.get(spv.$side-panel-sizes, lg)}) {
       /* stylelint-disable-next-line selector-type-no-unknown */

packages/carbon-web-components/src/components/side-panel/side-panel.ts

@@ -8,7 +8,12 @@
  */
 
 import { LitElement, html } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
+import {
+  property,
+  query,
+  queryAssignedElements,
+  state,
+} from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import HostListener from '../../globals/decorators/host-listener';
 import HostListenerMixin from '../../globals/mixins/host-listener';
@@ -22,9 +27,9 @@ import { moderate02 } from '@carbon/motion';
 import '../button/index';
 import '../layer/index';
 import Handle from '../../globals/internal/handle';
-import './side-panel-button-set';
+import '../button/button-set-base';
 
-export { SIDE_PANEL_SIZE };
+export { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT };
 
 // eslint-disable-next-line no-bitwise
 const PRECEDING =
@@ -139,6 +144,9 @@ class CDSSidePanel extends HostListenerMixin(LitElement) {
   @query(`.${blockClass}__inner-content`)
   private _innerContent!: HTMLElement;
 
+  @queryAssignedElements({ slot: 'actions', selector: `${prefix}-button` })
+  private _actions!: Array<HTMLElement>;
+
   @state()
   _doAnimateTitle = true;
 
@@ -174,7 +182,6 @@ class CDSSidePanel extends HostListenerMixin(LitElement) {
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleBlur = async ({ target, relatedTarget }: FocusEvent) => {
     const {
-      // condensedActions,
       open,
       _startSentinelNode: startSentinelNode,
       _endSentinelNode: endSentinelNode,
@@ -358,15 +365,17 @@ class CDSSidePanel extends HostListenerMixin(LitElement) {
   };
 
   private _checkUpdateIconButtonSizes = () => {
-    const slug = this.querySelector('cds-slug');
+    const slug = this.querySelector(`${prefix}-slug`);
     const otherButtons = this?.shadowRoot?.querySelectorAll(
       '#nav-back-button, #close-button'
     );
 
     let iconButtonSize = 'sm';
 
     if (slug || otherButtons?.length) {
-      const actions = this?.querySelectorAll?.('cds-button[slot="actions"]');
+      const actions = this?.querySelectorAll?.(
+        `${prefix}-button[slot='actions']`
+      );
 
       if (actions?.length && /l/.test(this.size)) {
         iconButtonSize = 'md';
@@ -386,14 +395,14 @@ class CDSSidePanel extends HostListenerMixin(LitElement) {
 
   private _handleSlugChange(e: Event) {
     this._checkUpdateIconButtonSizes();
-    const childItems = (e.target as HTMLSlotElement).assignedNodes();
+    const childItems = (e.target as HTMLSlotElement).assignedElements();
 
     this._hasSlug = childItems.length > 0;
   }
 
   private _handleSubtitleChange(e: Event) {
     const target = e.target as HTMLSlotElement;
-    const subtitle = target?.assignedNodes();
+    const subtitle = target?.assignedElements();
 
     this._hasSubtitle = subtitle.length > 0;
   }
@@ -413,6 +422,18 @@ class CDSSidePanel extends HostListenerMixin(LitElement) {
     }
   }
 
+  private _checkUpdateActionSizes = () => {
+    if (this._actions) {
+      for (let i = 0; i < this._actions.length; i++) {
+        this._actions[i].setAttribute(
+          'size',
+          this.condensedActions ? 'lg' : 'xl'
+        );
+      }
+    }
+  };
+
+  private _maxActions = 3;
   private _handleActionsChange(e: Event) {
     const target = e.target as HTMLSlotElement;
     const actions = target?.assignedElements();
@@ -421,26 +442,28 @@ class CDSSidePanel extends HostListenerMixin(LitElement) {
     this._checkUpdateIconButtonSizes();
 
     const actionsCount = actions?.length ?? 0;
-    if (actionsCount > 3) {
-      this._actionsCount = 3;
-      console.warn(`Too many side-panel actions, max 3.`);
+    if (actionsCount > this._maxActions) {
+      this._actionsCount = this._maxActions;
+      if (process.env.NODE_ENV === 'development') {
+        console.error(`Too many side-panel actions, max ${this._maxActions}.`);
+      }
     } else {
       this._actionsCount = actionsCount;
     }
 
-    for (let i = 0; i < actionsCount; i++) {
-      if (i > 3) {
+    for (let i = 0; i < actions?.length; i++) {
+      if (i + 1 > this._maxActions) {
         // hide excessive side panel actions
-        actions[i].setAttribute('hidden', '');
+        actions[i].setAttribute('hidden', 'true');
         actions[i].setAttribute(
-          'data-actions-limit-3-exceeded',
+          `data-actions-limit-${this._maxActions}-exceeded`,
           `${actions.length}`
         );
       } else {
-        actions[i].setAttribute('size', this.condensedActions ? 'lg' : 'xl');
         actions[i].classList.add(`${blockClassActionSet}__action-button`);
       }
     }
+    this._checkUpdateActionSizes();
   }
 
   private _checkSetDoAnimateTitle = () => {
@@ -788,14 +811,14 @@ class CDSSidePanel extends HostListenerMixin(LitElement) {
             </div>`
           : html` ${headerTemplate} ${mainTemplate}`}
 
-        <cds-side-panel-button-set
+        <cds-button-set-base
           class=${`${blockClass}__actions-container`}
           ?hidden=${this._actionsCount === 0}
           ?condensed=${condensedActions}
           actions-multiple=${actionsMultiple}
           size=${size}>
           <slot name="actions" @slotchange=${this._handleActionsChange}></slot>
-        </cds-side-panel-button-set>
+        </cds-button-set-base>
 
         <a
           id="end-sentinel"
@@ -819,6 +842,10 @@ class CDSSidePanel extends HostListenerMixin(LitElement) {
   }
 
   async updated(changedProperties) {
+    if (changedProperties.has('condensedActions')) {
+      this._checkUpdateActionSizes();
+    }
+
     if (changedProperties.has('currentStep')) {
       this._handleCurrentStepUpdate();
     }

packages/carbon-web-components/src/components/tearsheet/defs.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export enum TEARSHEET_INFLUENCER_PLACEMENT {
+  /** right / default */
+  RIGHT = 'right',
+
+  /** left  */
+  LEFT = 'left',
+}
+
+export enum TEARSHEET_INFLUENCER_WIDTH {
+  /** narrow /default */
+  NARROW = 'narrow',
+  /** wide  */
+  WIDE = 'wide',
+}
+
+export enum TEARSHEET_WIDTH {
+  /** narrow  */
+  NARROW = 'narrow',
+  /** wide  */
+  WIDE = 'wide',
+}