From 39432dee5aac74bac043c001e41f3c75e7d54d68 Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com>
Date: Wed, 13 Nov 2024 23:10:20 +0000
Subject: [PATCH 1/2] initial conversion

---
 .../react/src/Textarea/TextArea.module.css    | 34 +++++++++++
 packages/react/src/Textarea/Textarea.tsx      | 59 +++++++++++--------
 2 files changed, 70 insertions(+), 23 deletions(-)
 create mode 100644 packages/react/src/Textarea/TextArea.module.css

diff --git a/packages/react/src/Textarea/TextArea.module.css b/packages/react/src/Textarea/TextArea.module.css
new file mode 100644
index 00000000000..9c09bc5023a
--- /dev/null
+++ b/packages/react/src/Textarea/TextArea.module.css
@@ -0,0 +1,34 @@
+.TextArea {
+  width: 100%;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  resize: both;
+  background-color: transparent;
+  border: 0;
+  appearance: none;
+}
+
+.TextArea:focus {
+  outline: 0;
+}
+
+.TextArea[resize='none'] {
+  resize: none;
+}
+
+.TextArea[resize='both'] {
+  resize: both;
+} 
+
+.TextArea[resize='horizontal'] {
+  resize: horizontal;
+} 
+
+.TextArea[resize='vertical'] {
+  resize: vertical;
+}
+
+.TextArea:disabled {
+  resize: none;
+}
diff --git a/packages/react/src/Textarea/Textarea.tsx b/packages/react/src/Textarea/Textarea.tsx
index ff39ed078b9..1e28d3dcdf8 100644
--- a/packages/react/src/Textarea/Textarea.tsx
+++ b/packages/react/src/Textarea/Textarea.tsx
@@ -5,6 +5,10 @@ import {TextInputBaseWrapper} from '../internal/components/TextInputWrapper'
 import type {FormValidationStatus} from '../utils/types/FormValidationStatus'
 import type {SxProp} from '../sx'
 import sx from '../sx'
+import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
+import {clsx} from 'clsx'
+import {useFeatureFlag} from '../FeatureFlags'
+import classes from './TextArea.module.css'
 
 export const DEFAULT_TEXTAREA_ROWS = 7
 export const DEFAULT_TEXTAREA_COLS = 30
@@ -38,33 +42,39 @@ export type TextareaProps = {
 } & TextareaHTMLAttributes<HTMLTextAreaElement> &
   SxProp
 
-const StyledTextarea = styled.textarea<TextareaProps>`
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  resize: both;
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
 
-  &:focus {
-    outline: 0;
-  }
+const StyledTextarea = toggleStyledComponent(
+  CSS_MODULES_FEATURE_FLAG,
+  'textarea',
+  styled.textarea<TextareaProps>`
+    border: 0;
+    font-size: inherit;
+    font-family: inherit;
+    background-color: transparent;
+    -webkit-appearance: none;
+    color: inherit;
+    width: 100%;
+    resize: both;
 
-  ${props =>
-    props.resize &&
-    css`
-      resize: ${props.resize};
-    `}
+    &:focus {
+      outline: 0;
+    }
 
-  ${props =>
-    props.disabled &&
-    css`
-      resize: none;
-    `}
+    ${props =>
+      props.resize &&
+      css`
+        resize: ${props.resize};
+      `}
+
+    ${props =>
+      props.disabled &&
+      css`
+        resize: none;
+      `}
   ${sx};
-`
+  `,
+)
 
 /**
  * An accessible, native textarea component that supports validation states.
@@ -88,6 +98,8 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     }: TextareaProps,
     ref,
   ): ReactElement => {
+    const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+
     return (
       <TextInputBaseWrapper
         sx={sxProp}
@@ -106,6 +118,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
           disabled={disabled}
           rows={rows}
           cols={cols}
+          className={clsx(enabled && classes.TextArea, className)}
           {...rest}
         />
       </TextInputBaseWrapper>

From 6f8cebefc37de79c1915c63c1175443583a5154e Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com>
Date: Thu, 14 Nov 2024 14:12:47 +0000
Subject: [PATCH 2/2] changeset/lint

---
 .changeset/dirty-fans-tap.md                    | 5 +++++
 packages/react/src/Textarea/TextArea.module.css | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/dirty-fans-tap.md

diff --git a/.changeset/dirty-fans-tap.md b/.changeset/dirty-fans-tap.md
new file mode 100644
index 00000000000..e524b12f1b3
--- /dev/null
+++ b/.changeset/dirty-fans-tap.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Update `Textarea` component to use CSS module
diff --git a/packages/react/src/Textarea/TextArea.module.css b/packages/react/src/Textarea/TextArea.module.css
index 9c09bc5023a..6d73ca326f7 100644
--- a/packages/react/src/Textarea/TextArea.module.css
+++ b/packages/react/src/Textarea/TextArea.module.css
@@ -19,11 +19,11 @@
 
 .TextArea[resize='both'] {
   resize: both;
-} 
+}
 
 .TextArea[resize='horizontal'] {
   resize: horizontal;
-} 
+}
 
 .TextArea[resize='vertical'] {
   resize: vertical;