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>
carbon-design-system · Oct 20, 2021 · 84de2dc · 84de2dc
1 parent 3f7fbdf
commit 84de2dc
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 2 deletions.
diff --git a/packages/carbon-react/src/components/MultiSelect/MultiSelect.stories.js b/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',

diff --git a/packages/components/src/components/list-box/_list-box.scss b/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;

diff --git a/packages/react/src/components/MultiSelect/MultiSelect-story.js b/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',

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/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 =

diff --git a/packages/styles/scss/components/list-box/_list-box.scss b/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;