Merge pull request #11180 from ariellalgilmore/feat/form-items-with-slug

feat(form-items): add slug and fix stack

packages/carbon-web-components/package.json

@@ -72,7 +72,7 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@carbon/styles": "^1.42.0",
+    "@carbon/styles": "1.44.0",
     "flatpickr": "4.6.1",
     "lit": "^2.7.6",
     "lodash-es": "^4.17.21"
@@ -93,7 +93,7 @@
     "@babel/template": "~7.12.0",
     "@babel/traverse": "~7.23.0",
     "@carbon/icon-helpers": "^10.28.0",
-    "@carbon/icons": "^10.48.0",
+    "@carbon/icons": "^11.31.0",
     "@open-wc/semantic-dom-diff": "~0.18.0",
     "@percy-io/in-percy": "^0.1.11",
     "@percy/cli": "^1.8.1",

packages/carbon-web-components/src/components/accordion/accordion-item.ts

@@ -107,6 +107,15 @@ class CDSAccordionItem extends FocusMixin(LitElement) {
         )
       );
     }
+    const content = this.shadowRoot!.querySelector(`.${prefix}--accordion__wrapper`) as HTMLElement;
+
+    if (this.open) {
+      // accordion opens
+      content!.style.maxBlockSize = content!.scrollHeight + 15 + 'px';
+    } else {
+      // accordion closes
+      content!.style.maxBlockSize = '';
+    }
   }
 
   /**
@@ -213,8 +222,10 @@ class CDSAccordionItem extends FocusMixin(LitElement) {
           <slot name="title">${title}</slot>
         </div>
       </button>
-      <div id="content" part="content" class="${contentClasses}">
-        <slot></slot>
+      <div class="${prefix}--accordion__wrapper">
+        <div id="content" part="content" class="${contentClasses}">
+          <slot></slot>
+        </div>
       </div>
     `;
   }

packages/carbon-web-components/src/components/combo-box/combo-box.scss

@@ -11,6 +11,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/layout' as *;
 @use '@carbon/styles/scss/components/combo-box' as *;
 @use '@carbon/styles/scss/components/form';
@@ -120,3 +121,47 @@ $css--plex: true !default;
     padding-bottom: rem(15px);
   }
 }
+
+:host(#{$prefix}-combo-box[slug]) {
+  @extend .#{$prefix}--list-box__wrapper--slug;
+
+  .#{$prefix}--list-box__field {
+    padding: 0;
+  }
+
+  ::slotted(#{$prefix}-slug) {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: $spacing-08;
+  }
+
+  ::slotted(#{$prefix}-slug:not([revert-active])) {
+    transform: translateY(-50%);
+  }
+}
+
+:host(#{$prefix}-combo-box[slug][isclosable]) {
+  ::slotted(#{$prefix}-slug) {
+    inset-inline-end: $spacing-10;
+  }
+}
+
+:host(#{$prefix}-combo-box[warn]),
+:host(#{$prefix}-combo-box[invalid]) {
+  ::slotted(#{$prefix}-slug) {
+    inset-inline-end: $spacing-10;
+  }
+}
+
+:host(#{$prefix}-combo-box[slug][isclosable]) {
+  ::slotted(#{$prefix}-slug) {
+    inset-inline-end: $spacing-10;
+  }
+}
+
+:host(#{$prefix}-combo-box[warn][isclosable]),
+:host(#{$prefix}-combo-box[invalid][isclosable]) {
+  ::slotted(#{$prefix}-slug) {
+    inset-inline-end: to-rem(88px);
+  }
+}

packages/carbon-web-components/src/components/combo-box/combo-box.ts

@@ -291,7 +291,8 @@ class CDSComboBox extends CDSDropdown {
     return true;
   }
 
-  updated() {
+  updated(changedProperties) {
+    super.updated(changedProperties);
     const { _listBoxNode: listBoxNode } = this;
     if (listBoxNode) {
       listBoxNode.classList.add(`${prefix}--combo-box`);

packages/carbon-web-components/src/components/date-picker/date-picker-input.ts

@@ -30,6 +30,30 @@ export { DATE_PICKER_INPUT_COLOR_SCHEME, DATE_PICKER_INPUT_KIND };
  */
 @customElement(`${prefix}-date-picker-input`)
 class CDSDatePickerInput extends FocusMixin(LitElement) {
+  /**
+   * `true` if there is a slug.
+   */
+  private _hasSlug = false;
+
+  /**
+   * Handles `slotchange` event.
+   */
+  protected _handleSlugSlotChange({ target }: Event) {
+    const hasContent = (target as HTMLSlotElement)
+      .assignedNodes()
+      .filter((elem) =>
+        (elem as HTMLElement).matches !== undefined
+          ? (elem as HTMLElement).matches(
+              (this.constructor as typeof CDSDatePickerInput).slugItem
+            )
+          : false
+      );
+
+    this._hasSlug = Boolean(hasContent);
+    (hasContent[0] as HTMLElement).setAttribute('size', 'mini');
+    this.requestUpdate();
+  }
+
   /**
    * The calendar icon.
    */
@@ -218,6 +242,7 @@ class CDSDatePickerInput extends FocusMixin(LitElement) {
       warnText,
       _handleClickWrapper: handleClickWrapper,
       _handleInput: handleInput,
+      _hasSlug: hasSlug,
     } = this;
 
     const invalidIcon = WarningFilled16({
@@ -264,6 +289,7 @@ class CDSDatePickerInput extends FocusMixin(LitElement) {
       [`${prefix}--date-picker-input__wrapper--invalid`]:
         normalizedProps.invalid,
       [`${prefix}--date-picker-input__wrapper--warn`]: normalizedProps.warn,
+      [`${prefix}--date-picker-input__wrapper--slug`]: hasSlug,
     });
 
     const helperTextClasses = classMap({
@@ -276,18 +302,21 @@ class CDSDatePickerInput extends FocusMixin(LitElement) {
         <slot name="label-text">${labelText}</slot>
       </label>
       <div class="${inputWrapperClasses}" @click="${handleClickWrapper}">
-        <input
-          id="input"
-          type="${type}"
-          class="${inputClasses}"
-          ?disabled="${disabled}"
-          pattern="${pattern}"
-          placeholder="${ifDefined(placeholder)}"
-          .value="${ifDefined(value)}"
-          ?data-invalid="${invalid}"
-          @input="${handleInput}"
-          ?readonly="${readonly}" />
-        ${normalizedProps.icon || this._renderIcon()}
+        <span>
+          <input
+            id="input"
+            type="${type}"
+            class="${inputClasses}"
+            ?disabled="${disabled}"
+            pattern="${pattern}"
+            placeholder="${ifDefined(placeholder)}"
+            .value="${ifDefined(value)}"
+            ?data-invalid="${invalid}"
+            @input="${handleInput}"
+            ?readonly="${readonly}" />
+          ${normalizedProps.icon || this._renderIcon()}
+          <slot name="slug" @slotchange="${this._handleSlugSlotChange}"></slot>
+        </span>
       </div>
       <div
         class="${prefix}--form-requirement"
@@ -319,6 +348,13 @@ class CDSDatePickerInput extends FocusMixin(LitElement) {
     return `${prefix}-date-picker`;
   }
 
+  /**
+   * A selector that will return the slug item.
+   */
+  static get slugItem() {
+    return `${prefix}-slug`;
+  }
+
   static shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,

packages/carbon-web-components/src/components/date-picker/date-picker.scss

@@ -11,6 +11,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/date-picker/date-picker' as *;
 
@@ -151,3 +152,15 @@ $css--plex: true !default;
     height: rem(14px);
   }
 }
+
+:host(#{$prefix}-date-picker-input) {
+  ::slotted(#{$prefix}-slug) {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: $spacing-08;
+  }
+
+  ::slotted(#{$prefix}-slug:not([revert-active])) {
+    transform: translateY(-50%);
+  }
+}

packages/carbon-web-components/src/components/dropdown/dropdown.scss

@@ -11,15 +11,12 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities' as *;
-@use '@carbon/styles/scss/components/list-box/list-box' as *;
+@use '@carbon/styles/scss/components/list-box/list-box';
 @use '@carbon/styles/scss/components/dropdown' as *;
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/checkbox';
 @use '@carbon/styles/scss/components/tag';
 
-// https://github.com/carbon-design-system/carbon/issues/11408
-@include list-box;
-
 :host(#{$prefix}-dropdown) {
   outline: none;
 
@@ -152,3 +149,30 @@ $css--plex: true !default;
     @include skeleton;
   }
 }
+
+:host(#{$prefix}-dropdown[slug]) {
+  @extend .#{$prefix}--list-box__wrapper--slug;
+
+  ::slotted(#{$prefix}-slug) {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: $spacing-08;
+  }
+
+  ::slotted(#{$prefix}-slug:not([revert-active])) {
+    transform: translateY(-50%);
+  }
+}
+
+:host(#{$prefix}-dropdown[slug][warn]),
+:host(#{$prefix}-dropdown[slug][invalid]) {
+  .#{$prefix}--list-box {
+    .#{$prefix}--list-box__field {
+      padding-inline-end: $spacing-12;
+    }
+  }
+
+  ::slotted(#{$prefix}-slug) {
+    inset-inline-end: $spacing-10;
+  }
+}

packages/carbon-web-components/src/components/dropdown/dropdown.ts

@@ -66,6 +66,11 @@ export {
 class CDSDropdown extends ValidityMixin(
   HostListenerMixin(FormMixin(FocusMixin(LitElement)))
 ) {
+  /**
+   * `true` if there is a slug.
+   */
+  protected _hasSlug = false;
+
   /**
    * The latest status of this dropdown, for screen reader to accounce.
    */
@@ -246,6 +251,25 @@ class CDSDropdown extends ValidityMixin(
     this.requestUpdate();
   }
 
+  /**
+   * Handles `slotchange` event.
+   */
+  protected _handleSlugSlotChange({ target }: Event) {
+    const hasContent = (target as HTMLSlotElement)
+      .assignedNodes()
+      .filter((elem) =>
+        (elem as HTMLElement).matches !== undefined
+          ? (elem as HTMLElement).matches(
+              (this.constructor as typeof CDSDropdown).slugItem
+            )
+          : false
+      );
+
+    this._hasSlug = Boolean(hasContent);
+    (hasContent[0] as HTMLElement).setAttribute('size', 'mini');
+    this.requestUpdate();
+  }
+
   /**
    * Handles user-initiated selection of a dropdown item.
    *
@@ -647,6 +671,13 @@ class CDSDropdown extends ValidityMixin(
     return true;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  updated(_changedProperties) {
+    this._hasSlug
+      ? this.setAttribute('slug', '')
+      : this.removeAttribute('slug');
+  }
+
   /**
    * The CSS class list for dropdown listbox
    */
@@ -692,6 +723,7 @@ class CDSDropdown extends ValidityMixin(
       _handleKeydownInner: handleKeydownInner,
       _handleKeypressInner: handleKeypressInner,
       _handleSlotchangeHelperText: handleSlotchangeHelperText,
+      _handleSlugSlotChange: handleSlugSlotChange,
       _slotHelperTextNode: slotHelperTextNode,
     } = this;
     const inline = type === DROPDOWN_TYPE.INLINE;
@@ -760,6 +792,7 @@ class CDSDropdown extends ValidityMixin(
             ${ChevronDown16({ 'aria-label': toggleLabel })}
           </div>
         </div>
+        <slot name="slug" @slotchange=${handleSlugSlotChange}></slot>
         ${menuBody}
       </div>
       <div
@@ -836,6 +869,13 @@ class CDSDropdown extends ValidityMixin(
     return `${prefix}-dropdown-toggled`;
   }
 
+  /**
+   * A selector that will return the slug item.
+   */
+  static get slugItem() {
+    return `${prefix}-slug`;
+  }
+
   static shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,

packages/carbon-web-components/src/components/multi-select/multi-select.scss

@@ -163,3 +163,30 @@ $css--plex: true !default;
     color: $text-primary;
   }
 }
+
+:host(#{$prefix}-multi-select[slug]) {
+  @extend .#{$prefix}--list-box__wrapper--slug;
+
+  ::slotted(#{$prefix}-slug) {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: $spacing-08;
+  }
+
+  ::slotted(#{$prefix}-slug:not([revert-active])) {
+    transform: translateY(-50%);
+  }
+}
+
+:host(#{$prefix}-multi-select[slug][warn]),
+:host(#{$prefix}-multi-select[slug][invalid]) {
+  .#{$prefix}--list-box {
+    .#{$prefix}--list-box__field {
+      padding-inline-end: $spacing-12;
+    }
+  }
+
+  ::slotted(#{$prefix}-slug) {
+    inset-inline-end: $spacing-10;
+  }
+}