fixes to prevent crash on empty color (#1003)

primer · Jul 9, 2024 · 9a5a422 · 9a5a422
1 parent 3656457
commit 9a5a422
Showing 1 changed file with 10 additions and 4 deletions.
diff --git 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 (