Textarea: Add minHeight and maxHeight as props (#6182)

Author: TylerJDev

.changeset/social-ants-bow.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Textarea: Adds `minHeight` and `maxHeight` as props

packages/react/src/Textarea/Textarea.docs.json

@@ -97,6 +97,16 @@
       "name": "className",
       "type": "string | undefined",
       "description": "The className to apply to the wrapper element"
+    },
+    {
+      "name": "minHeight",
+      "type": "number",
+      "description": "The minimum height of the textarea"
+    },
+    {
+      "name": "maxHeight",
+      "type": "number",
+      "description": "The maximum height of the textarea"
     }
   ],
   "subcomponents": []

packages/react/src/Textarea/Textarea.features.stories.tsx

@@ -104,3 +104,21 @@ export const CustomResizeBehavior = () => (
     </FormControl>
   </Stack>
 )
+
+export const MinimumHeight = () => (
+  <Box as="form">
+    <FormControl>
+      <FormControl.Label>Default label</FormControl.Label>
+      <Textarea rows={1} minHeight={100} />
+    </FormControl>
+  </Box>
+)
+
+export const MaximumHeight = () => (
+  <Box as="form">
+    <FormControl>
+      <FormControl.Label>Default label</FormControl.Label>
+      <Textarea rows={20} maxHeight={200} />
+    </FormControl>
+  </Box>
+)

packages/react/src/Textarea/Textarea.test.tsx

@@ -138,4 +138,16 @@ describe('Textarea', () => {
     rerender(<Textarea validationStatus="error" />)
     expect(textareaElement).toHaveAttribute('aria-invalid', 'true')
   })
+
+  it('renders textarea with minHeight and maxHeight styles', () => {
+    const minHeight = 100
+    const maxHeight = 200
+    render(<Textarea minHeight={minHeight} maxHeight={maxHeight} />)
+
+    const textareaElement = screen.getByRole('textbox') as HTMLTextAreaElement
+    const style = window.getComputedStyle(textareaElement)
+
+    expect(style.minHeight).toBe(`${minHeight}px`)
+    expect(style.maxHeight).toBe(`${maxHeight}px`)
+  })
 })

packages/react/src/Textarea/Textarea.tsx

@@ -34,6 +34,18 @@ export type TextareaProps = {
    * The className to apply to the wrapper element
    */
   className?: string
+  /**
+   * The minimum height of the Textarea
+   */
+  minHeight?: number
+  /**
+   * The maximum height of the Textarea
+   */
+  maxHeight?: number
+  /**
+   * CSS styles to apply to the Textarea
+   */
+  style?: React.CSSProperties
 } & TextareaHTMLAttributes<HTMLTextAreaElement> &
   SxProp
 
@@ -55,6 +67,9 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       block,
       contrast,
       className,
+      minHeight,
+      maxHeight,
+      style,
       ...rest
     }: TextareaProps,
     ref,
@@ -78,6 +93,11 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
           rows={rows}
           cols={cols}
           className={classes.TextArea}
+          style={{
+            minHeight,
+            maxHeight,
+            ...style,
+          }}
           {...rest}
         />
       </TextInputBaseWrapper>