adds contrast property to textArea component (#3484)

* 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>
primer · Nov 22, 2023 · e403789 · e403789
1 parent 40b2978
commit e403789
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 2 deletions.
diff --git a/.changeset/sweet-pens-occur.md 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
@@ -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
@@ -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
@@ -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}