feat(multiselect): allow disabled listbox items (#9859)

* feat(multiselect): allow disabled listbox items

* fix(listbox): use disabled-02 instead of disabled-03 for items

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: tay1orjones

packages/carbon-react/src/components/MultiSelect/MultiSelect.stories.js

@@ -20,7 +20,8 @@ const items = [
   },
   {
     id: 'downshift-1-item-2',
-    text: 'Option 3',
+    text: 'Option 3 - a disabled item',
+    disabled: true,
   },
   {
     id: 'downshift-1-item-3',

packages/components/src/components/list-box/_list-box.scss

@@ -658,6 +658,34 @@ $list-box-menu-width: rem(300px);
     color: $disabled-02;
   }
 
+  .#{$prefix}--list-box__menu-item[disabled],
+  .#{$prefix}--list-box__menu-item[disabled] *,
+  .#{$prefix}--list-box__menu-item[disabled]:hover {
+    color: $disabled-02;
+    cursor: not-allowed;
+    outline: none;
+  }
+
+  .#{$prefix}--list-box__menu-item[disabled]:hover {
+    background-color: revert;
+  }
+
+  .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--checkbox-label::before {
+    border-color: $disabled-02;
+  }
+
+  .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $ui-03;
+  }
+
+  .#{$prefix}--list-box__menu-item[disabled]:hover
+    + .#{$prefix}--list-box__menu-item
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $ui-03;
+  }
+
   .#{$prefix}--list-box.#{$prefix}--list-box--inline
     .#{$prefix}--list-box__menu-item__option {
     margin: 0 $carbon--spacing-03;

packages/react/src/components/MultiSelect/MultiSelect-story.js

@@ -32,7 +32,8 @@ const items = [
   },
   {
     id: 'downshift-1-item-2',
-    text: 'Option 3',
+    text: 'Option 3 - a disabled item',
+    disabled: true,
   },
   {
     id: 'downshift-1-item-3',

packages/react/src/components/MultiSelect/MultiSelect.js

@@ -282,6 +282,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
                 // we don't want Downshift to set aria-selected for us
                 // we also don't want to set 'false' for reader verbosity's sake
                 ['aria-selected']: isChecked ? true : null,
+                disabled: item?.disabled,
               });
               const itemText = itemToString(item);
               const isChecked =

packages/styles/scss/components/list-box/_list-box.scss

@@ -668,6 +668,34 @@ $list-box-menu-width: rem(300px);
     color: $text-disabled;
   }
 
+  .#{$prefix}--list-box__menu-item[disabled],
+  .#{$prefix}--list-box__menu-item[disabled] *,
+  .#{$prefix}--list-box__menu-item[disabled]:hover {
+    color: $text-disabled;
+    cursor: not-allowed;
+    outline: none;
+  }
+
+  .#{$prefix}--list-box__menu-item[disabled]:hover {
+    background-color: revert;
+  }
+
+  .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--checkbox-label::before {
+    border-color: $text-disabled;
+  }
+
+  .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $border-subtle;
+  }
+
+  .#{$prefix}--list-box__menu-item[disabled]:hover
+    + .#{$prefix}--list-box__menu-item
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $border-subtle;
+  }
+
   .#{$prefix}--list-box.#{$prefix}--list-box--inline
     .#{$prefix}--list-box__menu-item__option {
     margin: 0 $spacing-03;