refactor(dropdowns): use transient props where appropriate

zendeskgarden · Oct 23, 2024 · d89f05d · d89f05d
1 parent 785857e
commit d89f05d
Show file tree

Hide file tree

Showing 20 changed files with 133 additions and 129 deletions.
diff --git a/packages/dropdowns/src/elements/combobox/Combobox.tsx b/packages/dropdowns/src/elements/combobox/Combobox.tsx
@@ -177,15 +177,6 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
       'Options'
     );
     const triggerProps = {
-      isAutocomplete,
-      isBare,
-      isCompact,
-      isEditable,
-      isLabelHovered,
-      isMultiselectable,
-      maxHeight,
-      focusInset,
-      validation,
       ...(getTriggerProps({
         onFocus: () => {
           if (!isDisabled) {
@@ -214,10 +205,6 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
     const inputProps = {
       'aria-invalid': validation === 'error' || validation === 'warning',
       hidden: isInputHidden,
-      isBare,
-      isCompact,
-      isEditable,
-      isMultiselectable,
       placeholder,
       ...(getInputProps({
         ...(_inputProps as IUseComboboxReturnValue['getInputProps'])
@@ -266,12 +253,23 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
     return (
       <ComboboxContext.Provider value={contextValue}>
         <StyledCombobox
-          isCompact={isCompact}
+          $isCompact={isCompact}
           tabIndex={-1} // HACK: otherwise screenreaders can't read the label
           {...props}
           ref={ref}
         >
-          <StyledTrigger {...triggerProps}>
+          <StyledTrigger
+            $isAutocomplete={isAutocomplete}
+            $isBare={isBare}
+            $isCompact={isCompact}
+            $isEditable={isEditable}
+            $isLabelHovered={isLabelHovered}
+            $isMultiselectable={isMultiselectable}
+            $maxHeight={maxHeight}
+            $focusInset={focusInset}
+            $validation={validation}
+            {...triggerProps}
+          >
             <StyledContainer>
               {!!startIcon && (
                 <StyledInputIcon $isLabelHovered={isLabelHovered} $isCompact={isCompact}>
@@ -291,7 +289,7 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
                       <StyledTagsButton
                         disabled={isDisabled}
                         hidden={isTagGroupExpanded}
-                        isCompact={isCompact}
+                        $isCompact={isCompact}
                         tabIndex={-1}
                         type="button"
                       >
@@ -308,17 +306,23 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
                 )}
                 <StyledValue
                   hidden={!isInputHidden}
-                  isAutocomplete={isAutocomplete}
-                  isBare={isBare}
-                  isCompact={isCompact}
-                  isDisabled={isDisabled}
-                  isEditable={isEditable}
-                  isMultiselectable={isMultiselectable}
-                  isPlaceholder={!(inputValue || renderValue)}
+                  $isAutocomplete={isAutocomplete}
+                  $isBare={isBare}
+                  $isCompact={isCompact}
+                  $isDisabled={isDisabled}
+                  $isEditable={isEditable}
+                  $isMultiselectable={isMultiselectable}
+                  $isPlaceholder={!(inputValue || renderValue)}
                 >
                   {renderValue ? renderValue({ selection, inputValue }) : inputValue || placeholder}
                 </StyledValue>
-                <StyledInput {...inputProps} />
+                <StyledInput
+                  $isBare={isBare}
+                  $isCompact={isCompact}
+                  $isEditable={isEditable}
+                  $isMultiselectable={isMultiselectable}
+                  {...inputProps}
+                />
               </StyledInputGroup>
               {!!(hasChevron || endIcon) && (
                 <StyledInputIcon

diff --git a/packages/dropdowns/src/elements/combobox/Listbox.tsx b/packages/dropdowns/src/elements/combobox/Listbox.tsx
@@ -123,16 +123,16 @@ export const Listbox = forwardRef<HTMLUListElement, IListboxProps>(
     const Node = (
       <StyledFloatingListbox
         data-garden-animate={isVisible ? 'true' : 'false'}
-        isHidden={!isExpanded}
-        position={placement === 'bottom-start' ? 'bottom' : 'top'}
+        $isHidden={!isExpanded}
+        $position={placement === 'bottom-start' ? 'bottom' : 'top'}
         style={{ transform, width }}
-        zIndex={zIndex}
+        $zIndex={zIndex}
         ref={floatingRef}
       >
         <StyledListbox
-          isCompact={isCompact}
-          maxHeight={maxHeight}
-          minHeight={minHeight}
+          $isCompact={isCompact}
+          $maxHeight={maxHeight}
+          $minHeight={minHeight}
           onMouseDown={composeEventHandlers(onMouseDown, handleMouseDown)}
           style={{ height }}
           {...props}

diff --git a/packages/dropdowns/src/elements/combobox/OptGroup.tsx b/packages/dropdowns/src/elements/combobox/OptGroup.tsx
@@ -42,7 +42,7 @@ export const OptGroup = forwardRef<HTMLLIElement, IOptGroupProps>(
 
     return (
       <StyledOption
-        isCompact={isCompact}
+        $isCompact={isCompact}
         $type="group"
         onMouseDown={composeEventHandlers(onMouseDown, handleMouseDown)}
         role="none"
@@ -51,7 +51,7 @@ export const OptGroup = forwardRef<HTMLLIElement, IOptGroupProps>(
       >
         <StyledOptionContent>
           {!!(content || legend) && (
-            <StyledOption as="div" isCompact={isCompact} $type="header">
+            <StyledOption as="div" $isCompact={isCompact} $type="header">
               {!!icon && (
                 <StyledOptionTypeIcon $isCompact={isCompact} $type="header">
                   {icon}
@@ -60,7 +60,7 @@ export const OptGroup = forwardRef<HTMLLIElement, IOptGroupProps>(
               {content || legend}
             </StyledOption>
           )}
-          <StyledOptGroup isCompact={isCompact} {...optGroupProps}>
+          <StyledOptGroup $isCompact={isCompact} {...optGroupProps}>
             <StyledListboxSeparator role="none" />
             {children}
           </StyledOptGroup>

diff --git a/packages/dropdowns/src/elements/combobox/Option.tsx b/packages/dropdowns/src/elements/combobox/Option.tsx
@@ -67,8 +67,8 @@ const OptionComponent = forwardRef<HTMLLIElement, IOptionProps>(
     return (
       <OptionContext.Provider value={contextValue}>
         <StyledOption
-          isActive={isActive}
-          isCompact={isCompact}
+          $isActive={isActive}
+          $isCompact={isCompact}
           $type={type}
           {...props}
           {...optionProps}

diff --git a/packages/dropdowns/src/elements/combobox/OptionMeta.tsx b/packages/dropdowns/src/elements/combobox/OptionMeta.tsx
@@ -13,7 +13,7 @@ const OptionMetaComponent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEle
   (props, ref) => {
     const { isDisabled } = useOptionContext();
 
-    return <StyledOptionMeta isDisabled={isDisabled} {...props} ref={ref} />;
+    return <StyledOptionMeta $isDisabled={isDisabled} {...props} ref={ref} />;
   }
 );
 

diff --git a/packages/dropdowns/src/elements/menu/Item.tsx b/packages/dropdowns/src/elements/menu/Item.tsx
@@ -83,8 +83,8 @@ const ItemComponent = forwardRef<HTMLLIElement, IItemProps>(
       <ItemContext.Provider value={contextValue}>
         <StyledItem
           $type={type}
-          isCompact={isCompact}
-          isActive={isActive}
+          $isCompact={isCompact}
+          $isActive={isActive}
           {...props}
           {...itemProps}
           ref={mergeRefs([_itemRef, ref])}

diff --git a/packages/dropdowns/src/elements/menu/ItemGroup.tsx b/packages/dropdowns/src/elements/menu/ItemGroup.tsx
@@ -44,10 +44,10 @@ export const ItemGroup = forwardRef<HTMLLIElement, IItemGroupProps>(
 
     return (
       <ItemGroupContext.Provider value={contextValue}>
-        <StyledItem isCompact={isCompact} $type="group" {...props} role="none" ref={ref}>
+        <StyledItem $isCompact={isCompact} $type="group" {...props} role="none" ref={ref}>
           <StyledItemContent>
             {!!(content || legend) && (
-              <StyledItem as="div" isCompact={isCompact} $type="header">
+              <StyledItem as="div" $isCompact={isCompact} $type="header">
                 {!!icon && (
                   <StyledItemTypeIcon $isCompact={isCompact} $type="header">
                     {icon}
@@ -56,7 +56,7 @@ export const ItemGroup = forwardRef<HTMLLIElement, IItemGroupProps>(
                 {content || legend}
               </StyledItem>
             )}
-            <StyledItemGroup isCompact={isCompact} {...groupProps}>
+            <StyledItemGroup $isCompact={isCompact} {...groupProps}>
               <StyledSeparator role="none" />
               {children}
             </StyledItemGroup>

diff --git a/packages/dropdowns/src/elements/menu/ItemMeta.tsx b/packages/dropdowns/src/elements/menu/ItemMeta.tsx
@@ -13,7 +13,7 @@ const ItemMetaComponent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEleme
   (props, ref) => {
     const { isDisabled } = useItemContext();
 
-    return <StyledItemMeta isDisabled={isDisabled} {...props} ref={ref} />;
+    return <StyledItemMeta $isDisabled={isDisabled} {...props} ref={ref} />;
   }
 );
 

diff --git a/packages/dropdowns/src/elements/menu/MenuList.tsx b/packages/dropdowns/src/elements/menu/MenuList.tsx
@@ -144,18 +144,18 @@ export const MenuList = forwardRef<HTMLUListElement, IMenuListProps>(
     const Node = (
       <StyledFloatingMenu
         data-garden-animate={isVisible}
-        isHidden={!isExpanded || !isVisible} /* [1] */
-        position={getMenuPosition(placement)}
-        zIndex={zIndex}
+        $isHidden={!isExpanded || !isVisible} /* [1] */
+        $position={getMenuPosition(placement)}
+        $zIndex={zIndex}
         style={{ transform }}
         ref={floatingRef}
       >
         <StyledMenu
           data-garden-animate-arrow={isVisible}
-          arrowPosition={hasArrow ? getArrowPosition(theme, placement) : undefined}
-          isCompact={isCompact}
-          minHeight={minHeight}
-          maxHeight={maxHeight}
+          $arrowPosition={hasArrow ? getArrowPosition(theme, placement) : undefined}
+          $isCompact={isCompact}
+          $minHeight={minHeight}
+          $maxHeight={maxHeight}
           style={{ height }}
           {...props}
           ref={ref}

diff --git a/packages/dropdowns/src/views/combobox/StyledCombobox.ts b/packages/dropdowns/src/views/combobox/StyledCombobox.ts
@@ -14,12 +14,12 @@ import { StyledMessage } from './StyledMessage';
 const COMPONENT_ID = 'dropdowns.combobox';
 
 interface IStyledComboboxProps extends ThemeProps<DefaultTheme> {
-  isCompact?: boolean;
+  $isCompact?: boolean;
 }
 
 const sizeStyles = (props: IStyledComboboxProps) => {
-  const minWidth = `${props.isCompact ? 100 : 144}px`;
-  const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
+  const minWidth = `${props.$isCompact ? 100 : 144}px`;
+  const marginTop = `${props.theme.space.base * (props.$isCompact ? 1 : 2)}px`;
 
   return css`
     min-width: ${minWidth};

diff --git a/packages/dropdowns/src/views/combobox/StyledFloatingListbox.ts b/packages/dropdowns/src/views/combobox/StyledFloatingListbox.ts
@@ -12,9 +12,9 @@ import { IListboxProps } from '../../types';
 const COMPONENT_ID = 'dropdowns.combobox.floating';
 
 export interface IStyledFloatingListboxProps extends ThemeProps<DefaultTheme> {
-  isHidden?: boolean;
-  position: MenuPosition;
-  zIndex?: IListboxProps['zIndex'];
+  $isHidden?: boolean;
+  $position: MenuPosition;
+  $zIndex?: IListboxProps['zIndex'];
 }
 
 /*
@@ -28,11 +28,11 @@ export const StyledFloatingListbox = styled.div.attrs({
   left: 0; /* [1] */
 
   ${props =>
-    menuStyles(props.position, {
+    menuStyles(props.$position, {
       theme: props.theme,
-      hidden: props.isHidden,
+      hidden: props.$isHidden,
       animationModifier: '[data-garden-animate="true"]',
-      zIndex: props.zIndex
+      zIndex: props.$zIndex
     })};
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};

diff --git a/packages/dropdowns/src/views/combobox/StyledInput.ts b/packages/dropdowns/src/views/combobox/StyledInput.ts
@@ -12,10 +12,10 @@ import { retrieveComponentStyles, getLineHeight, getColor } from '@zendeskgarden
 const COMPONENT_ID = 'dropdowns.combobox.input';
 
 interface IStyledInputProps extends ThemeProps<DefaultTheme> {
-  isBare?: boolean;
-  isCompact?: boolean;
-  isEditable?: boolean;
-  isMultiselectable?: boolean;
+  $isBare?: boolean;
+  $isCompact?: boolean;
+  $isEditable?: boolean;
+  $isMultiselectable?: boolean;
 }
 
 const colorStyles = ({ theme }: IStyledInputProps) => {
@@ -33,11 +33,11 @@ const colorStyles = ({ theme }: IStyledInputProps) => {
 };
 
 export const getHeight = (props: IStyledInputProps) => {
-  if (props.isBare && !props.isMultiselectable) {
+  if (props.$isBare && !props.$isMultiselectable) {
     return props.theme.space.base * 5;
   }
 
-  return props.theme.space.base * (props.isCompact ? 5 : 8);
+  return props.theme.space.base * (props.$isCompact ? 5 : 8);
 };
 
 export const sizeStyles = (props: IStyledInputProps) => {
@@ -80,7 +80,7 @@ export const StyledInput = styled.input.attrs({
 
   &[hidden] {
     display: revert;
-    ${props => props.isEditable && hideVisually()}
+    ${props => props.$isEditable && hideVisually()}
   }
 
   &[aria-hidden='true'] {

diff --git a/packages/dropdowns/src/views/combobox/StyledListbox.ts b/packages/dropdowns/src/views/combobox/StyledListbox.ts
@@ -15,21 +15,21 @@ import { StyledListboxSeparator } from './StyledListboxSeparator';
 const COMPONENT_ID = 'dropdowns.combobox.listbox';
 
 export interface IStyledListboxProps extends ThemeProps<DefaultTheme> {
-  isCompact?: boolean;
-  maxHeight?: IListboxProps['maxHeight'];
-  minHeight?: IListboxProps['minHeight'];
+  $isCompact?: boolean;
+  $maxHeight?: IListboxProps['maxHeight'];
+  $minHeight?: IListboxProps['minHeight'];
 }
 
 const sizeStyles = (props: IStyledListboxProps) => {
   const padding = props.theme.space.base;
-  const minHeight =
-    props.minHeight === undefined
+  const $minHeight =
+    props.$minHeight === undefined
       ? `${getOptionMinHeight(props) + padding * 2}px`
-      : props.minHeight;
+      : props.$minHeight;
 
   return css`
-    min-height: ${minHeight};
-    max-height: ${props.maxHeight};
+    min-height: ${$minHeight};
+    max-height: ${props.$maxHeight};
 
     &&& {
       padding-top: ${padding}px;

diff --git a/packages/dropdowns/src/views/combobox/StyledOptGroup.ts b/packages/dropdowns/src/views/combobox/StyledOptGroup.ts
@@ -11,7 +11,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'dropdowns.combobox.optgroup';
 
 export interface IStyledOptGroupProps extends ThemeProps<DefaultTheme> {
-  isCompact?: boolean;
+  $isCompact?: boolean;
 }
 
 export const StyledOptGroup = styled.ul.attrs({

diff --git a/packages/dropdowns/src/views/combobox/StyledOption.ts b/packages/dropdowns/src/views/combobox/StyledOption.ts
@@ -13,16 +13,16 @@ import { OptionType } from '../../types';
 const COMPONENT_ID = 'dropdowns.combobox.option';
 
 export interface IStyledOptionProps extends ThemeProps<DefaultTheme> {
-  isActive?: boolean;
-  isCompact?: boolean;
+  $isActive?: boolean;
+  $isCompact?: boolean;
   $type?: OptionType | 'header' | 'group';
 }
 
-const colorStyles = ({ theme, isActive, $type }: IStyledOptionProps) => {
+const colorStyles = ({ theme, $isActive, $type }: IStyledOptionProps) => {
   let backgroundColor;
   let boxShadow;
 
-  if (isActive && $type !== 'group' && $type !== 'header') {
+  if ($isActive && $type !== 'group' && $type !== 'header') {
     const variable = 'background.primaryEmphasis';
 
     backgroundColor = getColor({ theme, variable, transparency: theme.opacity[100] });
@@ -57,7 +57,7 @@ const colorStyles = ({ theme, isActive, $type }: IStyledOptionProps) => {
 };
 
 export const getMinHeight = (props: IStyledOptionProps) =>
-  props.theme.space.base * (props.isCompact ? 7 : 9);
+  props.theme.space.base * (props.$isCompact ? 7 : 9);
 
 /*
  * 1. Use px vs. unitless to prevent browser sizing shifts.

diff --git a/packages/dropdowns/src/views/combobox/StyledOptionMeta.ts b/packages/dropdowns/src/views/combobox/StyledOptionMeta.ts
@@ -11,11 +11,11 @@ import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'
 const COMPONENT_ID = 'dropdowns.combobox.option.meta';
 
 export interface IStyledOptionMetaProps extends ThemeProps<DefaultTheme> {
-  isDisabled?: boolean;
+  $isDisabled?: boolean;
 }
 
-const colorStyles = ({ theme, isDisabled }: IStyledOptionMetaProps) => {
-  const variable = isDisabled ? 'foreground.disabled' : 'foreground.subtle';
+const colorStyles = ({ theme, $isDisabled }: IStyledOptionMetaProps) => {
+  const variable = $isDisabled ? 'foreground.disabled' : 'foreground.subtle';
   const color = getColor({ theme, variable });
 
   return css`