From d212286e8a507264d76fd476d98c1732381f3953 Mon Sep 17 00:00:00 2001
From: Florent Mathieu <florent.mathieu@zendesk.com>
Date: Mon, 21 Oct 2024 21:12:40 -1000
Subject: [PATCH 1/3] fix(FauxInput): add mediaLayout pass-thru prop

---
 packages/forms/src/elements/faux-input/FauxInput.tsx | 2 ++
 packages/forms/src/types/index.ts                    | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/packages/forms/src/elements/faux-input/FauxInput.tsx b/packages/forms/src/elements/faux-input/FauxInput.tsx
index 3311a856904..e2ac76b6f00 100644
--- a/packages/forms/src/elements/faux-input/FauxInput.tsx
+++ b/packages/forms/src/elements/faux-input/FauxInput.tsx
@@ -26,6 +26,7 @@ const FauxInputComponent = forwardRef<HTMLDivElement, IFauxInputProps>(
       onFocus,
       readOnly,
       validation,
+      mediaLayout,
       ...other
     },
     ref
@@ -51,6 +52,7 @@ const FauxInputComponent = forwardRef<HTMLDivElement, IFauxInputProps>(
         $isFocused={controlledIsFocused === undefined ? isFocused : controlledIsFocused}
         $isHovered={isHovered}
         $isReadOnly={readOnly}
+        $mediaLayout={mediaLayout}
         $validation={validation}
         data-test-is-focused={controlledIsFocused === undefined ? isFocused : controlledIsFocused}
         tabIndex={disabled ? undefined : 0}
diff --git a/packages/forms/src/types/index.ts b/packages/forms/src/types/index.ts
index c668c3c9f24..be60e8486e3 100644
--- a/packages/forms/src/types/index.ts
+++ b/packages/forms/src/types/index.ts
@@ -111,6 +111,8 @@ export interface IFauxInputProps
   isFocused?: boolean;
   /** Applies hover stying */
   isHovered?: boolean;
+  /** @ignore Internal use only */
+  mediaLayout?: boolean;
 }
 
 export interface IFauxInputIconProps

From 342fdbf2dd74348d18ff278a6a48da0e561fc93f Mon Sep 17 00:00:00 2001
From: Florent Mathieu <florent.mathieu@zendesk.com>
Date: Tue, 22 Oct 2024 07:39:07 -1000
Subject: [PATCH 2/3] refactor(dropdowns.legacy): use transent props where
 appropriate

---
 .../src/elements/Menu/Items/AddItem.tsx       |  2 +-
 .../src/elements/Menu/Items/HeaderItem.tsx    | 10 +++--
 .../src/elements/Menu/Items/Item.tsx          | 20 ++++-----
 .../src/elements/Menu/Items/ItemMeta.tsx      |  2 +-
 .../src/elements/Menu/Items/MediaBody.tsx     |  2 +-
 .../src/elements/Menu/Items/MediaFigure.tsx   |  2 +-
 .../src/elements/Menu/Items/NextItem.tsx      |  4 +-
 .../src/elements/Menu/Items/PreviousItem.tsx  |  4 +-
 .../src/elements/Menu/Menu.tsx                | 45 +++++++++----------
 .../src/elements/Multiselect/Multiselect.tsx  |  6 +--
 .../src/styled/items/StyledItem.spec.tsx      |  2 +-
 .../src/styled/items/StyledItem.ts            | 12 ++---
 .../src/styled/items/StyledItemIcon.ts        | 10 ++---
 .../src/styled/items/StyledItemMeta.ts        |  8 ++--
 .../src/styled/items/StyledNextIcon.tsx       |  4 +-
 .../src/styled/items/StyledPreviousIcon.tsx   |  6 ++-
 .../styled/items/header/StyledHeaderItem.ts   |  6 +--
 .../src/styled/items/media/StyledMediaBody.ts |  2 +-
 .../styled/items/media/StyledMediaFigure.ts   |  4 +-
 .../src/styled/menu/StyledMenu.ts             | 20 ++++-----
 .../src/styled/menu/StyledMenuWrapper.ts      | 22 ++++-----
 .../StyledMultiselectItemsContainer.ts        | 10 ++---
 .../StyledMultiselectMoreAnchor.ts            | 14 +++---
 23 files changed, 110 insertions(+), 107 deletions(-)

diff --git a/packages/dropdowns.legacy/src/elements/Menu/Items/AddItem.tsx b/packages/dropdowns.legacy/src/elements/Menu/Items/AddItem.tsx
index 583a6b92a24..1986b0aa195 100644
--- 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
index cd8a328ffda..a6d9bfc7bd1 100644
--- 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
index cc6ab7c13b3..c0cddbead4a 100644
--- 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
index 83dd04e7522..aaf0256a2bd 100644
--- 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
index e7e944c7161..fd979a8874f 100644
--- 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
index 15c4d005739..fdfbb97883c 100644
--- 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
index 6cdc89aec66..3b50c0640b1 100644
--- 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
index b257dc3522c..2b83b908c59 100644
--- 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
index e9835724f06..52ecb258fbd 100644
--- 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
index 6ceb218b9e8..6155e16ea34 100644
--- 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
index 87decb30052..cc3e4e82a55 100644
--- 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
index ebe469293c1..a7949ef9d5a 100644
--- a/packages/dropdowns.legacy/src/styled/items/StyledItem.ts
+++ b/packages/dropdowns.legacy/src/styled/items/StyledItem.ts
@@ -11,15 +11,15 @@ 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`;
   }
 
@@ -27,7 +27,7 @@ export const getItemPaddingVertical = (props: IStyledItemProps & ThemeProps<Defa
 };
 
 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
index fc2babcd39e..c2633c4b96a 100644
--- 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
index 54065a112c3..e6b7904327f 100644
--- 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
index ec9a8d40fa1..5e637696fd0 100644
--- 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
index adeba953ced..d9275038cdb 100644
--- 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
index b229546c63f..71772b14e26 100644
--- 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
index a6557a9ff68..e066df5f347 100644
--- 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;
 }
 
 /**
diff --git a/packages/dropdowns.legacy/src/styled/items/media/StyledMediaFigure.ts b/packages/dropdowns.legacy/src/styled/items/media/StyledMediaFigure.ts
index 427e6c407db..e5d1fb0e3ea 100644
--- a/packages/dropdowns.legacy/src/styled/items/media/StyledMediaFigure.ts
+++ b/packages/dropdowns.legacy/src/styled/items/media/StyledMediaFigure.ts
@@ -12,7 +12,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'dropdowns.media_figure';
 
 interface IStyledMediaFigureProps extends HTMLAttributes<HTMLDivElement> {
-  isCompact?: boolean;
+  $isCompact?: boolean;
 }
 
 /**
@@ -22,7 +22,7 @@ export const StyledMediaFigure = styled(
   /* eslint-disable @typescript-eslint/no-unused-vars */
   ({
     children,
-    isCompact,
+    $isCompact,
     theme,
     ...props
   }: PropsWithChildren<IStyledMediaFigureProps & ThemeProps<DefaultTheme>>) =>
diff --git a/packages/dropdowns.legacy/src/styled/menu/StyledMenu.ts b/packages/dropdowns.legacy/src/styled/menu/StyledMenu.ts
index fa66744c9b1..ce952ce08eb 100644
--- a/packages/dropdowns.legacy/src/styled/menu/StyledMenu.ts
+++ b/packages/dropdowns.legacy/src/styled/menu/StyledMenu.ts
@@ -13,11 +13,11 @@ import { getArrowPosition } from '../../utils/garden-placements';
 const COMPONENT_ID = 'dropdowns.menu';
 
 interface IStyledMenuProps {
-  isCompact?: boolean;
-  isAnimated?: boolean;
-  hasArrow?: boolean;
-  placement?: PopperPlacement;
-  maxHeight?: string;
+  $isCompact?: boolean;
+  $isAnimated?: boolean;
+  $hasArrow?: boolean;
+  $placement?: PopperPlacement;
+  $maxHeight?: string;
 }
 
 /**
@@ -27,19 +27,19 @@ interface IStyledMenuProps {
 export const StyledMenu = styled.ul.attrs<IStyledMenuProps>(props => ({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION,
-  className: props.isAnimated && 'is-animated'
+  className: props.$isAnimated && 'is-animated'
 }))<IStyledMenuProps>`
   /* stylelint-disable-next-line declaration-no-important */
   position: static !important; /* [1] */
-  max-height: ${props => props.maxHeight};
+  max-height: ${props => props.$maxHeight};
   overflow-y: auto;
 
   ${props =>
-    props.hasArrow &&
-    arrowStyles(getArrowPosition(props.placement), {
+    props.$hasArrow &&
+    arrowStyles(getArrowPosition(props.$placement), {
       size: `${props.theme.space.base * 1.5}px`,
       inset: '1px',
-      animationModifier: props.isAnimated ? '.is-animated' : undefined
+      animationModifier: props.$isAnimated ? '.is-animated' : undefined
     })};
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
diff --git a/packages/dropdowns.legacy/src/styled/menu/StyledMenuWrapper.ts b/packages/dropdowns.legacy/src/styled/menu/StyledMenuWrapper.ts
index b03e50a1f2e..e07c27d1858 100644
--- a/packages/dropdowns.legacy/src/styled/menu/StyledMenuWrapper.ts
+++ b/packages/dropdowns.legacy/src/styled/menu/StyledMenuWrapper.ts
@@ -13,25 +13,25 @@ import { getMenuPosition } from '../../utils/garden-placements';
 const COMPONENT_ID = 'dropdowns.menu_wrapper';
 
 interface IStyledMenuWrapperProps {
-  hasArrow?: boolean;
-  placement?: PopperPlacement;
-  isHidden?: boolean;
-  zIndex?: number;
-  isAnimated?: boolean;
+  $hasArrow?: boolean;
+  $placement?: PopperPlacement;
+  $isHidden?: boolean;
+  $zIndex?: number;
+  $isAnimated?: boolean;
 }
 
 export const StyledMenuWrapper = styled.div.attrs<IStyledMenuWrapperProps>(props => ({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION,
-  className: props.isAnimated && 'is-animated'
+  className: props.$isAnimated && 'is-animated'
 }))<IStyledMenuWrapperProps>`
   ${props =>
-    menuStyles(getMenuPosition(props.placement), {
+    menuStyles(getMenuPosition(props.$placement), {
       theme: props.theme,
-      hidden: props.isHidden,
-      margin: `${props.theme.space.base * (props.hasArrow ? 2 : 1)}px`,
-      zIndex: props.zIndex,
-      animationModifier: props.isAnimated ? '.is-animated' : undefined
+      hidden: props.$isHidden,
+      margin: `${props.theme.space.base * (props.$hasArrow ? 2 : 1)}px`,
+      zIndex: props.$zIndex,
+      animationModifier: props.$isAnimated ? '.is-animated' : undefined
     })};
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
diff --git a/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectItemsContainer.ts b/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectItemsContainer.ts
index 1a434110822..eb56c9c68bf 100644
--- a/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectItemsContainer.ts
+++ b/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectItemsContainer.ts
@@ -11,8 +11,8 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'dropdowns.multiselect_items_container';
 
 interface IStyledMultiselectItemsContainerProps {
-  isCompact?: boolean;
-  isBare?: boolean;
+  $isCompact?: boolean;
+  $isBare?: boolean;
 }
 
 /**
@@ -23,14 +23,14 @@ const sizeStyles = (props: IStyledMultiselectItemsContainerProps & ThemeProps<De
   let margin;
   let padding;
 
-  if (!props.isBare) {
-    const marginVertical = props.isCompact
+  if (!props.$isBare) {
+    const marginVertical = props.$isCompact
       ? `-${props.theme.space.base * 1.5}px`
       : `-${props.theme.space.base * 2.5}px`;
 
     margin = `${marginVertical} 0`; /* [1] */
 
-    const paddingVertical = props.isCompact ? '3px' : '1px';
+    const paddingVertical = props.$isCompact ? '3px' : '1px';
     const paddingEnd = `${props.theme.space.base}px`;
 
     padding = `${paddingVertical} ${props.theme.rtl ? 0 : paddingEnd} ${paddingVertical} ${
diff --git a/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectMoreAnchor.ts b/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectMoreAnchor.ts
index 56ee07267d6..31c43d53327 100644
--- a/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectMoreAnchor.ts
+++ b/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectMoreAnchor.ts
@@ -11,8 +11,8 @@ import { getLineHeight, retrieveComponentStyles, getColor } from '@zendeskgarden
 const COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
 
 interface IStyledMultiselectMoreAnchorProps {
-  isCompact?: boolean;
-  isDisabled?: boolean;
+  $isCompact?: boolean;
+  $isDisabled?: boolean;
 }
 
 export const StyledMultiselectMoreAnchor = styled.div.attrs({
@@ -20,22 +20,22 @@ export const StyledMultiselectMoreAnchor = styled.div.attrs({
   'data-garden-version': PACKAGE_VERSION
 })<IStyledMultiselectMoreAnchorProps>`
   display: inline-block;
-  cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
-  padding: ${props => props.theme.space.base * (props.isCompact ? 0.75 : 1.5)}px 0;
+  cursor: ${props => (props.$isDisabled ? 'default' : 'pointer')};
+  padding: ${props => props.theme.space.base * (props.$isCompact ? 0.75 : 1.5)}px 0;
   overflow: hidden;
   user-select: none;
   text-overflow: ellipsis;
   line-height: ${props =>
-    props.isCompact ? '1em' : getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md)};
+    props.$isCompact ? '1em' : getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md)};
   white-space: nowrap;
   color: ${props =>
     getColor({
       theme: props.theme,
-      variable: props.isDisabled ? 'foreground.disabled' : 'foreground.primary'
+      variable: props.$isDisabled ? 'foreground.disabled' : 'foreground.primary'
     })};
 
   :hover {
-    text-decoration: ${props => !props.isDisabled && 'underline'};
+    text-decoration: ${props => !props.$isDisabled && 'underline'};
   }
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};

From 4d6a12419909ebbb1f52c9da380aa3dd3468f110 Mon Sep 17 00:00:00 2001
From: Florent Mathieu <florent.mathieu@zendesk.com>
Date: Tue, 22 Oct 2024 09:14:36 -1000
Subject: [PATCH 3/3] chore: use internal `mediaLayout` prop for consistency

---
 packages/forms/src/elements/MediaInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/forms/src/elements/MediaInput.tsx b/packages/forms/src/elements/MediaInput.tsx
index 05ffdf2ab34..f56b345aab6 100644
--- a/packages/forms/src/elements/MediaInput.tsx
+++ b/packages/forms/src/elements/MediaInput.tsx
@@ -100,7 +100,7 @@ export const MediaInput = React.forwardRef<HTMLInputElement, IMediaInputProps>(
         focusInset={focusInset}
         readOnly={readOnly}
         validation={validation}
-        $mediaLayout // pass-through prop to StyledTextFauxInput for media layout
+        mediaLayout
         {...otherWrapperProps}
         ref={wrapperRef}
       >