diff --git a/packages/dropdowns.legacy/src/elements/Menu/Items/AddItem.tsx b/packages/dropdowns.legacy/src/elements/Menu/Items/AddItem.tsx index 583a6b92a2..1986b0aa19 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 cd8a328ffd..a6d9bfc7bd 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 cc6ab7c13b..c0cddbead4 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 83dd04e752..aaf0256a2b 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 e7e944c716..fd979a8874 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 15c4d00573..fdfbb97883 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 6cdc89aec6..3b50c0640b 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 b257dc3522..2b83b908c5 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 e9835724f0..52ecb258fb 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 6ceb218b9e..6155e16ea3 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 87decb3005..cc3e4e82a5 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 ebe469293c..a7949ef9d5 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 fc2babcd39..c2633c4b96 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 54065a112c..e6b7904327 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 ec9a8d40fa..5e637696fd 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 adeba953ce..d9275038cd 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 b229546c63..71772b14e2 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 a6557a9ff6..e066df5f34 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 427e6c407d..e5d1fb0e3e 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 fa66744c9b..ce952ce08e 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 b03e50a1f2..e07c27d185 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 1a43411082..eb56c9c68b 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 56ee07267d..31c43d5332 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)}; diff --git a/packages/forms/src/elements/MediaInput.tsx b/packages/forms/src/elements/MediaInput.tsx index 05ffdf2ab3..f56b345aab 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} > diff --git a/packages/forms/src/elements/faux-input/FauxInput.tsx b/packages/forms/src/elements/faux-input/FauxInput.tsx index 3311a85690..e2ac76b6f0 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 c668c3c9f2..be60e8486e 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