From d4216181b27b3493ff28a9a58c00321a4fdde582 Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Fri, 8 Nov 2024 20:43:56 +0000
Subject: [PATCH 1/3] feat(TextInput): Convert UnstyledTextInput to use CSS
 modules behind feature flag

---
 packages/react/src/Select/Select.tsx          |  3 +-
 .../TextInputWithTokens.module.css            |  3 ++
 .../TextInputWithTokens.tsx                   | 10 +++-
 .../components/UnstyledTextInput.module.css   | 13 +++++
 .../internal/components/UnstyledTextInput.tsx | 51 ++++++++++++++-----
 5 files changed, 63 insertions(+), 17 deletions(-)
 create mode 100644 packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css
 create mode 100644 packages/react/src/internal/components/UnstyledTextInput.module.css

diff --git a/packages/react/src/Select/Select.tsx b/packages/react/src/Select/Select.tsx
index 36152a035b7..ae5f8329427 100644
--- a/packages/react/src/Select/Select.tsx
+++ b/packages/react/src/Select/Select.tsx
@@ -6,6 +6,7 @@ import TextInputWrapper from '../internal/components/TextInputWrapper'
 import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
 import {useFeatureFlag} from '../FeatureFlags'
 import classes from './Select.module.css'
+import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 
 export type SelectProps = Omit<
   Omit<React.ComponentPropsWithoutRef<'select'>, 'size'> & Omit<StyledWrapperProps, 'variant'>,
@@ -167,7 +168,7 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
       </TextInputWrapper>
     )
   },
-)
+) as PolymorphicForwardRefComponent<'select', SelectProps>
 
 const Option: React.FC<React.PropsWithChildren<React.HTMLProps<HTMLOptionElement> & {value: string}>> = props => (
   <option {...props} />
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css b/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css
new file mode 100644
index 00000000000..77f34f28978
--- /dev/null
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css
@@ -0,0 +1,3 @@
+.UnstyledTextInput {
+  height: 100%;
+}
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index fa03c61a48e..4ded926373d 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/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 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}
           />
diff --git a/packages/react/src/internal/components/UnstyledTextInput.module.css b/packages/react/src/internal/components/UnstyledTextInput.module.css
new file mode 100644
index 00000000000..c0b100c57fa
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/packages/react/src/internal/components/UnstyledTextInput.tsx b/packages/react/src/internal/components/UnstyledTextInput.tsx
index 5e924e00a61..c81b23d567d 100644
--- a/packages/react/src/internal/components/UnstyledTextInput.tsx
+++ b/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} className={clsx(className, {[styles.Input]: enabled})} {...rest} />
+})
+UnstyledTextInput.displayName = 'UnstyledTextInput'
 
 export default UnstyledTextInput

From c9b5f21232371503d83a78a1e9b1e803f69903d2 Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Fri, 8 Nov 2024 20:49:57 +0000
Subject: [PATCH 2/3] changeset

---
 .changeset/late-swans-knock.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/late-swans-knock.md

diff --git a/.changeset/late-swans-knock.md b/.changeset/late-swans-knock.md
new file mode 100644
index 00000000000..3541d391dc3
--- /dev/null
+++ b/.changeset/late-swans-knock.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert UnstyledTextInput to use CSS Modules behing feature flag

From 54a1b9ae8a2ae85956c946be31be26dc7856bdfd Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Fri, 8 Nov 2024 23:49:44 +0000
Subject: [PATCH 3/3] reorder props

---
 packages/react/src/internal/components/UnstyledTextInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/internal/components/UnstyledTextInput.tsx b/packages/react/src/internal/components/UnstyledTextInput.tsx
index c81b23d567d..3c5cb598d3a 100644
--- a/packages/react/src/internal/components/UnstyledTextInput.tsx
+++ b/packages/react/src/internal/components/UnstyledTextInput.tsx
@@ -35,7 +35,7 @@ const UnstyledTextInput = React.forwardRef<HTMLInputElement, ToggledUnstyledText
   forwardRef,
 ) {
   const enabled = useFeatureFlag(TEXT_INPUT_CSS_MODULES_FEATURE_FLAG)
-  return <ToggledUnstyledTextInput ref={forwardRef} className={clsx(className, {[styles.Input]: enabled})} {...rest} />
+  return <ToggledUnstyledTextInput ref={forwardRef} {...rest} className={clsx(className, enabled && styles.Input)} />
 })
 UnstyledTextInput.displayName = 'UnstyledTextInput'