fix(chrome,loaders): ferry props to view component transient props (#2007)

ensures the following are properly ferried to the underlying view components:
- `<Header.ItemWrapper isRound={...} maxX={...} maxY={...}>`
- `<Dots size={...}>`
- `<Spinner size={...}>`

Author: jzempel

.storybook/preview.js

@@ -15,13 +15,13 @@ const DARK = getColor({ theme: DARK_THEME, variable: 'background.default' });
 const LIGHT = getColor({ theme: DEFAULT_THEME, variable: 'background.default' });
 
 export const args = {
-  'colors.dark': DEFAULT_THEME.colors.variables.dark,
-  'colors.light': DEFAULT_THEME.colors.variables.light
+  '$colors.dark': DEFAULT_THEME.colors.variables.dark,
+  '$colors.light': DEFAULT_THEME.colors.variables.light
 };
 
 export const argTypes = {
-  'colors.dark': { table: { category: 'Variables' } },
-  'colors.light': { table: { category: 'Variables' } }
+  '$colors.dark': { name: 'colors.dark', table: { category: 'Variables' } },
+  '$colors.light': { name: 'colors.light', table: { category: 'Variables' } }
 };
 
 export const parameters = {
@@ -76,8 +76,8 @@ const withThemeProvider = (story, context) => {
     primaryHue: context.globals.primaryHue,
     variables: {
       ...DEFAULT_THEME.colors.variables,
-      dark: context.args['colors.dark'],
-      light: context.args['colors.light']
+      dark: context.args['$colors.dark'],
+      light: context.args['$colors.light']
     }
   };
 

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

@@ -15,7 +15,9 @@ import { StyledHeaderItemWrapper } from '../../styled';
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export const HeaderItemWrapper = React.forwardRef<HTMLDivElement, IHeaderItemWrapperProps>(
-  (props, ref) => <StyledHeaderItemWrapper ref={ref} {...props} />
+  ({ isRound, maxX, maxY, ...other }, ref) => (
+    <StyledHeaderItemWrapper ref={ref} $isRound={isRound} $maxX={maxX} $maxY={maxY} {...other} />
+  )
 );
 
 HeaderItemWrapper.displayName = 'Header.ItemWrapper';

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

@@ -7,14 +7,14 @@
 
 import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
-import { StyledBaseHeaderItem } from './StyledBaseHeaderItem';
+import { IStyledBaseHeaderItemProps, StyledBaseHeaderItem } from './StyledBaseHeaderItem';
 
 const COMPONENT_ID = 'chrome.header_item_wrapper';
 
 export const StyledHeaderItemWrapper = styled(StyledBaseHeaderItem as 'div').attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION,
   as: 'div'
-})`
+})<IStyledBaseHeaderItemProps>`
   ${componentStyles};
 `;

packages/loaders/demo/dots.stories.mdx

@@ -13,7 +13,7 @@ import README from '../README.md';
 <Canvas>
   <Story
     name="Dots"
-    argTypes={{ color: { control: 'color' }, size: { control: 'number' } }}
+    argTypes={{ color: { control: 'color' }, size: { control: 'text' } }}
     parameters={{
       design: {
         allowFullscreen: true,

packages/loaders/src/elements/Dots.tsx

@@ -56,7 +56,7 @@ export const Dots = forwardRef<SVGSVGElement, IDotsProps>(
     });
 
     if (!delayComplete && delayMS !== 0) {
-      return <StyledLoadingPlaceholder fontSize={size!}>&nbsp;</StyledLoadingPlaceholder>;
+      return <StyledLoadingPlaceholder $fontSize={size!}>&nbsp;</StyledLoadingPlaceholder>;
     }
 
     return (

packages/loaders/src/elements/Spinner.tsx

@@ -66,7 +66,7 @@ export const Spinner = forwardRef<SVGSVGElement, ISpinnerProps>(
 
     if (!delayComplete && delayMS !== 0) {
       return (
-        <StyledLoadingPlaceholder width="1em" height="1em" fontSize={size!}>
+        <StyledLoadingPlaceholder $width="1em" $height="1em" $fontSize={size!}>
           &nbsp;
         </StyledLoadingPlaceholder>
       );

packages/loaders/src/styled/StyledLoadingPlaceholder.ts

@@ -5,26 +5,47 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+import { getValueAndUnit } from 'polished';
 import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'loaders.loading_placeholder';
 
 interface IStyledLoadingPlaceholderProps {
-  fontSize: string | number;
-  width?: string;
-  height?: string;
+  $fontSize: string | number;
+  $width?: string;
+  $height?: string;
 }
 
+const sizeStyles = ({
+  $width = '1em',
+  $height = '0.9em',
+  $fontSize
+}: IStyledLoadingPlaceholderProps) => {
+  const [value, unit] = getValueAndUnit($fontSize);
+  let fontSize;
+
+  if (unit === undefined) {
+    fontSize = $fontSize;
+  } else {
+    fontSize = `${value}${unit === '' ? 'px' : unit}`;
+  }
+
+  return css`
+    width: ${$width};
+    height: ${$height};
+    font-size: ${fontSize};
+  `;
+};
+
 export const StyledLoadingPlaceholder = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION,
   role: 'progressbar'
 })<IStyledLoadingPlaceholderProps>`
   display: inline-block;
-  width: ${props => props.width || '1em'};
-  height: ${props => props.height || '0.9em'};
-  font-size: ${props => props.fontSize};
+
+  ${sizeStyles};
 
   ${componentStyles}
 `;

packages/loaders/src/styled/StyledSVG.ts

@@ -6,6 +6,7 @@
  */
 
 import styled, { css, DefaultTheme, ThemeProps } from 'styled-components';
+import { getValueAndUnit } from 'polished';
 import { getColor, componentStyles } from '@zendeskgarden/react-theming';
 
 interface IStyledSVGProps {
@@ -26,16 +27,35 @@ const colorStyles = ({ theme, $color = 'inherit' }: IStyledSVGProps & ThemeProps
   `;
 };
 
+const sizeStyles = ({
+  $containerWidth = '1em',
+  $containerHeight = '0.9em',
+  $fontSize = 'inherit'
+}: IStyledSVGProps) => {
+  const [value, unit] = getValueAndUnit($fontSize);
+  let fontSize;
+
+  if (unit === undefined) {
+    fontSize = $fontSize;
+  } else {
+    fontSize = `${value}${unit === '' ? 'px' : unit}`;
+  }
+
+  return css`
+    width: ${$containerWidth};
+    height: ${$containerHeight};
+    font-size: ${fontSize};
+  `;
+};
+
 export const StyledSVG = styled.svg.attrs<IStyledSVGProps>(props => ({
   'data-garden-version': PACKAGE_VERSION,
   xmlns: 'http://www.w3.org/2000/svg',
   focusable: 'false',
   viewBox: `0 0 ${props.$width} ${props.$height}`,
   role: 'img'
 }))<IStyledSVGProps>`
-  width: ${props => props.$containerWidth || '1em'};
-  height: ${props => props.$containerHeight || '0.9em'};
-  font-size: ${props => props.$fontSize || 'inherit'};
+  ${sizeStyles};
 
   ${colorStyles};