QA review tweaks from Laura and Orion

cengage · Oct 18, 2023 · a825586 · a825586
1 parent c032206
commit a825586
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 12 deletions.
diff --git a/packages/react-magma-dom/src/components/Dropdown/Dropdown.stories.tsx b/packages/react-magma-dom/src/components/Dropdown/Dropdown.stories.tsx
@@ -501,7 +501,7 @@ export const ExpandableItemsWithIconsAndConsoleWarning = args => {
     <Dropdown {...args} width={220}>
       <DropdownButton>Expandable Items Dropdown</DropdownButton>
       <DropdownContent>
-        <DropdownExpandableMenuGroup>
+        <DropdownExpandableMenuGroup isMulti={false} defaultIndex={1}>
           <DropdownExpandableMenuItem>
             <DropdownExpandableMenuButton>Pasta</DropdownExpandableMenuButton>
             <DropdownExpandableMenuPanel>

diff --git a/packages/react-magma-dom/src/components/Dropdown/Dropdown.test.js b/packages/react-magma-dom/src/components/Dropdown/Dropdown.test.js
@@ -969,7 +969,7 @@ describe('Dropdown', () => {
                 <DropdownExpandableMenuButton>
                   Pasta
                 </DropdownExpandableMenuButton>
-                <DropdownExpandableMenuPanel testId={expandablePanelId}>
+                <DropdownExpandableMenuPanel testId="pancakes">
                   <DropdownExpandableMenuListItem>
                     Fresh
                   </DropdownExpandableMenuListItem>
@@ -999,7 +999,7 @@ describe('Dropdown', () => {
 
       fireEvent.click(getByText('Expandable Items Dropdown'));
 
-      expect(getByTestId(expandablePanelId)).toBeInTheDocument();
+      expect(getByTestId('pancakes')).toBeInTheDocument();
 
       expect(queryByTestId(expandablePanelTwoId)).not.toBeInTheDocument();
     });

diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuButton.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuButton.tsx
@@ -10,13 +10,15 @@ import { useForkedRef } from '../../utils';
 
 export interface DropdownExpandableMenuButtonProps
   extends AccordionButtonProps {
+  /**
+   * @internal
+   */
   disabled?: boolean;
   icon?: React.ReactElement<IconProps>;
   testId?: string;
 }
 
 const StyledAccordionButton = styled(AccordionButton)<{
-  disabled?: boolean;
   expandableMenuButtonHasIcon?: boolean;
   icon?: React.ReactElement<IconProps>;
 }>`
@@ -28,6 +30,9 @@ const StyledAccordionButton = styled(AccordionButton)<{
       : `${props.theme.spaceScale.spacing03} ${props.theme.spaceScale.spacing05}`};
   margin: 0;
   border-top: 0;
+  &:focus {
+    outline-offset: -2px;
+  }
   &:hover,
   &:focus {
     background: ${menuBackground};
@@ -72,7 +77,6 @@ export const DropdownExpandableMenuButton = React.forwardRef<
   return (
     <StyledAccordionButton
       {...other}
-      disabled={disabled}
       ref={ref}
       customOnKeyDown={handleCustomOnKeyDown}
       icon={icon}

diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuGroup.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuGroup.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import styled from '../../theme/styled';
-import { Accordion, AccordionProps } from '../Accordion';
+import { Accordion, AccordionIconPosition, AccordionProps } from '../Accordion';
 import { DropdownContext } from './Dropdown';
 
 const StyledAccordion = styled(Accordion)`
   border: none;
+  padding: 0;
 `;
 
 export interface DropdownExpandableMenuGroupContextInterface {
@@ -48,6 +49,7 @@ export const DropdownExpandableMenuGroup = React.forwardRef<
     >
       <StyledAccordion
         {...other}
+        iconPosition={AccordionIconPosition.right}
         isInverse={context.isInverse}
         ref={ref}
         role="group"

diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuItem.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuItem.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { IconProps } from 'react-magma-icons';
 import { AccordionItem, AccordionItemProps } from '../Accordion';
 import {
   DropdownExpandableMenuButton,
@@ -11,10 +10,6 @@ export interface DropdownExpandableMenuItemProps extends AccordionItemProps {
    * @default false
    */
   disabled?: boolean;
-  /**
-   * Leading icon for the menu item
-   */
-  icon?: React.ReactElement<IconProps>;
   /**
    * @internal
    */

diff --git a/website/react-magma-docs/src/pages/api/dropdown.mdx b/website/react-magma-docs/src/pages/api/dropdown.mdx
@@ -427,7 +427,75 @@ export function Example() {
 }
 ```
 
-### Text only Expandable Menu Item
+## Expandable Menu Items Default Index
+
+The `defaultIndex` prop uses an array of zero based indices to enable an expandable group to be automatically opened.
+
+If the `isMulti` prop is set to `false`, the `defaultIndex` prop will take a single number, instead of an array.
+
+```tsx
+import React from 'react';
+import {
+  Dropdown,
+  DropdownButton,
+  DropdownContent,
+  DropdownExpandableMenuGroup,
+  DropdownExpandableMenuItem,
+  DropdownExpandableMenuButton,
+  DropdownExpandableMenuPanel,
+  DropdownExpandableMenuListItem,
+} from 'react-magma-dom';
+
+import {
+  RestaurantMenuIcon,
+  LunchDiningIcon,
+  LocalPizzaIcon,
+} from 'react-magma-icons';
+
+export function Example() {
+  return (
+    <Dropdown width={240}>
+      <DropdownButton>Expandable Items Dropdown</DropdownButton>
+      <DropdownContent>
+        <DropdownExpandableMenuGroup defaultIndex={[0]}>
+          <DropdownExpandableMenuItem>
+            <DropdownExpandableMenuButton icon={<RestaurantMenuIcon />}>
+              Pasta
+            </DropdownExpandableMenuButton>
+            <DropdownExpandableMenuPanel>
+              <DropdownExpandableMenuListItem>
+                Fresh
+              </DropdownExpandableMenuListItem>
+              <DropdownExpandableMenuListItem>
+                Processed
+              </DropdownExpandableMenuListItem>
+            </DropdownExpandableMenuPanel>
+          </DropdownExpandableMenuItem>
+          <DropdownExpandableMenuItem>
+            <DropdownExpandableMenuButton icon={<LunchDiningIcon />}>
+              Prosciutto
+            </DropdownExpandableMenuButton>
+            <DropdownExpandableMenuPanel>
+              <DropdownExpandableMenuListItem>
+                Domestic
+              </DropdownExpandableMenuListItem>
+              <DropdownExpandableMenuListItem>
+                Speck
+              </DropdownExpandableMenuListItem>
+            </DropdownExpandableMenuPanel>
+          </DropdownExpandableMenuItem>
+        </DropdownExpandableMenuGroup>
+        <DropdownDivider />
+        <DropdownExpandableMenuListItem icon={<LocalPizzaIcon />}>
+          Pizza
+        </DropdownExpandableMenuListItem>
+      </DropdownContent>
+    </Dropdown>
+  );
+}
+```
+
+## Text only Expandable Menu Item
 
 ```tsx
 import React from 'react';