feat(TextInput): Convert UnstyledTextInput to use CSS modules behind feature flag

.changeset/late-swans-knock.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert UnstyledTextInput to use CSS Modules behing feature flag

packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css

@@ -0,0 +1,3 @@
+.UnstyledTextInput {
+  height: 100%;
+}

packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx

@@ -14,8 +14,11 @@ import type {TokenSizeKeys} from '../Token/TokenBase'
 
 import type {TextInputSizes} from '../internal/components/TextInputWrapper'
 import TextInputWrapper, {textInputHorizPadding} from '../internal/components/TextInputWrapper'
-import UnstyledTextInput from '../internal/components/UnstyledTextInput'
+import UnstyledTextInput, {TEXT_INPUT_CSS_MODULES_FEATURE_FLAG} from '../internal/components/UnstyledTextInput'
 import TextInputInnerVisualSlot from '../internal/components/TextInputInnerVisualSlot'
+import {useFeatureFlag} from '../FeatureFlags'
+
+import styles from './TextInputWithTokens.module.css'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnyReactComponent = React.ComponentType<React.PropsWithChildren<any>>
@@ -250,6 +253,8 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
   const showTrailingLoadingIndicator =
     loading && (loaderPosition === 'trailing' || (loaderPosition === 'auto' && !LeadingVisual))
 
+  const enabled = useFeatureFlag(TEXT_INPUT_CSS_MODULES_FEATURE_FLAG)
+
   return (
     <TextInputWrapper
       block={block}
@@ -329,7 +334,8 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
             onBlur={handleInputBlur}
             onKeyDown={handleInputKeyDown}
             type="text"
-            sx={{height: '100%'}}
+            sx={enabled ? undefined : {height: '100%'}}
+            className={enabled ? styles.UnstyledTextInput : undefined}
             aria-invalid={validationStatus === 'error' ? 'true' : 'false'}
             {...inputPropsRest}
           />

packages/react/src/internal/components/UnstyledTextInput.module.css

@@ -0,0 +1,13 @@
+.Input {
+  width: 100%;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  background-color: transparent;
+  border: 0;
+  appearance: none;
+
+  &:focus {
+    outline: 0;
+  }
+}

packages/react/src/internal/components/UnstyledTextInput.tsx

@@ -1,19 +1,42 @@
 import styled from 'styled-components'
-import sx from '../../sx'
+import sx, {type SxProp} from '../../sx'
+import {toggleStyledComponent} from '../utils/toggleStyledComponent'
+import React from 'react'
+import {useFeatureFlag} from '../../FeatureFlags'
 
-const UnstyledTextInput = styled.input`
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  &:focus {
-    outline: 0;
-  }
+import styles from './UnstyledTextInput.module.css'
+import {clsx} from 'clsx'
 
-  ${sx};
-`
+export const TEXT_INPUT_CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+
+type ToggledUnstyledTextInputProps = React.ComponentPropsWithoutRef<'input'> & SxProp
+
+const ToggledUnstyledTextInput = toggleStyledComponent(
+  TEXT_INPUT_CSS_MODULES_FEATURE_FLAG,
+  'input',
+  styled.input`
+    border: 0;
+    font-size: inherit;
+    font-family: inherit;
+    background-color: transparent;
+    -webkit-appearance: none;
+    color: inherit;
+    width: 100%;
+    &:focus {
+      outline: 0;
+    }
+
+    ${sx};
+  `,
+)
+
+const UnstyledTextInput = React.forwardRef<HTMLInputElement, ToggledUnstyledTextInputProps>(function UnstyledTextInput(
+  {className, ...rest},
+  forwardRef,
+) {
+  const enabled = useFeatureFlag(TEXT_INPUT_CSS_MODULES_FEATURE_FLAG)
+  return <ToggledUnstyledTextInput ref={forwardRef} {...rest} className={clsx(className, enabled && styles.Input)} />
+})
+UnstyledTextInput.displayName = 'UnstyledTextInput'
 
 export default UnstyledTextInput