From e4037895105c7e86e79c5bb6fbafb86e715337ba Mon Sep 17 00:00:00 2001
From: valbertVieira <112519905+ValbertMartins@users.noreply.github.com>
Date: Wed, 22 Nov 2023 18:48:08 -0300
Subject: [PATCH] adds contrast property to textArea component (#3484)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* adds a contrast property to textarea component

* Update src/Textarea/Textarea.tsx

Co-authored-by: Armağan <broccolinisoup@github.com>

* Add changeset

---------

Co-authored-by: Armağan <broccolinisoup@github.com>
---
 .changeset/sweet-pens-occur.md    |  5 +++++
 src/Textarea/Textarea.docs.json   |  6 ++++++
 src/Textarea/Textarea.stories.tsx |  4 ++++
 src/Textarea/Textarea.tsx         | 14 ++++++++++++--
 4 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/sweet-pens-occur.md

diff --git a/.changeset/sweet-pens-occur.md b/.changeset/sweet-pens-occur.md
new file mode 100644
index 00000000000..0674ba03c10
--- /dev/null
+++ b/.changeset/sweet-pens-occur.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+TextArea: Add contrast property
diff --git a/src/Textarea/Textarea.docs.json b/src/Textarea/Textarea.docs.json
index 1160111fd0a..68c9b96cf80 100644
--- a/src/Textarea/Textarea.docs.json
+++ b/src/Textarea/Textarea.docs.json
@@ -35,6 +35,12 @@
       "defaultValue": "'both'",
       "description": "Changes the resize behavior"
     },
+    {
+      "name": "contrast",
+      "type": "boolean",
+      "defaultValue": "false",
+      "description": "Changes background color to a higher contrast color"
+    },
     {
       "name": "validationStatus",
       "type": "'success' | 'error' | undefined",
diff --git a/src/Textarea/Textarea.stories.tsx b/src/Textarea/Textarea.stories.tsx
index 698404e0a22..4b13e426b81 100644
--- a/src/Textarea/Textarea.stories.tsx
+++ b/src/Textarea/Textarea.stories.tsx
@@ -35,6 +35,7 @@ Playground.args = {
   cols: DEFAULT_TEXTAREA_COLS,
   disabled: false,
   resize: DEFAULT_TEXTAREA_RESIZE,
+  contrast: false,
   rows: DEFAULT_TEXTAREA_ROWS,
   validationStatus: undefined,
 }
@@ -52,6 +53,9 @@ Playground.argTypes = {
     options: ['none', 'both', 'horizontal', 'vertical'],
     control: {type: 'radio'},
   },
+  contrast: {
+    control: {type: 'boolean'},
+  },
   rows: {
     control: {type: 'number'},
   },
diff --git a/src/Textarea/Textarea.tsx b/src/Textarea/Textarea.tsx
index 276e7eae1f6..f07e1aab840 100644
--- a/src/Textarea/Textarea.tsx
+++ b/src/Textarea/Textarea.tsx
@@ -25,6 +25,10 @@ export type TextareaProps = {
    * Allows resizing of the textarea
    */
   resize?: 'none' | 'both' | 'horizontal' | 'vertical'
+  /**
+   * apply a high contrast color to background
+   */
+  contrast?: boolean
 } & TextareaHTMLAttributes<HTMLTextAreaElement> &
   SxProp
 
@@ -53,7 +57,6 @@ const StyledTextarea = styled.textarea<TextareaProps>`
     css`
       resize: none;
     `}
-
   ${sx};
 `
 
@@ -73,12 +76,19 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       cols = DEFAULT_TEXTAREA_COLS,
       resize = DEFAULT_TEXTAREA_RESIZE,
       block,
+      contrast,
       ...rest
     }: TextareaProps,
     ref,
   ): ReactElement => {
     return (
-      <TextInputBaseWrapper sx={sxProp} validationStatus={validationStatus} disabled={disabled} block={block}>
+      <TextInputBaseWrapper
+        sx={sxProp}
+        validationStatus={validationStatus}
+        disabled={disabled}
+        block={block}
+        contrast={contrast}
+      >
         <StyledTextarea
           value={value}
           resize={resize}