refactor(dropdowns.legacy): use transent props where appropriate

zendeskgarden · Oct 22, 2024 · bf95534 · bf95534
1 parent 0e13b11
commit bf95534
Show file tree

Hide file tree

Showing 23 changed files with 110 additions and 107 deletions.
diff --git a/packages/dropdowns.legacy/src/elements/Menu/Items/AddItem.tsx b/packages/dropdowns.legacy/src/elements/Menu/Items/AddItem.tsx
@@ -20,7 +20,7 @@ const AddItemComponent = React.forwardRef<HTMLLIElement, IItemProps>(
 
     return (
       <StyledAddItem ref={ref} disabled={disabled} {...props}>
-        <StyledItemIcon isCompact={isCompact} isVisible isDisabled={disabled}>
+        <StyledItemIcon $isCompact={isCompact} $isVisible $isDisabled={disabled}>
           <AddSvg />
         </StyledItemIcon>
         {children}

diff --git a/packages/dropdowns.legacy/src/elements/Menu/Items/HeaderItem.tsx b/packages/dropdowns.legacy/src/elements/Menu/Items/HeaderItem.tsx
@@ -13,10 +13,12 @@ import useMenuContext from '../../../utils/useMenuContext';
 /**
  * @extends LiHTMLAttributes<HTMLLIElement>
  */
-export const HeaderItem = React.forwardRef<HTMLLIElement, IHeaderItemProps>((props, ref) => {
-  const { isCompact } = useMenuContext();
+export const HeaderItem = React.forwardRef<HTMLLIElement, IHeaderItemProps>(
+  ({ hasIcon, ...other }, ref) => {
+    const { isCompact } = useMenuContext();
 
-  return <StyledHeaderItem ref={ref} isCompact={isCompact} {...props} />;
-});
+    return <StyledHeaderItem ref={ref} $isCompact={isCompact} $hasIcon={hasIcon} {...other} />;
+  }
+);
 
 HeaderItem.displayName = 'HeaderItem';
diff --git a/packages/dropdowns.legacy/src/elements/Menu/Items/Item.tsx b/packages/dropdowns.legacy/src/elements/Menu/Items/Item.tsx
@@ -20,7 +20,7 @@ import { ItemContext } from '../../../utils/useItemContext';
  */
 export const Item = React.forwardRef<HTMLLIElement, IItemProps>(
   (
-    { value, disabled, isDanger, component = StyledItem, hasIcon, children, ...props },
+    { value, disabled, isDanger, component = StyledItem, hasIcon, children, ...other },
     forwardRef
   ) => {
     const {
@@ -87,12 +87,12 @@ export const Item = React.forwardRef<HTMLLIElement, IItemProps>(
           <Component
             ref={ref}
             disabled={disabled}
-            isDanger={isDanger}
-            isCompact={isCompact}
-            {...props}
+            $isDanger={isDanger}
+            $isCompact={isCompact}
+            {...other}
           >
             {!!isSelected && !hasIcon && (
-              <StyledItemIcon isCompact={isCompact} isVisible={isSelected} isDisabled={disabled}>
+              <StyledItemIcon $isCompact={isCompact} $isVisible={isSelected} $isDisabled={disabled}>
                 <SelectedSvg />
               </StyledItemIcon>
             )}
@@ -110,21 +110,21 @@ export const Item = React.forwardRef<HTMLLIElement, IItemProps>(
         <Component
           data-test-is-focused={isFocused}
           data-test-is-selected={isSelected}
+          $isCompact={isCompact}
+          $isDanger={isDanger}
+          $isFocused={isFocused}
           {...getItemProps({
             item: value,
-            isFocused,
             ref,
-            isCompact,
-            isDanger,
             ...(hasMenuRef.current && {
               role: 'menuitem',
               'aria-selected': null
             }),
-            ...props
+            ...other
           } as any)}
         >
           {!!isSelected && !hasIcon && (
-            <StyledItemIcon isCompact={isCompact} isVisible={isSelected} data-test-id="item-icon">
+            <StyledItemIcon $isCompact={isCompact} $isVisible={isSelected} data-test-id="item-icon">
               <SelectedSvg />
             </StyledItemIcon>
           )}

diff --git a/packages/dropdowns.legacy/src/elements/Menu/Items/ItemMeta.tsx b/packages/dropdowns.legacy/src/elements/Menu/Items/ItemMeta.tsx
@@ -18,7 +18,7 @@ export const ItemMeta = React.forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpa
     const { isCompact } = useMenuContext();
     const { isDisabled } = useItemContext();
 
-    return <StyledItemMeta ref={ref} isCompact={isCompact} isDisabled={isDisabled} {...props} />;
+    return <StyledItemMeta ref={ref} $isCompact={isCompact} $isDisabled={isDisabled} {...props} />;
   }
 );
 

diff --git a/packages/dropdowns.legacy/src/elements/Menu/Items/MediaBody.tsx b/packages/dropdowns.legacy/src/elements/Menu/Items/MediaBody.tsx
@@ -16,7 +16,7 @@ export const MediaBody = React.forwardRef<HTMLDivElement, HTMLAttributes<HTMLDiv
   (props, ref) => {
     const { isCompact } = useMenuContext();
 
-    return <StyledMediaBody ref={ref} isCompact={isCompact} {...props} />;
+    return <StyledMediaBody ref={ref} $isCompact={isCompact} {...props} />;
   }
 );
 

diff --git a/packages/dropdowns.legacy/src/elements/Menu/Items/MediaFigure.tsx b/packages/dropdowns.legacy/src/elements/Menu/Items/MediaFigure.tsx
@@ -15,5 +15,5 @@ import useMenuContext from '../../../utils/useMenuContext';
 export const MediaFigure = (props: HTMLAttributes<Element>) => {
   const { isCompact } = useMenuContext();
 
-  return <StyledMediaFigure isCompact={isCompact} {...props} />;
+  return <StyledMediaFigure $isCompact={isCompact} {...props} />;
 };
diff --git a/packages/dropdowns.legacy/src/elements/Menu/Items/NextItem.tsx b/packages/dropdowns.legacy/src/elements/Menu/Items/NextItem.tsx
@@ -21,8 +21,8 @@ const NextItemComponent = React.forwardRef<HTMLLIElement, IItemProps>(
 
     return (
       <StyledNextItem ref={ref} disabled={disabled} {...props}>
-        <StyledItemIcon isCompact={isCompact} isDisabled={disabled} isVisible>
-          <StyledNextIcon isDisabled={disabled} />
+        <StyledItemIcon $isCompact={isCompact} $isDisabled={disabled} $isVisible>
+          <StyledNextIcon $isDisabled={disabled} />
         </StyledItemIcon>
         {children}
       </StyledNextItem>

diff --git a/packages/dropdowns.legacy/src/elements/Menu/Items/PreviousItem.tsx b/packages/dropdowns.legacy/src/elements/Menu/Items/PreviousItem.tsx
@@ -21,8 +21,8 @@ const PreviousItemComponent = React.forwardRef<HTMLLIElement, IItemProps>(
 
     return (
       <StyledPreviousItem ref={ref} disabled={disabled} {...props}>
-        <StyledItemIcon isCompact={isCompact} isDisabled={disabled} isVisible>
-          <StyledPreviousIcon isDisabled={disabled} />
+        <StyledItemIcon $isCompact={isCompact} $isDisabled={disabled} $isVisible>
+          <StyledPreviousIcon $isDisabled={disabled} />
         </StyledItemIcon>
         {children}
       </StyledPreviousItem>

diff --git a/packages/dropdowns.legacy/src/elements/Menu/Menu.tsx b/packages/dropdowns.legacy/src/elements/Menu/Menu.tsx
@@ -10,7 +10,7 @@ import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { ThemeContext } from 'styled-components';
 import { Popper } from 'react-popper';
-import { IMenuProps, PLACEMENT } from '../../types';
+import { IMenuProps, PLACEMENT, PopperPlacement } from '../../types';
 import { StyledMenu, StyledMenuWrapper } from '../../styled/index';
 import useDropdownContext from '../../utils/useDropdownContext';
 import { getPopperPlacement, getRtlPopperPlacement } from '../../utils/garden-placements';
@@ -23,17 +23,18 @@ import { MenuContext } from '../../utils/useMenuContext';
  */
 export const Menu = forwardRef<HTMLUListElement, IMenuProps>((props, menuRef) => {
   const {
-    placement,
-    popperModifiers,
+    appendToNode,
+    children,
     eventsEnabled,
+    hasArrow,
     isAnimated,
+    isCompact,
     maxHeight,
+    placement,
+    popperModifiers,
     style: menuStyle,
     zIndex,
-    isCompact,
-    children,
-    appendToNode,
-    ...otherProps
+    ...other
   } = props;
   const {
     hasMenuRef,
@@ -114,28 +115,26 @@ export const Menu = forwardRef<HTMLUListElement, IMenuProps>((props, menuRef) =>
 
           const menuProps = getMenuProps({
             role: hasMenuRef.current ? 'menu' : 'listbox',
-            placement: currentPlacement,
-            isAnimated: isAnimated && (isOpen || isVisible),
-            ...otherProps
-          } as any);
+            ...other
+          });
+
+          const sharedProps = {
+            $hasArrow: hasArrow,
+            $isAnimated: isAnimated ? isOpen || isVisible : false,
+            $isCompact: isCompact,
+            $maxHeight: maxHeight,
+            $placement: currentPlacement as PopperPlacement
+          };
 
           const menu = (
             <StyledMenuWrapper
               ref={isOpen ? ref : undefined}
-              hasArrow={menuProps.hasArrow}
-              placement={menuProps.placement}
+              $isHidden={!isOpen}
+              $zIndex={zIndex}
               style={style}
-              isHidden={!isOpen}
-              isAnimated={menuProps.isAnimated}
-              zIndex={zIndex}
+              {...sharedProps}
             >
-              <StyledMenu
-                ref={menuRef}
-                isCompact={isCompact}
-                maxHeight={maxHeight}
-                style={computedStyle}
-                {...menuProps}
-              >
+              <StyledMenu ref={menuRef} style={computedStyle} {...sharedProps} {...menuProps}>
                 {!!(isOpen || isVisible) && children}
               </StyledMenu>
             </StyledMenuWrapper>

diff --git a/packages/dropdowns.legacy/src/elements/Multiselect/Multiselect.tsx b/packages/dropdowns.legacy/src/elements/Multiselect/Multiselect.tsx
@@ -269,8 +269,8 @@ export const Multiselect = React.forwardRef<HTMLDivElement, IMultiselectProps>(
             <StyledMultiselectItemWrapper key="more-anchor">
               <StyledMultiselectMoreAnchor
                 data-test-id="show-more"
-                isCompact={props.isCompact}
-                isDisabled={props.disabled}
+                $isCompact={props.isCompact}
+                $isDisabled={props.disabled}
               >
                 {renderShowMore
                   ? renderShowMore(itemValues.length - x)
@@ -333,7 +333,7 @@ export const Multiselect = React.forwardRef<HTMLDivElement, IMultiselectProps>(
                 {start}
               </StyledFauxInput.StartIcon>
             )}
-            <StyledMultiselectItemsContainer isBare={props.isBare} isCompact={props.isCompact}>
+            <StyledMultiselectItemsContainer $isBare={props.isBare} $isCompact={props.isCompact}>
               {items}
               <StyledMultiselectInput
                 {...(getInputProps({

diff --git a/packages/dropdowns.legacy/src/styled/items/StyledItem.spec.tsx b/packages/dropdowns.legacy/src/styled/items/StyledItem.spec.tsx
@@ -24,7 +24,7 @@ describe('StyledItem', () => {
   });
 
   it('renders danger styling if provided', () => {
-    const { container } = render(<StyledItem isDanger />);
+    const { container } = render(<StyledItem $isDanger />);
 
     expect(container.firstChild).toHaveStyleRule('color', PALETTE.red[700]);
   });

diff --git a/packages/dropdowns.legacy/src/styled/items/StyledItem.ts b/packages/dropdowns.legacy/src/styled/items/StyledItem.ts
@@ -11,23 +11,23 @@ import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'
 const COMPONENT_ID = 'dropdowns.item';
 
 export interface IStyledItemProps {
-  isFocused?: boolean;
-  isCompact?: boolean;
-  isDanger?: boolean;
+  $isFocused?: boolean;
+  $isCompact?: boolean;
+  $isDanger?: boolean;
   disabled?: boolean;
   checked?: boolean;
 }
 
 export const getItemPaddingVertical = (props: IStyledItemProps & ThemeProps<DefaultTheme>) => {
-  if (props.isCompact) {
+  if (props.$isCompact) {
     return `${props.theme.space.base}px`;
   }
 
   return `${props.theme.space.base * 2}px`;
 };
 
 const getColorStyles = (props: IStyledItemProps & ThemeProps<DefaultTheme>) => {
-  const backgroundColor = props.isFocused
+  const backgroundColor = props.$isFocused
     ? getColor({
         theme: props.theme,
         variable: 'background.primaryEmphasis',
@@ -38,7 +38,7 @@ const getColorStyles = (props: IStyledItemProps & ThemeProps<DefaultTheme>) => {
 
   if (props.disabled) {
     foregroundColor = getColor({ theme: props.theme, variable: 'foreground.disabled' });
-  } else if (props.isDanger) {
+  } else if (props.$isDanger) {
     foregroundColor = getColor({ theme: props.theme, variable: 'foreground.danger' });
   } else {
     foregroundColor = getColor({ theme: props.theme, variable: 'foreground.default' });

diff --git a/packages/dropdowns.legacy/src/styled/items/StyledItemIcon.ts b/packages/dropdowns.legacy/src/styled/items/StyledItemIcon.ts
@@ -13,9 +13,9 @@ import { getItemPaddingVertical } from './StyledItem';
 const COMPONENT_ID = 'dropdowns.item_icon';
 
 interface IStyledItemIconProps {
-  isCompact?: boolean;
-  isVisible?: boolean;
-  isDisabled?: boolean;
+  $isCompact?: boolean;
+  $isVisible?: boolean;
+  $isDisabled?: boolean;
 }
 
 const getSizeStyles = (props: IStyledItemIconProps & ThemeProps<DefaultTheme>) => {
@@ -36,9 +36,9 @@ export const StyledItemIcon = styled.div.attrs({
   align-items: center;
   justify-content: center;
   transition: opacity 0.1s ease-in-out;
-  opacity: ${props => (props.isVisible ? '1' : '0')};
+  opacity: ${props => (props.$isVisible ? '1' : '0')};
   color: ${props =>
-    props.isDisabled
+    props.$isDisabled
       ? 'inherit'
       : getColor({ theme: props.theme, variable: 'foreground.primary' })};
 

diff --git a/packages/dropdowns.legacy/src/styled/items/StyledItemMeta.ts b/packages/dropdowns.legacy/src/styled/items/StyledItemMeta.ts
@@ -11,8 +11,8 @@ import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'
 const COMPONENT_ID = 'dropdowns.item_meta';
 
 interface IStyledItemMetaProps {
-  isCompact?: boolean;
-  isDisabled?: boolean;
+  $isCompact?: boolean;
+  $isDisabled?: boolean;
 }
 
 /**
@@ -23,11 +23,11 @@ export const StyledItemMeta = styled.span.attrs({
   'data-garden-version': PACKAGE_VERSION
 })<IStyledItemMetaProps>`
   display: block;
-  line-height: ${props => props.theme.space.base * (props.isCompact ? 3 : 4)}px;
+  line-height: ${props => props.theme.space.base * (props.$isCompact ? 3 : 4)}px;
   color: ${props =>
     getColor({
       theme: props.theme,
-      variable: props.isDisabled ? 'foreground.disabled' : 'foreground.subtle'
+      variable: props.$isDisabled ? 'foreground.disabled' : 'foreground.subtle'
     })};
   font-size: ${props => props.theme.fontSizes.sm};
 

diff --git a/packages/dropdowns.legacy/src/styled/items/StyledNextIcon.tsx b/packages/dropdowns.legacy/src/styled/items/StyledNextIcon.tsx
@@ -13,7 +13,7 @@ import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'
 const COMPONENT_ID = 'dropdowns.next_item_icon';
 
 interface IStyledNextIconProps {
-  isDisabled?: boolean;
+  $isDisabled?: boolean;
 }
 
 const NextIconComponent: React.FC<HTMLAttributes<SVGSVGElement>> = ({ className }) => (
@@ -27,7 +27,7 @@ const NextIconComponent: React.FC<HTMLAttributes<SVGSVGElement>> = ({ className
 export const StyledNextIcon = styled(NextIconComponent)<IStyledNextIconProps>`
   transform: ${props => props.theme.rtl && 'rotate(180deg)'};
   color: ${props =>
-    props.isDisabled
+    props.$isDisabled
       ? 'inherit'
       : getColor({ theme: props.theme, variable: 'foreground.disabled' })};
 

diff --git a/packages/dropdowns.legacy/src/styled/items/StyledPreviousIcon.tsx b/packages/dropdowns.legacy/src/styled/items/StyledPreviousIcon.tsx
@@ -13,7 +13,7 @@ import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'
 const COMPONENT_ID = 'dropdowns.previous_item_icon';
 
 interface IStyledPreviousIconProps {
-  isDisabled?: boolean;
+  $isDisabled?: boolean;
 }
 
 const PreviousIconComponent: React.FC<HTMLAttributes<SVGSVGElement>> = ({ className }) => (
@@ -27,7 +27,9 @@ const PreviousIconComponent: React.FC<HTMLAttributes<SVGSVGElement>> = ({ classN
 export const StyledPreviousIcon = styled(PreviousIconComponent)<IStyledPreviousIconProps>`
   transform: ${props => props.theme.rtl && 'rotate(180deg)'};
   color: ${props =>
-    props.isDisabled ? 'inherit' : getColor({ theme: props.theme, variable: 'foreground.subtle' })};
+    props.$isDisabled
+      ? 'inherit'
+      : getColor({ theme: props.theme, variable: 'foreground.subtle' })};
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
diff --git a/packages/dropdowns.legacy/src/styled/items/header/StyledHeaderItem.ts b/packages/dropdowns.legacy/src/styled/items/header/StyledHeaderItem.ts
@@ -14,12 +14,12 @@ const COMPONENT_ID = 'dropdowns.header_item';
 
 export interface IStyledHeaderItemProps {
   /** Applies icon styling */
-  hasIcon?: boolean;
-  isCompact?: boolean;
+  $hasIcon?: boolean;
+  $isCompact?: boolean;
 }
 
 const getHorizontalPadding = (props: IStyledHeaderItemProps & ThemeProps<DefaultTheme>) => {
-  if (props.hasIcon) {
+  if (props.$hasIcon) {
     return undefined;
   }
 

diff --git a/packages/dropdowns.legacy/src/styled/items/media/StyledMediaBody.ts b/packages/dropdowns.legacy/src/styled/items/media/StyledMediaBody.ts
@@ -11,7 +11,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'dropdowns.media_body';
 
 interface IStyledMediaBodyProps {
-  isCompact?: boolean;
+  $isCompact?: boolean;
 }
 
 /**