refactor(chrome): use transient props where applicable

packages/chrome/src/elements/SkipNav.tsx

@@ -15,7 +15,7 @@ import { StyledSkipNav, StyledSkipNavIcon } from '../styled';
  */
 export const SkipNav = React.forwardRef<HTMLAnchorElement, ISkipNavProps>(
   ({ targetId, zIndex, children, ...props }, ref) => (
-    <StyledSkipNav href={`#${targetId}`} zIndex={zIndex} ref={ref} {...props}>
+    <StyledSkipNav href={`#${targetId}`} $zIndex={zIndex} ref={ref} {...props}>
       <StyledSkipNavIcon />
       {children}
     </StyledSkipNav>

packages/chrome/src/elements/body/Content.tsx

@@ -16,7 +16,7 @@ export const Content = React.forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEl
   (props, ref) => {
     const { hasFooter } = useBodyContext() || {};
 
-    return <StyledContent ref={ref} hasFooter={hasFooter} {...props} />;
+    return <StyledContent ref={ref} $hasFooter={hasFooter} {...props} />;
   }
 );
 

packages/chrome/src/elements/header/Header.tsx

@@ -14,9 +14,11 @@ import { HeaderItemIcon } from './HeaderItemIcon';
 import { HeaderItemText } from './HeaderItemText';
 import { HeaderItemWrapper } from './HeaderItemWrapper';
 
-export const HeaderComponent = React.forwardRef<HTMLElement, IHeaderProps>((props, ref) => (
-  <StyledHeader ref={ref} {...props} />
-));
+export const HeaderComponent = React.forwardRef<HTMLElement, IHeaderProps>(
+  ({ isStandalone, ...rest }, ref) => (
+    <StyledHeader ref={ref} $isStandalone={isStandalone} {...rest} />
+  )
+);
 
 HeaderComponent.displayName = 'Header';
 

packages/chrome/src/elements/header/HeaderItem.tsx

@@ -16,12 +16,21 @@ import { StyledHeaderItem, StyledLogoHeaderItem } from '../../styled';
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
 export const HeaderItem = React.forwardRef<HTMLButtonElement, IHeaderItemProps>(
-  ({ hasLogo, product, ...other }, ref) => {
+  ({ hasLogo, isRound, maxX, maxY, product, ...rest }, ref) => {
     if (hasLogo) {
-      return <StyledLogoHeaderItem ref={ref} product={product} {...other} />;
+      return (
+        <StyledLogoHeaderItem
+          ref={ref}
+          $isRound={isRound}
+          $maxX={maxX}
+          $maxY={maxY}
+          $product={product}
+          {...rest}
+        />
+      );
     }
 
-    return <StyledHeaderItem ref={ref} {...other} />;
+    return <StyledHeaderItem ref={ref} $isRound={isRound} $maxX={maxX} $maxY={maxY} {...rest} />;
   }
 );
 

packages/chrome/src/elements/header/HeaderItemText.tsx

@@ -15,9 +15,11 @@ import { StyledHeaderItemText } from '../../styled';
  *
  * @extends HTMLAttributes<HTMLSpanElement>
  */
-export const HeaderItemText = React.forwardRef<HTMLElement, IHeaderItemTextProps>((props, ref) => (
-  <StyledHeaderItemText ref={ref} {...props} />
-));
+export const HeaderItemText = React.forwardRef<HTMLElement, IHeaderItemTextProps>(
+  ({ isClipped, ...rest }, ref) => (
+    <StyledHeaderItemText ref={ref} $isClipped={isClipped} {...rest} />
+  )
+);
 
 HeaderItemText.displayName = 'Header.ItemText';
 

packages/chrome/src/elements/nav/Nav.tsx

@@ -17,23 +17,25 @@ import { NavItemIcon } from './NavItemIcon';
 import { NavItemText } from './NavItemText';
 import { NavList } from './NavList';
 
-export const NavComponent = React.forwardRef<HTMLElement, INavProps>((props, ref) => {
-  const { hue, isLight } = useChromeContext();
-  const navContextValue = useMemo(() => ({ isExpanded: !!props.isExpanded }), [props.isExpanded]);
+export const NavComponent = React.forwardRef<HTMLElement, INavProps>(
+  ({ isExpanded, ...rest }, ref) => {
+    const { hue, isLight } = useChromeContext();
+    const navContextValue = useMemo(() => ({ isExpanded: !!isExpanded }), [isExpanded]);
 
-  return (
-    <ThemeProvider
-      theme={parentTheme => ({
-        ...parentTheme,
-        colors: { ...parentTheme.colors, base: isLight ? 'light' : 'dark' }
-      })}
-    >
-      <NavContext.Provider value={navContextValue}>
-        <StyledNav ref={ref} {...props} hue={hue} />
-      </NavContext.Provider>
-    </ThemeProvider>
-  );
-});
+    return (
+      <ThemeProvider
+        theme={parentTheme => ({
+          ...parentTheme,
+          colors: { ...parentTheme.colors, base: isLight ? 'light' : 'dark' }
+        })}
+      >
+        <NavContext.Provider value={navContextValue}>
+          <StyledNav ref={ref} $isExpanded={isExpanded} $hue={hue} {...rest} />
+        </NavContext.Provider>
+      </ThemeProvider>
+    );
+  }
+);
 
 NavComponent.displayName = 'Nav';
 

packages/chrome/src/elements/nav/NavItem.tsx

@@ -32,16 +32,16 @@ export const NavItem = React.forwardRef<HTMLButtonElement, INavItemProps>(
     let retVal;
 
     if (hasLogo) {
-      retVal = <StyledLogoNavItem ref={ref} hue={hue} product={product} {...other} />;
+      retVal = <StyledLogoNavItem ref={ref} $hue={hue} $product={product} {...other} />;
     } else if (hasBrandmark) {
       retVal = <StyledBrandmarkNavItem ref={ref} {...other} />;
     } else {
       retVal = (
         <StyledNavButton
           tabIndex={0}
           ref={ref}
-          isExpanded={isExpanded}
-          hue={hue}
+          $isExpanded={isExpanded}
+          $hue={hue}
           aria-current={isCurrent || undefined}
           {...other}
         />

packages/chrome/src/elements/nav/NavItemText.tsx

@@ -16,11 +16,15 @@ import { useNavContext } from '../../utils/useNavContext';
  *
  * @extends HTMLAttributes<HTMLSpanElement>
  */
-export const NavItemText = React.forwardRef<HTMLElement, INavItemTextProps>((props, ref) => {
-  const { isExpanded } = useNavContext();
+export const NavItemText = React.forwardRef<HTMLElement, INavItemTextProps>(
+  ({ isWrapped, ...rest }, ref) => {
+    const { isExpanded } = useNavContext();
 
-  return <StyledNavItemText ref={ref} isExpanded={isExpanded} {...props} />;
-});
+    return (
+      <StyledNavItemText ref={ref} $isExpanded={isExpanded} $isWrapped={isWrapped} {...rest} />
+    );
+  }
+);
 
 NavItemText.displayName = 'Nav.ItemText';
 

packages/chrome/src/elements/sheet/Sheet.tsx

@@ -52,10 +52,10 @@ const SheetComponent = React.forwardRef<HTMLElement, ISheetProps>(
       <SheetContext.Provider value={sheetContext}>
         <StyledSheet
           inert={isOpen ? undefined : ''}
-          isOpen={isOpen}
-          isAnimated={isAnimated}
-          placement={placement}
-          size={size}
+          $isOpen={isOpen}
+          $isAnimated={isAnimated}
+          $placement={placement}
+          $size={size}
           tabIndex={-1}
           id={idPrefix}
           aria-labelledby={titleId}
@@ -64,10 +64,10 @@ const SheetComponent = React.forwardRef<HTMLElement, ISheetProps>(
           {...props}
         >
           <StyledSheetWrapper
-            isOpen={isOpen}
-            isAnimated={isAnimated}
-            placement={placement}
-            size={size}
+            $isOpen={isOpen}
+            $isAnimated={isAnimated}
+            $placement={placement}
+            $size={size}
           >
             {children}
           </StyledSheetWrapper>

packages/chrome/src/elements/sheet/components/Footer.tsx

@@ -9,8 +9,8 @@ import React, { forwardRef } from 'react';
 import { ISheetFooterProps } from '../../../types';
 import { StyledSheetFooter } from '../../../styled';
 
-const SheetFooter = forwardRef<HTMLElement, ISheetFooterProps>((props, ref) => {
-  return <StyledSheetFooter ref={ref} {...props} />;
+const SheetFooter = forwardRef<HTMLElement, ISheetFooterProps>(({ isCompact, ...rest }, ref) => {
+  return <StyledSheetFooter ref={ref} $isCompact={isCompact} {...rest} />;
 });
 
 SheetFooter.displayName = 'Sheet.Footer';

packages/chrome/src/elements/sheet/components/Header.tsx

@@ -13,7 +13,7 @@ import { useSheetContext } from '../../../utils/useSheetContext';
 const SheetHeader = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>((props, ref) => {
   const { isCloseButtonPresent } = useSheetContext();
 
-  return <StyledSheetHeader ref={ref} isCloseButtonPresent={isCloseButtonPresent} {...props} />;
+  return <StyledSheetHeader ref={ref} $isCloseButtonPresent={isCloseButtonPresent} {...props} />;
 });
 
 SheetHeader.displayName = 'Sheet.Header';

packages/chrome/src/styled/StyledSkipNav.ts

@@ -90,7 +90,7 @@ const sizeStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
 };
 
 interface IStyledSkipNavProps {
-  zIndex?: number;
+  $zIndex?: number;
 }
 
 /*
@@ -109,7 +109,7 @@ export const StyledSkipNav = styled.a.attrs({
   justify-content: center;
   transform: translateX(-50%);
   direction: ${props => props.theme.rtl && 'rtl'};
-  z-index: ${props => props.zIndex};
+  z-index: ${props => props.$zIndex};
   border-radius: ${props => props.theme.borderRadii.md};
   text-decoration: underline;
   white-space: nowrap;

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

@@ -13,12 +13,12 @@ import { getFooterHeight, getHeaderHeight } from '../utils';
 const COMPONENT_ID = 'chrome.content';
 
 interface IStyledContentProps {
-  hasFooter?: boolean;
+  $hasFooter?: boolean;
 }
 
-const sizeStyles = ({ theme, hasFooter }: IStyledContentProps & ThemeProps<DefaultTheme>) => {
+const sizeStyles = ({ theme, $hasFooter }: IStyledContentProps & ThemeProps<DefaultTheme>) => {
   const fontSize = theme.fontSizes.md;
-  const height = hasFooter
+  const height = $hasFooter
     ? `calc(100% - ${math(`${getHeaderHeight(theme)} + ${getFooterHeight(theme)}`)})`
     : `calc(100% - ${getHeaderHeight(theme)})`;
   const lineHeight = getLineHeight(theme.lineHeights.md, theme.fontSizes.md);

packages/chrome/src/styled/header/StyledBaseHeaderItem.ts

@@ -12,29 +12,29 @@ import { getHeaderItemSize } from '../utils';
 const COMPONENT_ID = 'chrome.base_header_item';
 
 export interface IStyledBaseHeaderItemProps {
-  maxX?: boolean;
-  maxY?: boolean;
-  isRound?: boolean;
+  $maxX?: boolean;
+  $maxY?: boolean;
+  $isRound?: boolean;
 }
 
 /*
  * 1. Button element reset
  */
 const sizeStyles = ({
   theme,
-  maxY,
-  isRound
+  $maxY,
+  $isRound
 }: IStyledBaseHeaderItemProps & ThemeProps<DefaultTheme>) => {
   const margin = `0 ${theme.space.base * 3}px`;
   const size = getHeaderItemSize(theme);
-  const height = maxY ? '100%' : size;
+  const height = $maxY ? '100%' : size;
   const lineHeight = getLineHeight(size, theme.fontSizes.md);
   const padding = `0 ${theme.space.base * 0.75}px`;
   let borderRadius;
 
-  if (isRound) {
+  if ($isRound) {
     borderRadius = '100%';
-  } else if (maxY) {
+  } else if ($maxY) {
     borderRadius = '0';
   } else {
     borderRadius = theme.borderRadii.md;
@@ -61,9 +61,9 @@ export const StyledBaseHeaderItem = styled.button.attrs({
 })<IStyledBaseHeaderItemProps>`
   display: inline-flex;
   position: relative;
-  flex: ${props => props.maxX && '1'};
+  flex: ${props => props.$maxX && '1'};
   align-items: center;
-  justify-content: ${props => (props.maxX ? 'start' : 'center')};
+  justify-content: ${props => (props.$maxX ? 'start' : 'center')};
   order: 1;
   transition:
     box-shadow 0.1s ease-in-out,

packages/chrome/src/styled/header/StyledHeader.ts

@@ -13,14 +13,14 @@ import { getHeaderHeight } from '../utils';
 const COMPONENT_ID = 'chrome.header';
 
 export interface IStyledHeaderProps {
-  isStandalone?: boolean;
+  $isStandalone?: boolean;
 }
 
-const colorStyles = ({ theme, isStandalone }: IStyledHeaderProps & ThemeProps<DefaultTheme>) => {
+const colorStyles = ({ theme, $isStandalone }: IStyledHeaderProps & ThemeProps<DefaultTheme>) => {
   const backgroundColor = getColor({ theme, variable: 'background.default' });
   const borderColor = getColor({ theme, variable: 'border.default' });
   const boxShadowColor = getColor({ variable: 'shadow.small', theme });
-  const boxShadow = isStandalone
+  const boxShadow = $isStandalone
     ? theme.shadows.lg('0', `${theme.space.base * 2}px`, boxShadowColor)
     : undefined;
   const foregroundColor = getColor({ theme, variable: 'foreground.subtle' });
@@ -53,7 +53,7 @@ export const StyledHeader = styled.header.attrs<IStyledHeaderProps>({
   'data-garden-version': PACKAGE_VERSION
 })<IStyledHeaderProps>`
   display: flex;
-  position: ${props => props.isStandalone && 'relative'};
+  position: ${props => props.$isStandalone && 'relative'};
   align-items: center;
   justify-content: flex-end;
 
@@ -62,7 +62,7 @@ export const StyledHeader = styled.header.attrs<IStyledHeaderProps>({
   ${colorStyles};
 
   ${StyledLogoHeaderItem} {
-    display: ${props => props.isStandalone && 'inline-flex'};
+    display: ${props => props.$isStandalone && 'inline-flex'};
   }
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};

packages/chrome/src/styled/header/StyledHeaderItem.ts

@@ -18,7 +18,7 @@ const COMPONENT_ID = 'chrome.header_item';
 /*
  * 1. Anchor reset.
  */
-const colorStyles = ({ theme, maxY }: IStyledBaseHeaderItemProps & ThemeProps<DefaultTheme>) => {
+const colorStyles = ({ theme, $maxY }: IStyledBaseHeaderItemProps & ThemeProps<DefaultTheme>) => {
   const options = { theme, variable: 'foreground.subtle' };
   const hoverColor = getColor({ ...options, dark: { offset: -100 }, light: { offset: 100 } });
   const activeColor = getColor({ ...options, dark: { offset: -200 }, light: { offset: 200 } });
@@ -29,7 +29,7 @@ const colorStyles = ({ theme, maxY }: IStyledBaseHeaderItemProps & ThemeProps<De
       color: inherit; /* [1] */
     }
 
-    ${focusStyles({ theme, inset: maxY })};
+    ${focusStyles({ theme, inset: $maxY })};
 
     /* prettier-ignore */
     &:hover ${StyledHeaderItemIcon},
@@ -45,8 +45,8 @@ const colorStyles = ({ theme, maxY }: IStyledBaseHeaderItemProps & ThemeProps<De
   `;
 };
 
-const sizeStyles = ({ theme, isRound }: IStyledBaseHeaderItemProps & ThemeProps<DefaultTheme>) => {
-  const iconBorderRadius = isRound ? '100px' : undefined;
+const sizeStyles = ({ theme, $isRound }: IStyledBaseHeaderItemProps & ThemeProps<DefaultTheme>) => {
+  const iconBorderRadius = $isRound ? '100px' : undefined;
   const imageBorderRadius = math(`${theme.borderRadii.md} - 1`);
   const imageSize = math(`${getHeaderItemSize(theme)} - ${theme.space.base * 2}`);
 

packages/chrome/src/styled/header/StyledHeaderItemText.ts

@@ -12,7 +12,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'chrome.header_item_text';
 
 export interface IStyledHeaderItemTextProps {
-  isClipped?: boolean;
+  $isClipped?: boolean;
 }
 
 export const StyledHeaderItemText = styled.span.attrs<IStyledHeaderItemTextProps>({
@@ -21,7 +21,7 @@ export const StyledHeaderItemText = styled.span.attrs<IStyledHeaderItemTextProps
 })<IStyledHeaderItemTextProps>`
   margin: ${props => `0 ${props.theme.space.base * 0.75}px`};
 
-  ${props => props.isClipped && hideVisually()}
+  ${props => props.$isClipped && hideVisually()}
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;

packages/chrome/src/styled/header/StyledLogoHeaderItem.ts

@@ -17,13 +17,16 @@ import { getNavWidth, getProductColor } from '../utils';
 const COMPONENT_ID = 'chrome.header_item';
 
 export interface IStyledLogoHeaderItemProps {
-  product?: Product;
+  $product?: Product;
 }
 
-const colorStyles = ({ theme, product }: IStyledLogoHeaderItemProps & ThemeProps<DefaultTheme>) => {
+const colorStyles = ({
+  theme,
+  $product
+}: IStyledLogoHeaderItemProps & ThemeProps<DefaultTheme>) => {
   const borderColor = getColor({ theme, variable: 'border.default' });
   const fill = getColor({ theme, variable: 'foreground.default' });
-  const color = getProductColor(product, fill /* fallback */);
+  const color = getProductColor($product, fill /* fallback */);
 
   return css`
     border-${theme.rtl ? 'left' : 'right'}-color: ${borderColor};