feat(listbox): support disabled items in combobox, dropdown, filterab…

…lemultiselect (#9913) * feat(multiselect): allow disabled listbox items * fix(listbox): use disabled-02 instead of disabled-03 for items * feat(listbox): support disabled items in combobox, dropdown, filterablemultiselect * chore: add disabled items to carbon-react storybook * chore: update carbon-react storybook stories * chore: remove uneeded optional chaining Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Oct 22, 2021 · 7a1e883 · 7a1e883
1 parent f012e36
commit 7a1e883
Show file tree

Hide file tree

Showing 10 changed files with 23 additions and 7 deletions.
diff --git a/packages/carbon-react/src/components/ComboBox/ComboBox.stories.js b/packages/carbon-react/src/components/ComboBox/ComboBox.stories.js
@@ -25,7 +25,8 @@ const items = [
   },
   {
     id: 'option-3',
-    text: 'Option 3',
+    text: 'Option 3 - a disabled item',
+    disabled: true,
   },
   {
     id: 'option-4',

diff --git a/packages/carbon-react/src/components/Dropdown/Dropdown.stories.js b/packages/carbon-react/src/components/Dropdown/Dropdown.stories.js
@@ -24,7 +24,8 @@ const items = [
   },
   {
     id: 'option-3',
-    text: 'Option 3',
+    text: 'Option 3 - a disabled item',
+    disabled: true,
   },
   {
     id: 'option-4',

diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss
@@ -660,6 +660,8 @@ $list-box-menu-width: rem(300px);
 
   .#{$prefix}--list-box__menu-item[disabled],
   .#{$prefix}--list-box__menu-item[disabled] *,
+  .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--list-box__menu-item__option,
   .#{$prefix}--list-box__menu-item[disabled]:hover {
     color: $disabled-02;
     cursor: not-allowed;

diff --git a/packages/react/src/components/ComboBox/ComboBox-story.js b/packages/react/src/components/ComboBox/ComboBox-story.js
@@ -27,7 +27,8 @@ const items = [
   },
   {
     id: 'option-3',
-    text: 'Option 3',
+    text: 'Option 3 - a disabled item',
+    disabled: true,
   },
   {
     id: 'option-4',

diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
@@ -357,6 +357,7 @@ const ComboBox = React.forwardRef((props, ref) => {
                           ['aria-current']: selectedItem === item ? true : null,
                           ['aria-selected']:
                             highlightedIndex === index ? true : null,
+                          disabled: item.disabled,
                         });
                         return (
                           <ListBox.MenuItem

diff --git a/packages/react/src/components/Dropdown/Dropdown-story.js b/packages/react/src/components/Dropdown/Dropdown-story.js
@@ -33,7 +33,8 @@ const items = [
   },
   {
     id: 'option-3',
-    text: 'Option 3',
+    text: 'Option 3 - a disabled item',
+    disabled: true,
   },
   {
     id: 'option-4',

diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
@@ -181,7 +181,11 @@ const Dropdown = React.forwardRef(function Dropdown(
         <ListBox.Menu {...getMenuProps()}>
           {isOpen &&
             items.map((item, index) => {
-              const itemProps = getItemProps({ item, index });
+              const itemProps = getItemProps({
+                item,
+                index,
+                disabled: item.disabled,
+              });
               const title = itemToElement ? item.text : itemToString(item);
               const { offsetWidth, scrollWidth } =
                 menuItemOptionRefs?.current[index]?.current || {};

diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
@@ -569,7 +569,10 @@ export default class FilterableMultiSelect extends React.Component {
                             locale,
                           }
                         ).map((item, index) => {
-                          const itemProps = getItemProps({ item });
+                          const itemProps = getItemProps({
+                            item,
+                            disabled: item.disabled,
+                          });
                           const itemText = itemToString(item);
                           const isChecked =
                             selectedItem.filter((selected) =>

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -282,7 +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,
+                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
@@ -670,6 +670,8 @@ $list-box-menu-width: rem(300px);
 
   .#{$prefix}--list-box__menu-item[disabled],
   .#{$prefix}--list-box__menu-item[disabled] *,
+  .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--list-box__menu-item__option,
   .#{$prefix}--list-box__menu-item[disabled]:hover {
     color: $text-disabled;
     cursor: not-allowed;