adds contrast property to textArea component

.changeset/sweet-pens-occur.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+TextArea: Add contrast property

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",

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'},
  },

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}