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

.changeset/green-rice-clean.md

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

packages/react/src/Text/Text.test.tsx

@@ -6,7 +6,12 @@ import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
 
 describe('Text', () => {
-  behavesAsComponent({Component: Text})
+  behavesAsComponent({
+    Component: Text,
+    options: {
+      skipDisplayName: true,
+    },
+  })
 
   checkExports('Text', {
     default: Text,

packages/react/src/Text/Text.tsx

@@ -1,67 +1,25 @@
 import {clsx} from 'clsx'
-import styled, {type StyledComponent} from 'styled-components'
-import React, {forwardRef} from 'react'
+import React 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 classes from './Text.module.css'
-import type {ComponentProps} from '../utils/types'
 
-type StyledTextProps = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  as?: React.ComponentType<any> | keyof JSX.IntrinsicElements
+export type TextProps<As extends React.ElementType> = {
+  as?: As
   size?: 'large' | 'medium' | 'small'
   weight?: 'light' | 'normal' | 'medium' | 'semibold'
-} & SystemTypographyProps &
+} & DistributiveOmit<React.ComponentPropsWithRef<React.ElementType extends As ? 'span' : As>, 'as'> &
+  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};
-`
-
 const COMMON_PROP_NAMES = new Set(Object.keys(COMMON))
 const TYPOGRAPHY_PROP_NAMES = new Set(Object.keys(TYPOGRAPHY))
 
-const includesSystemProps = (props: StyledTextProps) => {
+function includesSystemProps<As extends React.ElementType>(props: TextProps<As>) {
   if (props.sx) {
     return true
   }
@@ -71,55 +29,47 @@ const includesSystemProps = (props: StyledTextProps) => {
   })
 }
 
-const Text = forwardRef(({as: Component = 'span', className, size, weight, ...props}, forwardedRef) => {
-  const enabled = useFeatureFlag('primer_react_css_modules_ga')
-
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function Text<As extends React.ElementType>(props: TextProps<As>, forwardedRef: React.ForwardedRef<any>) {
+  const {as: Component = 'span', className, size, weight, ...rest} = props
   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}
-        />
-      )
-    }
 
+  // If props includes TYPOGRAPHY or COMMON props, pass them to the Box component
+  if (includesSystemProps(rest)) {
     return (
-      <Component
+      <Box
+        as={Component}
         className={clsx(className, classes.Text)}
         data-size={size}
         data-weight={weight}
-        {...props}
-        // @ts-ignore shh
+        {...rest}
         ref={innerRef}
       />
     )
   }
 
   return (
-    <StyledText
-      as={Component}
-      className={className}
+    <Component
+      className={clsx(className, classes.Text)}
       data-size={size}
       data-weight={weight}
-      {...props}
-      // @ts-ignore shh
+      {...rest}
       ref={innerRef}
     />
   )
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-}) as StyledComponent<'span', any, StyledTextProps, never>
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+type FixedForwardRef = <T, P = {}>(
+  render: (props: P, ref: React.Ref<T>) => React.ReactNode,
+) => (props: P & React.RefAttributes<T>) => React.ReactNode
+
+const fixedForwardRef = React.forwardRef as FixedForwardRef
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type DistributiveOmit<T, TOmitted extends PropertyKey> = T extends any ? Omit<T, TOmitted> : never
 
 Text.displayName = 'Text'
 
-export type TextProps = ComponentProps<typeof StyledText>
-export default Text
+export default fixedForwardRef(Text)

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

@@ -944,39 +944,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 {
@@ -1475,7 +1444,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