fixing keyboard navigation, added a prop to Accordion to accommodate,…

… amendments per Laura's review, still working on tests
cengage · Sep 21, 2023 · 41a7ba7 · 41a7ba7
1 parent 4a2ddd4
commit 41a7ba7
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 36 deletions.
diff --git a/packages/react-magma-dom/src/components/Accordion/AccordionButton.tsx b/packages/react-magma-dom/src/components/Accordion/AccordionButton.tsx
@@ -23,10 +23,12 @@ export interface AccordionButtonProps
   /**
    * @internal
    */
+  hasCustomArray?: boolean;
   theme?: ThemeInterface;
 }
 
 const StyledButton = styled.button<{
+  hasCustomArray?: boolean;
   isInverse?: boolean;
   isExpanded?: boolean;
 }>`
@@ -90,7 +92,13 @@ export const AccordionButton = React.forwardRef<
   HTMLButtonElement,
   AccordionButtonProps
 >((props, forwardedRef) => {
-  const { children, testId, isInverse: isInverseProp, ...rest } = props;
+  const {
+    children,
+    testId,
+    hasCustomArray,
+    isInverse: isInverseProp,
+    ...rest
+  } = props;
   const theme = React.useContext(ThemeContext);
   const isInverse = useIsInverse(isInverseProp);
 
@@ -122,11 +130,12 @@ export const AccordionButton = React.forwardRef<
       aria-expanded={Boolean(isExpanded)}
       data-testid={testId}
       disabled={isDisabled}
+      hasCustomArray={hasCustomArray}
       id={buttonId}
       isExpanded={isExpanded}
       isInverse={isInverse}
       onClick={handleClick}
-      onKeyDown={handleKeyDown}
+      onKeyDown={hasCustomArray ? null : handleKeyDown}
       ref={ref}
       theme={theme}
     >

diff --git a/packages/react-magma-dom/src/components/Dropdown/Dropdown.stories.tsx b/packages/react-magma-dom/src/components/Dropdown/Dropdown.stories.tsx
@@ -448,7 +448,7 @@ export const ExpandableItems = args => {
 
 export const ExpandableItemsWithIcons = args => {
   return (
-    <Dropdown {...args}>
+    <Dropdown {...args} width={120}>
       <DropdownButton>Expandable Items Dropdown</DropdownButton>
       <DropdownContent>
         <DropdownExpandableMenuGroup isMulti={false} defaultIndex={0}>

diff --git a/packages/react-magma-dom/src/components/Dropdown/Dropdown.tsx b/packages/react-magma-dom/src/components/Dropdown/Dropdown.tsx
@@ -174,6 +174,7 @@ export const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
 
     function handleKeyDown(event: React.KeyboardEvent) {
       if (event.key === 'Escape') {
+        event.nativeEvent.stopImmediatePropagation();
         closeDropdown(event);
       }
 

diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownContent.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownContent.tsx
@@ -117,7 +117,7 @@ export const DropdownContent = React.forwardRef<
 
   let hasItemChildren = false;
 
-  // Default styling for Expandable Menus to override the max-height used for regular dropdowns
+  // For Expandable Dropdowns that don't require a max-height
   let hasExpandableItems = false;
 
   React.Children.forEach(children, (child: any) => {
@@ -144,7 +144,9 @@ export const DropdownContent = React.forwardRef<
       maxHeight={context.maxHeight}
       ref={ref}
       style={
-        hasExpandableItems ? { maxHeight: 'inherit', overflow: 'hidden' } : null
+        hasExpandableItems
+          ? { maxHeight: 'inherit', overflow: 'hidden' }
+          : props.style
       }
       tabIndex={-1}
       testId={testId || 'dropdownContent'}

diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuButton.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuButton.tsx
@@ -5,7 +5,7 @@ import { IconWrapper, menuBackground } from './DropdownMenuItem';
 import { IconProps } from 'react-magma-icons';
 import { ThemeContext } from '../../theme/ThemeContext';
 import { DropdownContext } from './Dropdown';
-import { DropdownExpandableContext } from './DropdownExpandableMenuGroup';
+import { DropdownExpandableMenuGroupContext } from './DropdownExpandableMenuGroup';
 import { useForkedRef } from '../../utils';
 
 export interface DropdownExpandableMenuButtonProps
@@ -15,12 +15,13 @@ export interface DropdownExpandableMenuButtonProps
 }
 
 const StyledAccordionButton = styled(AccordionButton)<{
-  hasIcon?: boolean;
+  hasCustomArray?: boolean;
+  expandableMenuButtonHasIcon?: boolean;
   icon?: React.ReactElement<IconProps>;
 }>`
   font-weight: 400;
   padding: ${props =>
-    !props.icon && props.hasIcon
+    !props.icon && props.expandableMenuButtonHasIcon
       ? `${props.theme.spaceScale.spacing03} ${props.theme.spaceScale.spacing05} ${props.theme.spaceScale.spacing03} ${props.theme.spaceScale.spacing11}`
       : `${props.theme.spaceScale.spacing03} ${props.theme.spaceScale.spacing05}`};
   margin: 0;
@@ -36,18 +37,19 @@ const StyledAccordionButton = styled(AccordionButton)<{
 
 const StyledIconWrapper = styled(IconWrapper)`
   justify-content: center;
-  /* align-items: center; */
 `;
 
 export const DropdownExpandableMenuButton = React.forwardRef<
   HTMLDivElement,
   DropdownExpandableMenuButtonProps
 >((props, forwardedRef) => {
-  const { children, icon, testId, ...other } = props;
+  const { children, hasCustomArray, icon, testId, ...other } = props;
 
   const theme = React.useContext(ThemeContext);
   const context = React.useContext(DropdownContext);
-  const expandableContext = React.useContext(DropdownExpandableContext);
+  const expandableContext = React.useContext(
+    DropdownExpandableMenuGroupContext
+  );
 
   const ownRef = React.useRef<HTMLDivElement>();
   const ref = useForkedRef(forwardedRef, ownRef);
@@ -60,9 +62,12 @@ export const DropdownExpandableMenuButton = React.forwardRef<
     <StyledAccordionButton
       {...other}
       ref={ref}
-      icon={props.icon}
+      hasCustomArray
+      icon={icon}
       theme={theme}
-      hasIcon={expandableContext.hasIcon}
+      expandableMenuButtonHasIcon={
+        expandableContext.expandableMenuButtonHasIcon
+      }
       isInverse={context.isInverse}
       testId={testId}
     >

diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuGroup.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuGroup.tsx
@@ -3,19 +3,17 @@ import styled from '../../theme/styled';
 import { Accordion, AccordionProps } from '../Accordion';
 import { DropdownContext } from './Dropdown';
 
-const StyledAccordion = styled(Accordion)<{
-  testId?: string;
-}>`
+const StyledAccordion = styled(Accordion)<{}>`
   border: none;
 `;
 
-export interface DropdownExpandableContext {
-  hasIcon?: boolean;
+export interface DropdownExpandableMenuGroupContextInterface {
+  expandableMenuButtonHasIcon?: boolean;
   isExpandablePanel?: boolean;
 }
 
-export const DropdownExpandableContext =
-  React.createContext<DropdownExpandableContext>({});
+export const DropdownExpandableMenuGroupContext =
+  React.createContext<DropdownExpandableMenuGroupContextInterface>({});
 
 export const DropdownExpandableMenuGroup = React.forwardRef<
   HTMLDivElement,
@@ -25,15 +23,15 @@ export const DropdownExpandableMenuGroup = React.forwardRef<
 
   const context = React.useContext(DropdownContext);
 
-  let hasIcon = false;
+  let expandableMenuButtonHasIcon = false;
   let isExpandablePanel = false;
 
   React.Children.forEach(children, (child: any) => {
     if (child.type?.displayName === 'DropdownExpandableMenuItem') {
       React.Children.forEach(child.props.children, (c: any) => {
         if (c.type?.displayName === 'DropdownExpandableMenuButton') {
           if (c.props.icon) {
-            hasIcon = true;
+            expandableMenuButtonHasIcon = true;
             return;
           }
         }
@@ -45,16 +43,18 @@ export const DropdownExpandableMenuGroup = React.forwardRef<
   });
 
   return (
-    <DropdownExpandableContext.Provider value={{ hasIcon, isExpandablePanel }}>
+    <DropdownExpandableMenuGroupContext.Provider
+      value={{ expandableMenuButtonHasIcon, isExpandablePanel }}
+    >
       <StyledAccordion
         {...other}
         isInverse={context.isInverse}
-        role="expandable group"
+        role="group"
         testId={testId}
       >
         {children}
       </StyledAccordion>
-    </DropdownExpandableContext.Provider>
+    </DropdownExpandableMenuGroupContext.Provider>
   );
 });
 

diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuItem.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuItem.tsx
@@ -21,11 +21,11 @@ export interface DropdownExpandableMenuItemProps extends AccordionItemProps {
 export const DropdownExpandableMenuItem = React.forwardRef<
   HTMLDivElement,
   DropdownExpandableMenuItemProps
->(props => {
+>((props, ref) => {
   const { children, disabled, testId, ...other } = props;
 
   return (
-    <AccordionItem isDisabled={disabled} {...other} testId={testId}>
+    <AccordionItem {...other} isDisabled={disabled} ref={ref} testId={testId}>
       {children}
     </AccordionItem>
   );

diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuPanel.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuPanel.tsx
@@ -12,7 +12,7 @@ const StyledAccordionPanel = styled(AccordionPanel)`
 export const DropdownExpandableMenuPanel = React.forwardRef<
   HTMLDivElement,
   DropdownExpandableMenuPanelProps
->(props => {
+>((props, ref) => {
   const { children, testId, ...other } = props;
 
   React.Children.map(children, child => {
@@ -22,15 +22,15 @@ export const DropdownExpandableMenuPanel = React.forwardRef<
       console.warn(
         `
       --------------------------------------------------------------------------------------------------------
-      Only one group level is supported, anything nested two levels or more isn't accounted for in the styling
+      React Magma Warning: Only one group level is supported for Expandable Dropdowns, anything nested two levels or more isn't accounted for in the styling
       --------------------------------------------------------------------------------------------------------
       `
       );
     }
   });
 
   return (
-    <StyledAccordionPanel testId={testId} {...other}>
+    <StyledAccordionPanel testId={testId} {...other} ref={ref}>
       {children}
     </StyledAccordionPanel>
   );

diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownMenuItem.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownMenuItem.tsx
@@ -7,7 +7,7 @@ import { DropdownContext } from './Dropdown';
 import { IconProps, CheckIcon } from 'react-magma-icons';
 import { transparentize } from 'polished';
 import { Omit, useForkedRef } from '../../utils';
-import { DropdownExpandableContext } from './DropdownExpandableMenuGroup';
+import { DropdownExpandableMenuGroupContext } from './DropdownExpandableMenuGroup';
 
 export interface DropdownMenuItemProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {
@@ -63,7 +63,7 @@ export function menuBackground(props) {
 
 function menuItemPadding(props) {
   //For DropdownExpandableMenu styling with an icon
-  if (props.hasIcon && props.isExpandablePanel) {
+  if (props.expandableMenuButtonHasIcon && props.isExpandablePanel) {
     return `${props.theme.spaceScale.spacing03} ${props.theme.spaceScale.spacing05} ${props.theme.spaceScale.spacing03} 72px`;
   }
   //For DropdownExpandableMenu styling without an icon
@@ -111,7 +111,7 @@ export const MenuItemStyles = props => {
 const StyledItem = styled.div<{
   as?: string;
   disabled?: boolean;
-  hasIcon?: boolean;
+  expandableMenuButtonHasIcon?: boolean;
   isExpandablePanel?: boolean;
 
   isFixedWidth?: boolean;
@@ -146,7 +146,7 @@ export const DropdownMenuItem = React.forwardRef<
   const theme = React.useContext(ThemeContext);
   const context = React.useContext(DropdownContext);
 
-  const expandableContext = React.useContext(DropdownExpandableContext);
+  const menuGroupContext = React.useContext(DropdownExpandableMenuGroupContext);
 
   const ref = useForkedRef(forwardedRef, ownRef);
 
@@ -195,8 +195,8 @@ export const DropdownMenuItem = React.forwardRef<
       {...other}
       aria-disabled={disabled}
       disabled={disabled}
-      hasIcon={expandableContext.hasIcon}
-      isExpandablePanel={expandableContext.isExpandablePanel}
+      expandableMenuButtonHasIcon={menuGroupContext.expandableMenuButtonHasIcon}
+      isExpandablePanel={menuGroupContext.isExpandablePanel}
       isFixedWidth={context.isFixedWidth}
       isInactive={isInactive}
       isInverse={context.isInverse}

diff --git a/packages/react-magma-dom/src/index.ts b/packages/react-magma-dom/src/index.ts
@@ -49,6 +49,7 @@ export { Container, ContainerProps } from './components/Container';
 export { Datagrid, DatagridProps } from './components/Datagrid';
 export { DatePicker, DatePickerProps } from './components/DatePicker';
 export {
+  Dropdown,
   DropdownAlignment,
   DropdownDropDirection,
   DropdownProps,