refactor(Text): Text component to use CSS modules behind primer_react_css_modules_team feature flag (#4874)

* refactor(Text): To CSS modules behind primer_react_css_modules_team feature flag

* Create tidy-clocks-marry.md

* Adjust playground argtypes for tsc

* Make this minor release

Author: jonrohan

.changeset/tidy-clocks-marry.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Refactor `Text` to CSS modules behind primer_react_css_modules_team feature flag

e2e/components/Text.test.ts

@@ -44,6 +44,25 @@ test.describe('Text', () => {
       test('default @vrt', async ({page}) => {
         await visit(page, {
           id: story.id,
+          globals: {
+            featureFlags: {
+              primer_react_css_modules_team: true,
+            },
+          },
+        })
+
+        // Default state
+        expect(await page.screenshot()).toMatchSnapshot(`Text.${story.title}.png`)
+      })
+
+      test('default (styled-system) @vrt', async ({page}) => {
+        await visit(page, {
+          id: story.id,
+          globals: {
+            featureFlags: {
+              primer_react_css_modules_team: false,
+            },
+          },
         })
 
         // Default state
@@ -53,6 +72,23 @@ test.describe('Text', () => {
       test('axe @aat', async ({page}) => {
         await visit(page, {
           id: story.id,
+          globals: {
+            featureFlags: {
+              primer_react_css_modules_team: true,
+            },
+          },
+        })
+        await expect(page).toHaveNoViolations()
+      })
+
+      test('axe (styled-system) @aat', async ({page}) => {
+        await visit(page, {
+          id: story.id,
+          globals: {
+            featureFlags: {
+              primer_react_css_modules_team: false,
+            },
+          },
         })
         await expect(page).toHaveNoViolations()
       })

packages/react/src/Text/Text.module.css

@@ -0,0 +1,32 @@
+.Text {
+  &:where([data-size='small']) {
+    font-size: var(--text-body-size-small);
+    line-height: var(--text-body-lineHeight-small);
+  }
+
+  &:where([data-size='medium']) {
+    font-size: var(--text-body-size-medium);
+    line-height: var(--text-body-lineHeight-medium);
+  }
+
+  &:where([data-size='large']) {
+    font-size: var(--text-body-size-large);
+    line-height: var(--text-body-lineHeight-large);
+  }
+
+  &:where([data-weight='light']) {
+    font-weight: var(--base-text-weight-light);
+  }
+
+  &:where([data-weight='normal']) {
+    font-weight: var(--base-text-weight-normal);
+  }
+
+  &:where([data-weight='medium']) {
+    font-weight: var(--base-text-weight-medium);
+  }
+
+  &:where([data-weight='semibold']) {
+    font-weight: var(--base-text-weight-semibold);
+  }
+}

packages/react/src/Text/Text.stories.tsx

@@ -9,19 +9,15 @@ export default {
 
 export const Default = () => <Text>Default Text</Text>
 
-export const Playground: StoryFn<typeof Text> = args => <Text {...args}>{args.text}</Text>
+export const Playground: StoryFn<typeof Text> = args => <Text {...args}>Playground</Text>
 
 Playground.args = {
-  text: 'Playground',
   as: 'span',
   size: 'medium',
   weight: 'normal',
 }
 
 Playground.argTypes = {
-  text: {
-    type: 'string',
-  },
   as: {
     type: 'string',
   },
@@ -37,12 +33,6 @@ Playground.argTypes = {
       disable: true,
     },
   },
-  forwardedAs: {
-    controls: false,
-    table: {
-      disable: true,
-    },
-  },
   size: {
     control: {
       type: 'radio',

packages/react/src/Text/Text.tsx

@@ -1,9 +1,16 @@
+import cx from 'clsx'
 import styled 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 classes from './Text.module.css'
 import type {ComponentProps} from '../utils/types'
+import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 
 type StyledTextProps = {
   size?: 'large' | 'medium' | 'small'
@@ -12,10 +19,7 @@ type StyledTextProps = {
   SystemCommonProps &
   SxProp
 
-const Text = styled.span.attrs<StyledTextProps>(({size, weight}) => ({
-  'data-size': size,
-  'data-weight': weight,
-}))<StyledTextProps>`
+const StyledText = styled.span<StyledTextProps>`
   ${TYPOGRAPHY};
   ${COMMON};
 
@@ -52,5 +56,57 @@ const Text = styled.span.attrs<StyledTextProps>(({size, weight}) => ({
 
   ${sx};
 `
-export type TextProps = ComponentProps<typeof Text>
+
+const Text = forwardRef(({as: Component = 'span', className, size, weight, ...props}, forwardedRef) => {
+  const enabled = useFeatureFlag('primer_react_css_modules_team')
+
+  const innerRef = React.useRef<HTMLElement>(null)
+  useRefObjectAsForwardedRef(forwardedRef, innerRef)
+
+  if (enabled) {
+    if (props.sx) {
+      return (
+        // @ts-ignore shh
+        <Box
+          as={Component}
+          className={cx(className, classes.Text)}
+          data-size={size}
+          data-weight={weight}
+          {...props}
+          // @ts-ignore shh
+          ref={innerRef}
+        />
+      )
+    }
+
+    return (
+      // @ts-ignore shh
+      <Component
+        className={cx(className, classes.Text)}
+        data-size={size}
+        data-weight={weight}
+        {...props}
+        // @ts-ignore shh
+        ref={innerRef}
+      />
+    )
+  }
+
+  return (
+    // @ts-ignore shh
+    <StyledText
+      as={Component}
+      className={className}
+      data-size={size}
+      data-weight={weight}
+      {...props}
+      // @ts-ignore shh
+      ref={innerRef}
+    />
+  )
+}) as PolymorphicForwardRefComponent<'span', StyledTextProps>
+
+Text.displayName = 'Text'
+
+export type TextProps = ComponentProps<typeof StyledText>
 export default Text