From 8912119a0133d5d95184bf9cf5e16b4407fb82be Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Mon, 3 Feb 2025 15:12:59 -0500 Subject: [PATCH 1/3] Prevent variable leak to styled components --- .storybook/preview.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/.storybook/preview.js b/.storybook/preview.js index 3c9f2283ddd..c21796558b3 100644 --- a/.storybook/preview.js +++ b/.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'] } }; From c8ea2d1b3b4148fa9512624045803d732bf9ac08 Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Mon, 3 Feb 2025 15:16:07 -0500 Subject: [PATCH 2/3] Fix font-size and use transient props --- packages/loaders/demo/dots.stories.mdx | 2 +- packages/loaders/src/elements/Dots.tsx | 2 +- packages/loaders/src/elements/Spinner.tsx | 2 +- .../src/styled/StyledLoadingPlaceholder.ts | 35 +++++++++++++++---- packages/loaders/src/styled/StyledSVG.ts | 26 ++++++++++++-- 5 files changed, 54 insertions(+), 13 deletions(-) diff --git a/packages/loaders/demo/dots.stories.mdx b/packages/loaders/demo/dots.stories.mdx index a574a7a3ff2..8e8092260c4 100644 --- a/packages/loaders/demo/dots.stories.mdx +++ b/packages/loaders/demo/dots.stories.mdx @@ -13,7 +13,7 @@ import README from '../README.md'; ( }); if (!delayComplete && delayMS !== 0) { - return  ; + return  ; } return ( diff --git a/packages/loaders/src/elements/Spinner.tsx b/packages/loaders/src/elements/Spinner.tsx index 2f07dc0a106..250b84328a8 100644 --- a/packages/loaders/src/elements/Spinner.tsx +++ b/packages/loaders/src/elements/Spinner.tsx @@ -66,7 +66,7 @@ export const Spinner = forwardRef( if (!delayComplete && delayMS !== 0) { return ( - +   ); diff --git a/packages/loaders/src/styled/StyledLoadingPlaceholder.ts b/packages/loaders/src/styled/StyledLoadingPlaceholder.ts index dead78f0e3e..1fbe23d6f48 100644 --- a/packages/loaders/src/styled/StyledLoadingPlaceholder.ts +++ b/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' })` display: inline-block; - width: ${props => props.width || '1em'}; - height: ${props => props.height || '0.9em'}; - font-size: ${props => props.fontSize}; + + ${sizeStyles}; ${componentStyles} `; diff --git a/packages/loaders/src/styled/StyledSVG.ts b/packages/loaders/src/styled/StyledSVG.ts index 4cc5560ac64..13501b3a771 100644 --- a/packages/loaders/src/styled/StyledSVG.ts +++ b/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,6 +27,27 @@ 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(props => ({ 'data-garden-version': PACKAGE_VERSION, xmlns: 'http://www.w3.org/2000/svg', @@ -33,9 +55,7 @@ export const StyledSVG = styled.svg.attrs(props => ({ viewBox: `0 0 ${props.$width} ${props.$height}`, role: 'img' }))` - width: ${props => props.$containerWidth || '1em'}; - height: ${props => props.$containerHeight || '0.9em'}; - font-size: ${props => props.$fontSize || 'inherit'}; + ${sizeStyles}; ${colorStyles}; From af3986b662e07279d945a3e643c4b0bfff519b74 Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Mon, 3 Feb 2025 15:32:38 -0500 Subject: [PATCH 3/3] Fix `Header.ItemWrapper` prop transfer to styled component --- packages/chrome/src/elements/header/HeaderItemWrapper.tsx | 4 +++- packages/chrome/src/styled/header/StyledHeaderItemWrapper.ts | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/chrome/src/elements/header/HeaderItemWrapper.tsx b/packages/chrome/src/elements/header/HeaderItemWrapper.tsx index c3315bdb85e..3e95c2608f0 100644 --- a/packages/chrome/src/elements/header/HeaderItemWrapper.tsx +++ b/packages/chrome/src/elements/header/HeaderItemWrapper.tsx @@ -15,7 +15,9 @@ import { StyledHeaderItemWrapper } from '../../styled'; * @extends HTMLAttributes */ export const HeaderItemWrapper = React.forwardRef( - (props, ref) => + ({ isRound, maxX, maxY, ...other }, ref) => ( + + ) ); HeaderItemWrapper.displayName = 'Header.ItemWrapper'; diff --git a/packages/chrome/src/styled/header/StyledHeaderItemWrapper.ts b/packages/chrome/src/styled/header/StyledHeaderItemWrapper.ts index d14dcd88e20..4595cd2e4a2 100644 --- a/packages/chrome/src/styled/header/StyledHeaderItemWrapper.ts +++ b/packages/chrome/src/styled/header/StyledHeaderItemWrapper.ts @@ -7,7 +7,7 @@ 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'; @@ -15,6 +15,6 @@ export const StyledHeaderItemWrapper = styled(StyledBaseHeaderItem as 'div').att 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION, as: 'div' -})` +})` ${componentStyles}; `;