Dropdown Expandable - QA review fixing disabled states (#1147)

cengage · Oct 19, 2023 · 68276ab · 68276ab · github-actions · Oct 19, 2023
1 parent 6960285
commit 68276ab
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 5 deletions.
diff --git 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
@@ -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
@@ -467,7 +467,7 @@ export const ExpandableItemsWithIcons = args => {
               DropdownExpandableMenuButton component
             </DropdownExpandableMenuButton>
             <DropdownExpandableMenuPanel>
-              <DropdownExpandableMenuListItem>
+              <DropdownExpandableMenuListItem disabled>
                 Fresh
               </DropdownExpandableMenuListItem>
               <DropdownExpandableMenuListItem>

diff --git 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(
+          <Dropdown>
+            <DropdownButton>Expandable Items Dropdown</DropdownButton>
+            <DropdownContent>
+              <DropdownExpandableMenuGroup>
+                <DropdownExpandableMenuItem>
+                  <DropdownExpandableMenuButton>
+                    Pasta
+                  </DropdownExpandableMenuButton>
+                  <DropdownExpandableMenuPanel>
+                    <DropdownExpandableMenuListItem disabled>
+                      Fresh
+                    </DropdownExpandableMenuListItem>
+                    <DropdownExpandableMenuListItem>
+                      Processed
+                    </DropdownExpandableMenuListItem>
+                  </DropdownExpandableMenuPanel>
+                </DropdownExpandableMenuItem>
+              </DropdownExpandableMenuGroup>
+            </DropdownContent>
+          </Dropdown>
+        );
+        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(
           <Dropdown>

diff --git 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<IconProps>;
+  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
@@ -8,7 +8,8 @@ import { DropdownMenuItem, DropdownMenuItemProps } from './DropdownMenuItem';
 import { DropdownExpandableMenuItemContext } from './DropdownExpandableMenuItem';
 
 export interface DropdownExpandableMenuListItemProps
-  extends Omit<DropdownMenuItemProps, 'icon' | 'disabled'> {
+  extends Omit<DropdownMenuItemProps, 'icon'> {
+  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<HTMLDivElement>();
   const theme = React.useContext(ThemeContext);
@@ -54,6 +55,7 @@ export const DropdownExpandableMenuListItem = React.forwardRef<
   return (
     <StyledDropdownMenuItem
       {...other}
+      disabled={disabled}
       expandableMenuButtonHasIcon={menuGroupContext.expandableMenuButtonHasIcon}
       isExpandablePanel={menuGroupContext.isExpandablePanel}
       ref={expandableMenuItemContext.disabled ? null : ref}