fix: resizable and minHeight controlable as properties

Author: Adzouz

docs/stories/03-inputs/Textarea.stories.tsx

@@ -53,6 +53,14 @@ const meta: Meta<typeof Textarea> = {
         type: { summary: 'string' },
       },
     },
+    resizable: {
+      control: 'boolean',
+      description: 'Whether the textarea is resizable.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
   },
   parameters: {
     chromatic: { disableSnapshot: false },

packages/design-system/src/components/Textarea/Textarea.tsx

@@ -11,10 +11,22 @@ interface TextareaProps
     Pick<Field.InputProps, 'hasError' | 'id' | 'name' | 'required'> {
   value?: string;
   'aria-describedby'?: string;
+  resizable?: boolean;
 }
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ disabled, hasError: hasErrorProp, id: idProp, name: nameProp, required: requiredProp, ...props }, ref) => {
+  (
+    {
+      disabled,
+      hasError: hasErrorProp,
+      id: idProp,
+      name: nameProp,
+      required: requiredProp,
+      resizable = true,
+      ...props
+    },
+    ref,
+  ) => {
     const { error, ...field } = useField('Textarea');
     const hasError = Boolean(error) || hasErrorProp;
     const id = field.id ?? idProp;
@@ -46,6 +58,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
           id={id}
           name={name}
           aria-describedby={ariaDescription}
+          $resizable={resizable}
           {...props}
         />
       </Wrapper>
@@ -60,8 +73,8 @@ const Wrapper = styled<BoxComponent>(Box)<{ $hasError?: boolean }>`
 const TextareaElement = styled<BoxComponent<'textarea'>>(Box)`
   display: block;
   border: none;
-  resize: vertical;
-  min-height: 10.5rem;
+  resize: ${({ $resizable }) => ($resizable ? 'vertical' : 'none')};
+  min-height: ${({ minHeight }) => minHeight || '10.5rem'};
 
   &::placeholder {
     color: ${({ theme }) => theme.colors.neutral600};