fix(dropdown): align styles and behavior with React parity

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

@@ -1,12 +1,15 @@
 /**
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2025
  *
  * 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 { classMap } from 'lit/directives/class-map.js';
+import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
+import { DROPDOWN_SIZE } from './defs';
 import styles from './dropdown.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
@@ -15,14 +18,31 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
  */
 @customElement(`${prefix}-dropdown-skeleton`)
 class CDSDropdownSkeleton extends LitElement {
+  /**
+   * Specify whether the label should be hidden, or not.
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'hide-label' })
+  hideLabel = false;
+
+  /**
+   * Specify the size of the ListBox.
+   */
+  @property({ reflect: true })
+  size = DROPDOWN_SIZE.MEDIUM;
+
   render() {
+    const { hideLabel, size } = this;
+    const classes = classMap({
+      [`${prefix}--skeleton`]: true,
+      [`${prefix}--dropdown`]: true,
+      [`${prefix}--list-box--${size}`]: Boolean(size),
+    });
+
     return html`
-      <div
-        class="${prefix}--skeleton ${prefix}--dropdown-v2 ${prefix}--list-box ${prefix}--form-item">
-        <div class="${prefix}--list-box__field">
-          <span class="${prefix}--list-box__label"></span>
-        </div>
-      </div>
+      ${!hideLabel
+        ? html`<span class="${prefix}--label ${prefix}--skeleton"></span>`
+        : null}
+      <div class=${classes}></div>
     `;
   }
 

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

@@ -17,13 +17,22 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/components/checkbox';
 @use '@carbon/styles/scss/components/tag';
 @use '@carbon/styles/scss/utilities/ai-gradient' as *;
+@use '@carbon/styles/scss/utilities/convert' as convert;
 
 // https://github.com/carbon-design-system/carbon/issues/11408
 @include list-box;
 
 :host(#{$prefix}-dropdown) {
   outline: none;
 
+  .#{$prefix}--list-box {
+    box-sizing: border-box;
+  }
+
+  .#{$prefix}--list-box--expanded {
+    border-block-end-color: $border-subtle;
+  }
+
   .#{$prefix}--assistive-text {
     inset-block-start: -100%;
     // Hides screen reader cursor
@@ -37,7 +46,7 @@ $css--plex: true !default;
   .#{$prefix}--list-box__menu {
     inset-block-start: 100%;
     margin-block-start: 1px;
-    outline: 1px solid $focus;
+    outline: none;
   }
 }
 
@@ -46,17 +55,20 @@ $css--plex: true !default;
     outline: none;
   }
 }
+
+:host(#{$prefix}-dropdown.#{$prefix}--dropdown--focus) {
+  .#{$prefix}--list-box__field {
+    @include focus-outline('outline');
+  }
+}
+
 :host(#{$prefix}-dropdown[ai-label]) .#{$prefix}--list-box__wrapper--decorator {
   @include ai-gradient;
 }
 
 :host(#{$prefix}-dropdown[invalid]) {
-  .#{$prefix}--list-box__field {
-    outline: none;
-  }
-
   .#{$prefix}--form__helper-text {
-    color: $text-error;
+    color: $text-error !important; /* stylelint-disable-line declaration-no-important */
   }
 }
 
@@ -82,17 +94,68 @@ $css--plex: true !default;
   @extend .#{$prefix}--list-box__wrapper--inline;
 
   grid-gap: 0 $spacing-06;
+
+  .#{$prefix}--list-box__menu {
+    margin-block-start: 0;
+  }
+}
+
+:host(#{$prefix}-dropdown[type='inline']) {
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__field {
+    padding-block: 0;
+    padding-inline-end: $spacing-09;
+    padding-inline-start: $spacing-05;
+  }
+}
+
+:host(#{$prefix}-dropdown[type='inline'][warn]),
+:host(#{$prefix}-dropdown[type='inline'][invalid]) {
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__field {
+    padding-inline-end: $spacing-10;
+  }
+}
+
+:host(#{$prefix}-dropdown[ai-label][type='inline'])
+  .#{$prefix}--list-box__expanded {
+  border-block-end: 1px solid $ai-border-strong;
+}
+
+:host(#{$prefix}-dropdown[ai-label][type='inline']:not([invalid]):not([warn]))
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline
+  .#{$prefix}--list-box__field {
+  padding-inline-end: $spacing-10;
+}
+
+:host(#{$prefix}-dropdown[ai-label][type='inline']:not([invalid]))
+  .#{$prefix}--list-box__field {
+  border-block-end: 1px solid $ai-border-strong;
+}
+
+:host(#{$prefix}-dropdown[ai-label][type='inline'][warn]),
+:host(#{$prefix}-dropdown[ai-label][type='inline'][invalid]) {
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__field {
+    padding-inline-end: $spacing-12;
+  }
 }
 
-:host(#{$prefix}-dropdown[type='inline'][warn]) .#{$prefix}--list-box__field {
-  padding-inline: $spacing-05 calc(#{$spacing-08} + #{$spacing-05});
+:host(#{$prefix}-dropdown[type='inline']) .#{$prefix}--list-box__menu-icon {
+  inset-inline-end: $spacing-04;
 }
 
 :host(#{$prefix}-dropdown[warn]),
 :host(#{$prefix}-dropdown[invalid]) {
   .#{$prefix}--form__helper-text {
+    color: $text-primary;
     grid-column: 2;
   }
+
+  .#{$prefix}--list-box__invalid-icon,
+  .#{$prefix}--list-box__invalid-icon--warning {
+    inset-inline-end: convert.to-rem(40px);
+  }
 }
 
 :host(#{$prefix}-dropdown-item) {
@@ -105,30 +168,44 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-dropdown-item:first-child) {
+:host(#{$prefix}-dropdown-item:first-of-type) {
   .#{$prefix}--list-box__menu-item__option {
-    border-block-start-width: 0;
+    border-block-start-color: transparent;
   }
 }
 
-:host(#{$prefix}-dropdown-item:hover) {
+:host(#{$prefix}-dropdown-item:not([disabled]):hover) {
   background-color: $layer-hover;
 }
 
 :host(#{$prefix}-dropdown-item[highlighted]) {
   @extend .#{$prefix}--list-box__menu-item--highlighted;
 }
 
+:host(#{$prefix}-dropdown-item[data-prev-highlighted])
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start-color: transparent;
+}
+
 :host(#{$prefix}-dropdown-item[disabled])
   .#{$prefix}--list-box__menu-item__option {
   color: $text-disabled;
   cursor: not-allowed;
   text-decoration: none;
 }
 
+:host(#{$prefix}-dropdown-item[disabled][data-prev-highlighted]:hover)
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start-color: $border-subtle;
+}
+
+:host(#{$prefix}-dropdown-item[disabled]:hover)
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start-color: $border-subtle-01;
+}
+
 :host(#{$prefix}-dropdown-item[selected]) {
   @extend .#{$prefix}--list-box__menu-item--active;
-  @extend .#{$prefix}--list-box__menu-item--highlighted;
 
   .#{$prefix}--list-box__menu-item__option {
     color: $text-primary;
@@ -139,6 +216,10 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-dropdown-item[selected][highlighted]) {
+  @extend .#{$prefix}--list-box__menu-item--highlighted;
+}
+
 :host(#{$prefix}-dropdown-item[size='sm']) {
   block-size: $spacing-07;
 
@@ -156,6 +237,8 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-dropdown-skeleton) {
+  @extend .#{$prefix}--form-item;
+
   .#{$prefix}--skeleton {
     @include skeleton;
   }
@@ -171,10 +254,32 @@ $css--plex: true !default;
     inset-inline-end: $spacing-08;
   }
 
+  ::slotted(#{$prefix}-ai-label) {
+    display: inline-flex;
+    align-items: center;
+    margin-inline-end: convert.to-rem(9px);
+  }
+
+  ::slotted(#{$prefix}-ai-label)::after {
+    position: absolute;
+    display: block;
+    background-color: $border-subtle-01;
+    block-size: convert.to-rem(16px);
+    content: '';
+    inline-size: convert.to-rem(1px);
+    inset-block-start: convert.to-rem(1px);
+    inset-inline-end: convert.to-rem(-9px);
+  }
+
   ::slotted(#{$prefix}-ai-label:not([revert-active])),
   ::slotted(#{$prefix}-slug:not([revert-active])) {
     transform: translateY(-50%);
   }
+
+  .#{$prefix}--list-box__invalid-icon,
+  .#{$prefix}--list-box__invalid-icon--warning {
+    inset-inline-end: convert.to-rem(81px);
+  }
 }
 
 :host(#{$prefix}-dropdown[ai-label][warn]),
@@ -185,8 +290,19 @@ $css--plex: true !default;
     }
   }
 
+  ::slotted(#{$prefix}-ai-label)::before {
+    position: absolute;
+    display: block;
+    background-color: $border-subtle-01;
+    block-size: convert.to-rem(16px);
+    content: '';
+    inline-size: convert.to-rem(1px);
+    inset-block-start: convert.to-rem(1px);
+    inset-inline-start: convert.to-rem(-9px);
+  }
+
   ::slotted(#{$prefix}-ai-label),
   ::slotted(#{$prefix}-slug) {
-    inset-inline-end: $spacing-10;
+    inset-inline-end: $spacing-08;
   }
 }