feat(Textarea): allow passing props to the textarea wrapper element

einride · Dec 20, 2023 · 8a92c9d · 8a92c9d
1 parent 5f7e3dc
commit 8a92c9d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/.changeset/serious-peaches-kick.md b/.changeset/serious-peaches-kick.md
@@ -0,0 +1,5 @@
+---
+"@einride/ui": minor
+---
+
+Allow passing props to textarea wrapper element.
diff --git a/packages/einride-ui/src/components/controls/textareas/Textarea/Textarea.tsx b/packages/einride-ui/src/components/controls/textareas/Textarea/Textarea.tsx
@@ -12,6 +12,9 @@ interface TextareaBaseProps extends ComponentPropsWithoutRef<"textarea"> {
   /**  Default is `neutral`. */
   status?: Status
 
+  /** Props passed to the textarea wrapper element. */
+  textareaWrapperProps?: BoxProps
+
   /** Props passed to root elemenet. */
   wrapperProps?: BoxProps
 }
@@ -32,7 +35,7 @@ interface TextareaWithoutLabelProps {
 export type TextareaProps = TextareaBaseProps & (TextareaWithLabelProps | TextareaWithoutLabelProps)
 
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ message, status, wrapperProps, ...props }, ref) => {
+  ({ message, status, textareaWrapperProps, wrapperProps, ...props }, ref) => {
     const id = useId()
     const messageId = useId()
     return (
@@ -42,7 +45,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             {props.label}
           </StyledLabel>
         )}
-        <Box position="relative">
+        <Box position="relative" {...textareaWrapperProps}>
           <StyledTextarea
             {...props}
             aria-errormessage={status === "fail" && message ? messageId : undefined}