chore(Text): Remove the CSS modules feature flag from the Text component (#5868)

Co-authored-by: Jamie Shark <[email protected]>

Author: jonrohan

.changeset/ripe-paws-wave.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Remove the CSS modules feature flag from Text

packages/react/src/Text/Text.tsx

@@ -1,16 +1,11 @@
 import {clsx} from 'clsx'
-import styled, {type StyledComponent} from 'styled-components'
+import {type StyledComponent} from 'styled-components'
 import React, {forwardRef} from 'react'
 import type {SystemCommonProps, SystemTypographyProps} from '../constants'
-import {COMMON, TYPOGRAPHY} from '../constants'
 import type {SxProp} from '../sx'
-import sx from '../sx'
-import {useFeatureFlag} from '../FeatureFlags'
-import Box from '../Box'
 import {useRefObjectAsForwardedRef} from '../hooks'
-import type {ComponentProps} from '../utils/types'
-import {includesSystemProps} from '../utils/includeSystemProps'
 import classes from './Text.module.css'
+import {toggleSxComponent} from '../internal/utils/toggleSxComponent'
 
 type StyledTextProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -19,95 +14,30 @@ type StyledTextProps = {
   weight?: 'light' | 'normal' | 'medium' | 'semibold'
 } & SystemTypographyProps &
   SystemCommonProps &
-  SxProp
-
-const StyledText = styled.span<StyledTextProps>`
-  ${TYPOGRAPHY};
-  ${COMMON};
-
-  &:where([data-size='small']) {
-    font-size: var(--text-body-size-small, 0.75rem);
-    line-height: var(--text-body-lineHeight-small, 1.6666);
-  }
-
-  &:where([data-size='medium']) {
-    font-size: var(--text-body-size-medium, 0.875rem);
-    line-height: var(--text-body-lineHeight-medium, 1.4285);
-  }
-
-  &:where([data-size='large']) {
-    font-size: var(--text-body-size-large, 1rem);
-    line-height: var(--text-body-lineHeight-large, 1.5);
-  }
-
-  &:where([data-weight='light']) {
-    font-weight: var(--base-text-weight-light, 300);
-  }
-
-  &:where([data-weight='normal']) {
-    font-weight: var(--base-text-weight-normal, 400);
-  }
-
-  &:where([data-weight='medium']) {
-    font-weight: var(--base-text-weight-medium, 500);
-  }
-
-  &:where([data-weight='semibold']) {
-    font-weight: var(--base-text-weight-semibold, 600);
-  }
-
-  ${sx};
-`
+  SxProp &
+  React.HTMLAttributes<HTMLSpanElement>
 
+const TextBaseComponent = toggleSxComponent('span') as React.ComponentType<StyledTextProps>
 const Text = forwardRef(({as: Component = 'span', className, size, weight, ...props}, forwardedRef) => {
-  const enabled = useFeatureFlag('primer_react_css_modules_ga')
-
   const innerRef = React.useRef<HTMLElement>(null)
   useRefObjectAsForwardedRef(forwardedRef, innerRef)
-  if (enabled) {
-    // If props includes TYPOGRAPHY or COMMON props, pass them to the Box component
-    if (includesSystemProps(props)) {
-      return (
-        // @ts-ignore shh
-        <Box
-          as={Component}
-          className={clsx(className, classes.Text)}
-          data-size={size}
-          data-weight={weight}
-          {...props}
-          // @ts-ignore shh
-          ref={innerRef}
-        />
-      )
-    }
-
-    return (
-      <Component
-        className={clsx(className, classes.Text)}
-        data-size={size}
-        data-weight={weight}
-        {...props}
-        // @ts-ignore shh
-        ref={innerRef}
-      />
-    )
-  }
 
   return (
-    <StyledText
+    <TextBaseComponent
       as={Component}
-      className={className}
+      className={clsx(className, classes.Text)}
       data-size={size}
       data-weight={weight}
       {...props}
       // @ts-ignore shh
       ref={innerRef}
     />
   )
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 }) as StyledComponent<'span', any, StyledTextProps, never>
 
 Text.displayName = 'Text'
 
-export type TextProps = ComponentProps<typeof StyledText>
+export type TextProps = StyledTextProps
 export default Text

packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap

@@ -935,39 +935,8 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 }
 
 .c9 {
-  font-size: 16px;
   color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
-}
-
-.c9:where([data-size='small']) {
-  font-size: var(--text-body-size-small,0.75rem);
-  line-height: var(--text-body-lineHeight-small,1.6666);
-}
-
-.c9:where([data-size='medium']) {
-  font-size: var(--text-body-size-medium,0.875rem);
-  line-height: var(--text-body-lineHeight-medium,1.4285);
-}
-
-.c9:where([data-size='large']) {
-  font-size: var(--text-body-size-large,1rem);
-  line-height: var(--text-body-lineHeight-large,1.5);
-}
-
-.c9:where([data-weight='light']) {
-  font-weight: var(--base-text-weight-light,300);
-}
-
-.c9:where([data-weight='normal']) {
-  font-weight: var(--base-text-weight-normal,400);
-}
-
-.c9:where([data-weight='medium']) {
-  font-weight: var(--base-text-weight-medium,500);
-}
-
-.c9:where([data-weight='semibold']) {
-  font-weight: var(--base-text-weight-semibold,600);
+  font-size: 16px;
 }
 
 .c7 {
@@ -1465,7 +1434,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
       </span>
     </span>
     <span
-      className="c9"
+      className="c9 Text"
       color="fg.muted"
       fontSize={2}
     >

packages/react/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap

@@ -2,43 +2,12 @@
 
 exports[`has default theme 1`] = `
 .c0 {
-  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   margin-bottom: 4px;
-}
-
-.c0:where([data-size='small']) {
-  font-size: var(--text-body-size-small,0.75rem);
-  line-height: var(--text-body-lineHeight-small,1.6666);
-}
-
-.c0:where([data-size='medium']) {
-  font-size: var(--text-body-size-medium,0.875rem);
-  line-height: var(--text-body-lineHeight-medium,1.4285);
-}
-
-.c0:where([data-size='large']) {
-  font-size: var(--text-body-size-large,1rem);
-  line-height: var(--text-body-lineHeight-large,1.5);
-}
-
-.c0:where([data-weight='light']) {
-  font-weight: var(--base-text-weight-light,300);
-}
-
-.c0:where([data-weight='normal']) {
-  font-weight: var(--base-text-weight-normal,400);
-}
-
-.c0:where([data-weight='medium']) {
-  font-weight: var(--base-text-weight-medium,500);
-}
-
-.c0:where([data-weight='semibold']) {
-  font-weight: var(--base-text-weight-semibold,600);
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 <span
-  class="c0"
+  class="c0 Text"
   color="fg.default"
 >
   Hello

packages/react/src/internal/utils/toggleSxComponent.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import Box from '../../Box'
 import {defaultSxProp} from '../../utils/defaultSxProp'
+import {includesSystemProps} from '../../utils/includeSystemProps'
 
 type CSSModulesProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -23,7 +24,7 @@ export function toggleSxComponent<T, P extends CSSModulesProps>(
     {as: BaseComponent = defaultAs, sx: sxProp = defaultSxProp, ...rest},
     ref,
   ) {
-    if (sxProp !== defaultSxProp) {
+    if (sxProp !== defaultSxProp || includesSystemProps(rest)) {
       return <Box as={BaseComponent} {...rest} sx={sxProp} ref={ref} />
     }
     return <BaseComponent {...rest} ref={ref} />