refactor(colorpickers, grid, loaders, notifications, tags, tooltips): use transient props where appropriate (#1968)

Author: ze-flo

packages/.template/src/styled/Styled{{capitalize component}}.ts

@@ -28,7 +28,7 @@ const colorStyles = (props: IStyled{{capitalize component}}Props) => {
     background-color: ${backgroundColor};
     color: ${foregroundColor};
 
-    :hover {
+    &:hover {
       background-color: ${hoverBackgroundColor};
     }
 
@@ -65,7 +65,7 @@ export const Styled{{capitalize component}} = styled.div.attrs<IStyled{{capitali
 
   ${props => sizeStyles(props)};
 
-  :focus {
+  &:focus {
     outline: none;
   }
 

packages/avatars/src/elements/Avatar.tsx

@@ -21,15 +21,16 @@ import { Text } from './components/Text';
 const AvatarComponent = forwardRef<HTMLElement, IAvatarProps>(
   (
     {
+      backgroundColor,
+      badge,
+      children,
+      foregroundColor,
       isSystem,
       size,
       status,
-      children,
-      badge,
+      statusLabel,
       surfaceColor,
-      backgroundColor,
-      foregroundColor,
-      ...props
+      ...other
     },
     ref
   ) => {
@@ -59,9 +60,9 @@ const AvatarComponent = forwardRef<HTMLElement, IAvatarProps>(
     }, [computedStatus, badge]);
 
     const shouldValidate = computedStatus !== undefined;
-    const statusLabel = useText(
+    const ariaLabel = useText(
       AvatarComponent,
-      props,
+      { statusLabel },
       'statusLabel',
       defaultStatusLabel,
       shouldValidate
@@ -78,15 +79,15 @@ const AvatarComponent = forwardRef<HTMLElement, IAvatarProps>(
         $foregroundColor={foregroundColor}
         aria-atomic="true"
         aria-live="polite"
-        {...props}
+        {...other}
       >
         {Children.only(children)}
         {!!computedStatus && (
           <StyledStatusIndicator
             $size={size}
             $type={computedStatus}
             $surfaceColor={surfaceColor}
-            aria-label={statusLabel}
+            aria-label={ariaLabel}
             as="figcaption"
           >
             {computedStatus === 'active' ? (

packages/chrome/src/styled/body/StyledMain.tsx

@@ -19,7 +19,7 @@ export const StyledMain = styled.main.attrs({
   background-color: ${props => getColor({ theme: props.theme, variable: 'background.default' })};
   overflow: auto;
 
-  :focus {
+  &:focus {
     outline: none;
   }
 

packages/colorpickers/src/elements/ColorPicker/ColorWell.tsx

@@ -97,8 +97,8 @@ export const ColorWell: React.FC<IColorWellProps> = React.memo(
         onMouseDown={handleMouseDown}
       >
         <StyledColorWellThumb
-          top={mouseActiveRef.current ? topFromMouse : topPosition}
-          left={mouseActiveRef.current ? leftFromMouse : leftPosition}
+          $top={mouseActiveRef.current ? topFromMouse : topPosition}
+          $left={mouseActiveRef.current ? leftFromMouse : leftPosition}
         />
       </StyledColorWell>
     );

packages/colorpickers/src/styled/ColorPicker/StyledColorWellThumb.ts

@@ -12,8 +12,8 @@ import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'
 const COMPONENT_ID = 'colorpickers.colorpicker_colorwell_thumb';
 
 interface IStyledSaturationPointerProps {
-  top: number;
-  left: number;
+  $top: number;
+  $left: number;
 }
 
 const colorStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
@@ -45,8 +45,8 @@ export const StyledColorWellThumb = styled.div.attrs<IStyledSaturationPointerPro
   'data-garden-version': PACKAGE_VERSION,
   'data-test-id': 'colorwell-thumb',
   style: {
-    top: `${props.top}%`,
-    left: `${props.left}%`
+    top: `${props.$top}%`,
+    left: `${props.$left}%`
   }
 }))<IStyledSaturationPointerProps>`
   position: absolute;

packages/colorpickers/src/styled/ColorPicker/StyledHexField.ts

@@ -17,7 +17,7 @@ const COMPONENT_ID = 'colorpickers.colorpicker_hex_field';
 export const StyledHexField = styled(Field as unknown as 'div').attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION,
-  spellcheck: false
+  spellCheck: false
 })`
   display: flex;
   flex-basis: 0; /* [1] */

packages/datepickers/src/styled/StyledHeaderPaddle.ts

@@ -56,12 +56,12 @@ const colorStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
   return css`
     color: ${foreground};
 
-    :hover {
+    &:hover {
       background-color: ${backgroundHover};
       color: ${foregroundHover};
     }
 
-    :active {
+    &:active {
       background-color: ${backgroundActive};
       color: ${foregroundActive};
     }

packages/dropdowns.legacy/src/elements/Autocomplete/Autocomplete.tsx

@@ -111,7 +111,7 @@ export const Autocomplete = forwardRef<HTMLDivElement, IAutocompleteProps>(
             {!isOpen && <StyledSelect>{children}</StyledSelect>}
             <StyledInput
               {...getInputProps({
-                isHidden: !isOpen,
+                $isHidden: !isOpen,
                 disabled: props.disabled,
                 onFocus: () => {
                   setIsFocused(true);

packages/dropdowns.legacy/src/elements/Menu/Items/HeaderIcon.tsx

@@ -7,16 +7,13 @@
 
 import React, { HTMLAttributes } from 'react';
 import { StyledHeaderIcon } from '../../../styled';
-import useMenuContext from '../../../utils/useMenuContext';
 
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export const HeaderIcon = React.forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   (props, ref) => {
-    const { isCompact } = useMenuContext();
-
-    return <StyledHeaderIcon ref={ref} isCompact={isCompact} {...props} />;
+    return <StyledHeaderIcon ref={ref} {...props} />;
   }
 );
 

packages/dropdowns.legacy/src/elements/Multiselect/Multiselect.tsx

@@ -373,7 +373,7 @@ export const Multiselect = React.forwardRef<HTMLDivElement, IMultiselectProps>(
                       }
                     }
                   },
-                  isVisible: isFocused || inputValue || selectedItems.length === 0,
+                  $isVisible: isFocused || inputValue || selectedItems.length === 0,
                   isCompact: props.isCompact,
                   role: 'combobox',
                   ref: mergeRefs([inputRef, externalInputRef]),