From 7a1e883638923a310ec23a5e7b5bd07a76515fa3 Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Fri, 22 Oct 2021 11:20:06 -0500 Subject: [PATCH] feat(listbox): support disabled items in combobox, dropdown, filterablemultiselect (#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> --- .../src/components/ComboBox/ComboBox.stories.js | 3 ++- .../src/components/Dropdown/Dropdown.stories.js | 3 ++- packages/components/src/components/list-box/_list-box.scss | 2 ++ packages/react/src/components/ComboBox/ComboBox-story.js | 3 ++- packages/react/src/components/ComboBox/ComboBox.js | 1 + packages/react/src/components/Dropdown/Dropdown-story.js | 3 ++- packages/react/src/components/Dropdown/Dropdown.js | 6 +++++- .../src/components/MultiSelect/FilterableMultiSelect.js | 5 ++++- packages/react/src/components/MultiSelect/MultiSelect.js | 2 +- packages/styles/scss/components/list-box/_list-box.scss | 2 ++ 10 files changed, 23 insertions(+), 7 deletions(-) diff --git a/packages/carbon-react/src/components/ComboBox/ComboBox.stories.js b/packages/carbon-react/src/components/ComboBox/ComboBox.stories.js index 5203768c6986..c33250881192 100644 --- 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 index 92ae3ab55f0d..1ba8f50ad75e 100644 --- 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 index 61b22c191879..39ea1ba4721e 100644 --- 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 index e82284bf4662..ec1407b8e8fe 100644 --- 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 index 25f6cb54b514..afe6941fa401 100644 --- 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 ( {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 index 8e5b11491691..7c49a9bca0c8 100644 --- 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 index 4524192e85e4..c9f0e96d6cd7 100644 --- 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 index c3e863d32326..b39e6089b3dd 100644 --- 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;