Fix whiteSpace prop for BaseStyles

primer · Dec 14, 2024 · ec5f0c6 · ec5f0c6
1 parent a990f91
commit ec5f0c6
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/packages/react/src/BaseStyles.tsx b/packages/react/src/BaseStyles.tsx
@@ -7,7 +7,7 @@ import {useTheme} from './ThemeProvider'
 import {useFeatureFlag} from './FeatureFlags'
 import Box from './Box'
 import type {SxProp} from './sx'
-import {includesSystemProps} from './utils/includeSystemProps'
+import {includesSystemProps, getTypographyAndCommonProps} from './utils/includeSystemProps'
 
 import classes from './BaseStyles.module.css'
 
@@ -47,7 +47,6 @@ export type BaseStylesProps = PropsWithChildren & {
   as?: React.ComponentType<any> | keyof JSX.IntrinsicElements
   className?: string
   style?: CSSProperties
-  color?: string // Fixes `color` ts error
 } & SystemTypographyProps &
   SystemCommonProps &
   SxProp
@@ -71,6 +70,7 @@ function BaseStyles(props: BaseStylesProps) {
 
     // If props includes TYPOGRAPHY or COMMON props, pass them to the Box component
     if (includesSystemProps(props)) {
+      const systemProps = getTypographyAndCommonProps(props)
       return (
         // @ts-ignore shh
         <Box
@@ -88,6 +88,7 @@ function BaseStyles(props: BaseStylesProps) {
           data-color-mode={colorScheme?.includes('dark') ? 'dark' : 'light'}
           data-light-theme={dayScheme}
           data-dark-theme={nightScheme}
+          style={systemProps}
           {...rest}
         >
           {children}

diff --git a/packages/react/src/__tests__/BaseStyles.test.tsx b/packages/react/src/__tests__/BaseStyles.test.tsx
@@ -33,14 +33,15 @@ describe('BaseStyles', () => {
 
   it('respects system props', () => {
     const {container} = render(
-      <BaseStyles display="contents" whiteSpace="pre-wrap">
+      <BaseStyles display="contents" whiteSpace="pre-wrap" mr="2">
         Hello
       </BaseStyles>,
     )
 
     expect(container.children[0]).toHaveStyle({
       display: 'contents',
       'white-space': 'pre-wrap',
+      'margin-right': '8px',
     })
   })
 

diff --git a/packages/react/src/utils/includeSystemProps.ts b/packages/react/src/utils/includeSystemProps.ts
@@ -1,4 +1,4 @@
-import {COMMON, TYPOGRAPHY} from '../constants'
+import {COMMON, TYPOGRAPHY, type SystemCommonProps, type SystemTypographyProps} from '../constants'
 import type {SxProp} from '../sx'
 
 const COMMON_PROP_NAMES = new Set(Object.keys(COMMON))
@@ -14,4 +14,18 @@ const includesSystemProps = (props: SxProp) => {
   })
 }
 
-export {includesSystemProps}
+type TypographyAndCommonProp = SystemTypographyProps & SystemCommonProps
+
+const getTypographyAndCommonProps = (props: TypographyAndCommonProp): TypographyAndCommonProp => {
+  let typographyAndCommonProps = {} as TypographyAndCommonProp
+  for (const prop of Object.keys(props)) {
+    if (TYPOGRAPHY_PROP_NAMES.has(prop) || COMMON_PROP_NAMES.has(prop)) {
+      const p = prop as keyof TypographyAndCommonProp
+      typographyAndCommonProps = {...typographyAndCommonProps, [p]: props[p]}
+    }
+  }
+
+  return typographyAndCommonProps
+}
+
+export {includesSystemProps, getTypographyAndCommonProps}