From 9a5a422f9c4d6510deb557d3c09e79562f9181ae Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Tue, 9 Jul 2024 18:34:47 +0200 Subject: [PATCH] fixes to prevent crash on empty color (#1003) --- .../CSSTokenSwatch/CSSTokenSwatch.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/docs/storybook/stories/StorybookComponents/CSSTokenSwatch/CSSTokenSwatch.tsx b/docs/storybook/stories/StorybookComponents/CSSTokenSwatch/CSSTokenSwatch.tsx index 6ada295eb..39bebf4a3 100644 --- a/docs/storybook/stories/StorybookComponents/CSSTokenSwatch/CSSTokenSwatch.tsx +++ b/docs/storybook/stories/StorybookComponents/CSSTokenSwatch/CSSTokenSwatch.tsx @@ -13,9 +13,15 @@ const hexHasChanged = (hex: string, prevColor?: string) => { if (prevColor === undefined) { return '' } - const prevHex = toHex( - `${getComputedStyle(document.documentElement).getPropertyValue(`--${prevColor}`)}`.replace(/ /g, ''), + const prevHexProperty = `${getComputedStyle(document.documentElement).getPropertyValue(`--${prevColor}`)}`.replace( + / /g, + '', ) + if (prevHexProperty === undefined || prevHexProperty === '') { + return '' + } + + const prevHex = toHex(prevHexProperty) return prevHex !== hex } @@ -31,10 +37,10 @@ export const CSSTokenSwatch = ({color, prevColor, shadow}: CSSTokenSwatchProps) const style = getComputedStyle(ref.current) const rgb = style.getPropertyValue('background-color') - setHex(toHex(rgb)) + setHex(rgb && rgb !== '' ? toHex(rgb) : null) }, [color]) - if (color === undefined) { + if (color === undefined || color === '') { return null } return (