diff --git a/.changeset/wet-apples-hide.md b/.changeset/wet-apples-hide.md new file mode 100644 index 00000000000..6aeb72adb44 --- /dev/null +++ b/.changeset/wet-apples-hide.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Correctly pass styled system typography and common props to the `Box` component in the `Text` component when the CSS modules feature flag is enabled. diff --git a/packages/react/src/Text/Text.tsx b/packages/react/src/Text/Text.tsx index 3f7ee333b97..9bad8d5d923 100644 --- a/packages/react/src/Text/Text.tsx +++ b/packages/react/src/Text/Text.tsx @@ -58,14 +58,27 @@ const StyledText = styled.span` ${sx}; ` +const COMMON_PROP_NAMES = new Set(Object.keys(COMMON)) +const TYPOGRAPHY_PROP_NAMES = new Set(Object.keys(TYPOGRAPHY)) + +const includesSystemProps = (props: StyledTextProps) => { + if (props.sx) { + return true + } + + return Object.keys(props).some(prop => { + return TYPOGRAPHY_PROP_NAMES.has(prop) || COMMON_PROP_NAMES.has(prop) + }) +} + const Text = forwardRef(({as: Component = 'span', className, size, weight, ...props}, forwardedRef) => { const enabled = useFeatureFlag('primer_react_css_modules_ga') const innerRef = React.useRef(null) useRefObjectAsForwardedRef(forwardedRef, innerRef) - if (enabled) { - if (props.sx) { + // If props includes TYPOGRAPHY or COMMON props, pass them to the Box component + if (includesSystemProps(props)) { return ( // @ts-ignore shh