Super dirty but it is not possible to resolve the styled components b…

…reakpoints before the render
primer · Jun 10, 2024 · 350ab45 · 350ab45
1 parent 9d9f07f
commit 350ab45
Showing 1 changed file with 33 additions and 21 deletions.
diff --git a/packages/react/src/PageHeader/PageHeader.tsx b/packages/react/src/PageHeader/PageHeader.tsx
@@ -71,7 +71,7 @@ export type PageHeaderProps = React.PropsWithChildren<
 
 const Root = React.forwardRef(
   ({children, sx = {}, as = 'div', titleVariant = 'medium', ...rest}: PageHeaderProps, forwardedRef) => {
-    const [fontSize, setFontSize] = useState<string | null | number | string[]>(null)
+    // const [fontSize, setFontSize] = useState<string | null | number | string[]>(null)
     const currentVariant = useResponsiveValue(titleVariant, 'medium')
     const rootStyles = {
       display: 'grid',
@@ -91,7 +91,12 @@ const Root = React.forwardRef(
             height: `var(--custom-height, ${LARGE_TITLE_HEIGHT})`,
           },
         '[data-component="PH_Title"]': {
-          fontSize: fontSize ? fontSize : 'var(--custom-font-size, var(--text-title-size-large, 2rem))',
+          fontSize: [
+            'var(--custom-font-size-0, var(--text-title-size-large, 2rem))',
+            'var(--custom-font-size-1, var(--text-title-size-large, 2rem))',
+            'var(--custom-font-size-2, var(--text-title-size-large, 2rem))',
+            'var(--custom-font-size-3, var(--text-title-size-large, 2rem))',
+          ],
           lineHeight: 'var(--custom-line-height, var(--text-title-lineHeight-large, 1.5))', // calc(48/32)
           fontWeight: 'var(--custom-font-weight, var(--base-text-weight-normal, 400))',
         },
@@ -102,7 +107,12 @@ const Root = React.forwardRef(
             height: `var(--custom-height, ${MEDIUM_TITLE_HEIGHT})`,
           },
         '[data-component="PH_Title"]': {
-          fontSize: fontSize ? fontSize : 'var(--custom-font-size, var(--text-title-size-medium, 1.25rem))',
+          fontSize: [
+            'var(--custom-font-size-0, var(--text-title-size-medium, 1.25rem))',
+            'var(--custom-font-size-1, var(--text-title-size-medium, 1.25rem))',
+            'var(--custom-font-size-2, var(--text-title-size-medium, 1.25rem))',
+            'var(--custom-font-size-3, var(--text-title-size-medium, 1.25rem))',
+          ],
           lineHeight: 'var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6))', // calc(32/20)
           fontWeight: 'var(--custom-font-weight, var(--base-text-weight-semibold, 600))',
         },
@@ -113,7 +123,12 @@ const Root = React.forwardRef(
             height: `var(--custom-height, ${MEDIUM_TITLE_HEIGHT})`,
           },
         '[data-component="PH_Title"]': {
-          fontSize: fontSize ? fontSize : 'var(--custom-font-size, var(--text-title-size-medium, 1.25rem))',
+          fontSize: [
+            'var(--custom-font-size-0, var(--text-title-size-medium, 1.25rem))',
+            'var(--custom-font-size-1, var(--text-title-size-medium, 1.25rem))',
+            'var(--custom-font-size-2, var(--text-title-size-medium, 1.25rem))',
+            'var(--custom-font-size-3, var(--text-title-size-medium, 1.25rem))',
+          ],
           lineHeight: 'var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6))', // calc(32/20)
           fontWeight: 'var(--custom-font-weight, var(--base-text-weight-normal, 400))',
         },
@@ -143,22 +158,6 @@ const Root = React.forwardRef(
       // It is very unlikely to have a PageHeader without a TitleArea, but we still want to make sure we don't break the page if that happens.
       if (!titleArea) return
 
-      // find the title element
-      const title = Array.from(titleArea.children as HTMLCollection).find(child => {
-        return child instanceof HTMLElement && child.getAttribute('data-component') === 'PH_Title'
-      })
-
-      const styles = getComputedStyle(title as HTMLHeadingElement)
-
-      const customfontSize = styles.getPropertyValue('--custom-font-size')
-      // // This is cumbersome but needed to handle the array format of font-size
-      if (customfontSize.includes(',')) {
-        const values = customfontSize.split(',')
-        setFontSize(values)
-      } else {
-        setFontSize(customfontSize)
-      }
-
       for (const child of React.Children.toArray(children)) {
         if (React.isValidElement(child) && child.type === ContextArea) {
           setHasContextArea(true)
@@ -443,7 +442,20 @@ const Title: React.FC<React.PropsWithChildren<TitleProps>> = ({children, sx = {}
   const style: CSSCustomProperties = {}
   // @ts-ignore sxProp can have color attribute
   const {fontSize, lineHeight, fontWeight} = sx
-  if (fontSize) style['--custom-font-size'] = fontSize
+  if (fontSize) {
+    if (Array.isArray(fontSize)) {
+      // This is to handle styled components responsive break points. This is temporary fix.
+      style['--custom-font-size-0'] = fontSize[0]
+      style['--custom-font-size-1'] = fontSize[1]
+      style['--custom-font-size-2'] = fontSize[2]
+      style['--custom-font-size-3'] = fontSize[3]
+    } else {
+      style['--custom-font-size-0'] = fontSize
+      style['--custom-font-size-1'] = fontSize
+      style['--custom-font-size-2'] = fontSize
+      style['--custom-font-size-3'] = fontSize
+    }
+  }
   if (lineHeight) style['--custom-line-height'] = lineHeight
   if (fontWeight) style['--custom-font-weight'] = fontWeight