diff --git a/.changeset/fix-expandableDropdown.md b/.changeset/fix-expandableDropdown.md index 995c7f901..c0a4a1169 100644 --- a/.changeset/fix-expandableDropdown.md +++ b/.changeset/fix-expandableDropdown.md @@ -2,4 +2,4 @@ 'react-magma-dom': patch --- -fix(Dropdown): Fixes from QA review of the Dropdown Expandable sub component. +fix(Dropdown): Fixes from QA review of the Dropdown Expandable sub component disabled states. diff --git a/.changeset/fix-expandableDropdownDisabled.md b/.changeset/fix-expandableDropdownDisabled.md new file mode 100644 index 000000000..11bf748e3 --- /dev/null +++ b/.changeset/fix-expandableDropdownDisabled.md @@ -0,0 +1,5 @@ +--- +'react-magma-dom': patch +--- + +feat(DropdownExpandableMenu): A new menu item display for the Dropdown component which enables expandable lists by one level. diff --git a/packages/react-magma-dom/src/components/Dropdown/Dropdown.stories.tsx b/packages/react-magma-dom/src/components/Dropdown/Dropdown.stories.tsx index e79fb978c..facc7425a 100644 --- a/packages/react-magma-dom/src/components/Dropdown/Dropdown.stories.tsx +++ b/packages/react-magma-dom/src/components/Dropdown/Dropdown.stories.tsx @@ -467,7 +467,7 @@ export const ExpandableItemsWithIcons = args => { DropdownExpandableMenuButton component - + Fresh diff --git a/packages/react-magma-dom/src/components/Dropdown/Dropdown.test.js b/packages/react-magma-dom/src/components/Dropdown/Dropdown.test.js index 1ae4a3048..46b8efdc5 100644 --- a/packages/react-magma-dom/src/components/Dropdown/Dropdown.test.js +++ b/packages/react-magma-dom/src/components/Dropdown/Dropdown.test.js @@ -1170,6 +1170,38 @@ describe('Dropdown', () => { ); }); + it(`DropdownExpandableMenuListItem should support disabled`, () => { + const { getByText } = render( + + Expandable Items Dropdown + + + + + Pasta + + + + Fresh + + + Processed + + + + + + + ); + fireEvent.click(getByText('Pasta')); + + expect(getByText('Fresh')).toHaveStyleRule('cursor', 'not-allowed'); + expect(getByText('Fresh')).toHaveStyleRule( + 'color', + transparentize(0.4, magma.colors.neutral500) + ); + }); + it(`DropdownExpandableMenuPanel items should have additional padding if DropdownExpandableMenuButton has an icon and a text only menu item`, () => { const { getByTestId, getByText } = render( diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuButton.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuButton.tsx index b22a7b481..470fabe8f 100644 --- a/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuButton.tsx +++ b/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuButton.tsx @@ -18,6 +18,7 @@ export interface DropdownExpandableMenuButtonProps const StyledAccordionButton = styled(AccordionButton)<{ expandableMenuButtonHasIcon?: boolean; icon?: React.ReactElement; + isMenuItemContextDisabled?: boolean; }>` font-weight: 400; overflow-wrap: anywhere; @@ -32,7 +33,8 @@ const StyledAccordionButton = styled(AccordionButton)<{ } &:hover, &:focus { - background: ${menuBackground}; + background: ${props => + props.isMenuItemContextDisabled ? '' : menuBackground}; } > span { display: flex; @@ -86,6 +88,7 @@ export const DropdownExpandableMenuButton = React.forwardRef< expandableMenuGroupContext.expandableMenuButtonHasIcon } isInverse={context.isInverse} + isMenuItemContextDisabled={expandableMenuItemContext.disabled} testId={testId} > {icon && ( diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuListItem.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuListItem.tsx index 29314d640..36ab8ecfd 100644 --- a/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuListItem.tsx +++ b/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuListItem.tsx @@ -8,7 +8,8 @@ import { DropdownMenuItem, DropdownMenuItemProps } from './DropdownMenuItem'; import { DropdownExpandableMenuItemContext } from './DropdownExpandableMenuItem'; export interface DropdownExpandableMenuListItemProps - extends Omit { + extends Omit { + disabled?: boolean; testId?: string; } @@ -32,7 +33,7 @@ export const DropdownExpandableMenuListItem = React.forwardRef< HTMLDivElement, DropdownExpandableMenuListItemProps >((props, forwardedRef) => { - const { children, ...other } = props; + const { children, disabled, ...other } = props; const ownRef = React.useRef(); const theme = React.useContext(ThemeContext); @@ -54,6 +55,7 @@ export const DropdownExpandableMenuListItem = React.forwardRef< return (