refactor(draggable, modals, typography): use transient props where appropriate (#1963)

Author: ze-flo

packages/draggable/src/elements/draggable-list/DraggableList.tsx

@@ -12,15 +12,17 @@ import { StyledDraggableList } from '../../styled';
 import { IDraggableListProps } from '../../types';
 import { DraggableListContext } from '../../utils/useDraggableListContext';
 
-const DraggableListComponent = forwardRef<HTMLUListElement, IDraggableListProps>((props, ref) => {
-  const value = useMemo(() => ({ isHorizontal: props.isHorizontal }), [props.isHorizontal]);
+const DraggableListComponent = forwardRef<HTMLUListElement, IDraggableListProps>(
+  ({ isHorizontal, ...other }, ref) => {
+    const value = useMemo(() => ({ isHorizontal }), [isHorizontal]);
 
-  return (
-    <DraggableListContext.Provider value={value}>
-      <StyledDraggableList {...props} ref={ref} />
-    </DraggableListContext.Provider>
-  );
-});
+    return (
+      <DraggableListContext.Provider value={value}>
+        <StyledDraggableList $isHorizontal={isHorizontal} ref={ref} {...other} />
+      </DraggableListContext.Provider>
+    );
+  }
+);
 
 DraggableListComponent.displayName = 'DraggableList';
 

packages/draggable/src/elements/draggable-list/components/DropIndicator.tsx

@@ -22,7 +22,7 @@ export const DropIndicator = forwardRef<HTMLLIElement, LiHTMLAttributes<HTMLLIEl
       <StyledDropIndicator
         {...props}
         aria-label={ariaLabel}
-        isHorizontal={isHorizontal}
+        $isHorizontal={isHorizontal}
         ref={ref}
       />
     );

packages/draggable/src/elements/draggable-list/components/Item.tsx

@@ -15,7 +15,7 @@ import { useDraggableListContext } from '../../../utils/useDraggableListContext'
 export const Item = forwardRef<HTMLLIElement, LiHTMLAttributes<HTMLLIElement>>((props, ref) => {
   const { isHorizontal } = useDraggableListContext();
 
-  return <StyledItem {...props} isHorizontal={isHorizontal} ref={ref} />;
+  return <StyledItem {...props} $isHorizontal={isHorizontal} ref={ref} />;
 });
 
 Item.displayName = 'DraggableList.Item';

packages/draggable/src/elements/draggable/Draggable.tsx

@@ -11,19 +11,38 @@ import { Grip } from './components/Grip';
 import { StyledDraggable } from '../../styled';
 import { IDraggableProps } from '../../types';
 
-const DraggableComponent = forwardRef<HTMLDivElement, IDraggableProps>(({ tag, ...props }, ref) => {
-  const isDisabled = props.isDisabled;
+const DraggableComponent = forwardRef<HTMLDivElement, IDraggableProps>(
+  (
+    {
+      focusInset,
+      isBare,
+      isCompact,
+      isDisabled,
+      isGrabbed,
+      isPlaceholder,
 
-  return (
-    <StyledDraggable
-      as={tag}
-      aria-disabled={isDisabled}
-      tabIndex={isDisabled ? undefined : 0}
-      {...props}
-      ref={ref}
-    />
-  );
-});
+      tag,
+      ...other
+    },
+    ref
+  ) => {
+    return (
+      <StyledDraggable
+        $focusInset={focusInset}
+        $isBare={isBare}
+        $isCompact={isCompact}
+        $isDisabled={isDisabled}
+        $isGrabbed={isGrabbed}
+        $isPlaceholder={isPlaceholder}
+        aria-disabled={isDisabled}
+        as={tag}
+        ref={ref}
+        tabIndex={isDisabled ? undefined : 0}
+        {...other}
+      />
+    );
+  }
+);
 
 DraggableComponent.displayName = 'Draggable';
 

packages/draggable/src/elements/dropzone/Dropzone.tsx

@@ -14,8 +14,7 @@ import { IDropzoneProps } from '../../types';
 import { DropzoneContext } from '../../utils/useDropzoneContext';
 
 const DropzoneComponent = forwardRef<HTMLDivElement, IDropzoneProps>(
-  ({ tag, isVertical, children, ...props }, ref) => {
-    const { isDanger } = props;
+  ({ children, isActive, isDanger, isDisabled, isHighlighted, isVertical, tag, ...other }, ref) => {
     const [hasMessage, setHasMessage] = useState(false);
     const [hasIcon, setHasIcon] = useState(false);
     const value = useMemo(
@@ -30,16 +29,20 @@ const DropzoneComponent = forwardRef<HTMLDivElement, IDropzoneProps>(
       <DropzoneContext.Provider value={value}>
         <StyledDropzone
           as={tag}
-          aria-disabled={props.isDisabled}
-          {...props}
-          hasIcon={hasIcon}
-          hasMessage={hasMessage}
-          isVertical={isVertical}
+          aria-disabled={isDisabled}
+          {...other}
+          $isActive={isActive}
+          $isDisabled={isDisabled}
+          $isDanger={isDanger}
+          $isHighlighted={isHighlighted}
+          $hasIcon={hasIcon}
+          $hasMessage={hasMessage}
+          $isVertical={isVertical}
           ref={ref}
         >
           {/* [1] */}
           {!!(hasMessage && isDanger) && !hasIcon && (
-            <StyledIcon aria-hidden="true" hasMessage={hasMessage} isVertical={isVertical}>
+            <StyledIcon aria-hidden="true" $hasMessage={hasMessage} $isVertical={isVertical}>
               <TrashIcon />
             </StyledIcon>
           )}

packages/draggable/src/elements/dropzone/components/Icon.tsx

@@ -31,8 +31,8 @@ export const Icon = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((
     <StyledIcon
       aria-hidden="true"
       {...props}
-      hasMessage={hasMessage}
-      isVertical={isVertical}
+      $hasMessage={hasMessage}
+      $isVertical={isVertical}
       ref={ref}
     />
   );

packages/draggable/src/styled/draggable-list/StyledDraggableList.ts

@@ -12,18 +12,18 @@ import { StyledItem } from './StyledItem';
 const COMPONENT_ID = 'draggable_list';
 
 export interface IStyledDraggableListProps extends ThemeProps<DefaultTheme> {
-  isHorizontal?: boolean;
+  $isHorizontal?: boolean;
 }
 
 const sizeStyles = (props: IStyledDraggableListProps) => {
   const {
-    isHorizontal,
+    $isHorizontal,
     theme: { space }
   } = props;
   let marginStart = 'margin-top';
   let marginEnd = 'margin-bottom';
 
-  if (isHorizontal) {
+  if ($isHorizontal) {
     marginStart = 'margin-right';
     marginEnd = 'margin-left';
   }
@@ -45,7 +45,7 @@ export const StyledDraggableList = styled.ul.attrs({
   'data-garden-version': PACKAGE_VERSION
 })<IStyledDraggableListProps & ThemeProps<DefaultTheme>>`
   display: flex;
-  flex-direction: ${p => (p.isHorizontal ? 'row' : 'column')};
+  flex-direction: ${p => (p.$isHorizontal ? 'row' : 'column')};
   margin: 0; /* [1] */
   padding: 0; /* [1] */
   list-style: none; /* [1] */

packages/draggable/src/styled/draggable-list/StyledDropIndicator.ts

@@ -11,7 +11,7 @@ import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'
 const COMPONENT_ID = 'draggable_list.drop_indicator';
 
 export interface IStyledDropIndicatorProps extends ThemeProps<DefaultTheme> {
-  isHorizontal?: boolean;
+  $isHorizontal?: boolean;
 }
 
 const colorStyles = (props: IStyledDropIndicatorProps) => {
@@ -33,10 +33,10 @@ const colorStyles = (props: IStyledDropIndicatorProps) => {
 };
 
 const sizeStyles = (props: IStyledDropIndicatorProps) => {
-  const { isHorizontal, theme } = props;
+  const { $isHorizontal, theme } = props;
   const pseudoSize = theme.space.xs;
-  const translateX = isHorizontal ? theme.space.xxs : theme.space.xs;
-  const translateY = isHorizontal ? theme.space.xs : theme.space.xxs;
+  const translateX = $isHorizontal ? theme.space.xxs : theme.space.xs;
+  const translateY = $isHorizontal ? theme.space.xs : theme.space.xxs;
 
   return css`
     &::before,

packages/draggable/src/styled/draggable-list/StyledItem.ts

@@ -11,17 +11,17 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'draggable_list.item';
 
 export interface IStyledItemProps extends ThemeProps<DefaultTheme> {
-  isHorizontal?: boolean;
+  $isHorizontal?: boolean;
 }
 
 const sizeStyles = (props: IStyledItemProps) => {
   const {
-    isHorizontal,
+    $isHorizontal,
     theme: { space }
   } = props;
 
   return css`
-    padding: ${isHorizontal ? `0 ${space.xxs}` : `${space.xxs} 0`};
+    padding: ${$isHorizontal ? `0 ${space.xxs}` : `${space.xxs} 0`};
   `;
 };
 

packages/draggable/src/styled/draggable/StyledDraggable.spec.tsx

@@ -24,19 +24,19 @@ describe('StyledDraggable', () => {
     });
 
     it('applies grabbing cursor when grabbed', () => {
-      const { container } = render(<StyledDraggable isGrabbed />);
+      const { container } = render(<StyledDraggable $isGrabbed />);
 
       expect(container.firstChild).toHaveStyle('cursor: grabbing');
     });
 
     it('applies default cursor when disabled', () => {
-      const { container } = render(<StyledDraggable isDisabled />);
+      const { container } = render(<StyledDraggable $isDisabled />);
 
       expect(container.firstChild).toHaveStyle('cursor: default');
     });
 
     it('applies default cursor when placeholder', () => {
-      const { container } = render(<StyledDraggable isPlaceholder />);
+      const { container } = render(<StyledDraggable $isPlaceholder />);
 
       expect(container.firstChild).toHaveStyle('cursor: default');
     });