Textarea design migration (harness#1589)

* add textarea component design migration

* add form textarea

* fixes

* fixes

* fix counter

Author: ankormoreankor

apps/portal/src/components/docs-page/example.tsx

@@ -6,7 +6,7 @@ import {
   useState,
 } from "react";
 import { LiveEditor, LivePreview, LiveProvider } from "react-live";
-import { Icon } from "@harnessio/ui/components";
+import { Icon, Tooltip } from "@harnessio/ui/components";
 import { RouterContextProvider } from "@harnessio/ui/context";
 import ExampleLayout from "./example-layout";
 import { themes } from "prism-react-renderer";
@@ -61,7 +61,9 @@ const Example: FC<ExampleProps> = ({ code, scope }) => {
       path: "*",
       element: (
         <RouterContextProvider Link={Link} NavLink={NavLink} Outlet={Outlet}>
-          <LivePreview />
+          <Tooltip.Provider>
+            <LivePreview />
+          </Tooltip.Provider>
         </RouterContextProvider>
       ),
     },

apps/portal/src/content/docs/components/label.mdx

@@ -33,6 +33,14 @@ import { DocsPage } from "../../../components/docs-page";
         <input id="password" type="password" />
     </div>
 
+    <hr />
+
+    <div className="flex flex-col gap-4">
+        <h5>With informer</h5>
+        <Label htmlFor="2" informerContent="Content here">Description</Label>
+        <input id="2" type="text" />
+    </div>
+
 </div>`}
 />
 

apps/portal/src/content/docs/components/textarea.mdx

@@ -6,17 +6,55 @@ beta: true
 
 The `Textarea` component is used to create a multi-line text input field.
 
-import { DocsPage } from "../../../components/docs-page";
+import { DocsPage } from "@/components/docs-page";
 
 <DocsPage.ComponentExample
   client:only
-  code={`<Textarea
-    name="about-you"
-    label="About you"
-    placeholder="Tell me about yourself..."
-    caption="What do you like to do in your free time?"
-    optional
-/>`}
+  code={`<div className="grid gap-4 max-w-96 w-full">
+    <Textarea
+      id="1"
+      name="default"
+      label="Default"
+      placeholder="Placeholder"
+      caption="Caption text"
+      rows={4}
+    />
+    <Textarea
+      id="2"
+      name="resizable"
+      label="Resizable"
+      placeholder="Placeholder"
+      caption="Caption text"
+      defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+      optional
+      resizable
+      rows={4}
+    />
+    <Textarea
+      id="3"
+      name="error"
+      label="This component in error state and it has a very long text"
+      placeholder="Placeholder"
+      maxCharacters={100}
+      theme="danger"
+      defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+      error="Error message"
+      optional
+      rows={4}
+    />
+    <Textarea
+      id="4"
+      name="disabled"
+      label="Disabled"
+      placeholder="Placeholder"
+      maxCharacters={100}
+      defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+      caption="Caption text"
+      optional
+      rows={4}
+      disabled
+    />
+  </div>`}
 />
 
 ## Usage
@@ -44,21 +82,6 @@ the value changes. When uncontrolled, the `Textarea` will use the `defaultValue`
 its initial value and will call `onChange` when its value changes. The `Textarea` also supports
 all attributes of the `textarea` HTML element.
 
-```typescript jsx
-<Textarea
-  name="textarea-name"       // [OPTIONAL] name of the textarea
-  id="textarea-id"           // [OPTIONAL] id of the textarea
-  value="Textarea value"     // [OPTIONAL] value of the textarea
-  onChange={handleChange}    // [OPTIONAL] callback to call when the value changes
-  label="Textarea label"     // [OPTIONAL] label for the textarea
-  caption="Textarea caption" // [OPTIONAL] caption to describe the textarea
-  error="Error message"      // [OPTIONAL] error message to display below
-  optional                   // [OPTIONAL] indicate if the textarea is optional
-  resizable                  // [OPTIONAL] indicate if the textarea should be resizable
-  disabled                   // [OPTIONAL] indicate if the textarea is disabled
-/>
-```
-
 <DocsPage.PropsTable
   props={[
     {

packages/ui/src/components/commit-suggestions-dialog/commit-suggestions-dialog.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { useForm } from 'react-hook-form'
 
-import { Button, ButtonGroup, ControlGroup, Dialog, FormInput, FormWrapper, Textarea } from '@/components'
+import { Button, ButtonGroup, ControlGroup, Dialog, FormInput, FormWrapper } from '@/components'
 import { UsererrorError } from '@/types'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
@@ -44,11 +44,7 @@ export const CommitSuggestionsDialog: FC<CommitSuggestionsDialogProps> = ({
     }
   })
 
-  const {
-    register,
-    handleSubmit,
-    formState: { errors }
-  } = formMethods
+  const { register, handleSubmit } = formMethods
 
   return (
     <Dialog.Root open={isOpen} onOpenChange={onClose}>
@@ -65,12 +61,11 @@ export const CommitSuggestionsDialog: FC<CommitSuggestionsDialogProps> = ({
               {...register('title')}
               placeholder={commitTitlePlaceHolder ?? 'Add a commit message'}
             />
-            <Textarea
+            <FormInput.Textarea
               id="message"
               {...register('message')}
               placeholder="Add an optional extended description"
               label="Extended description"
-              error={errors.message?.message?.toString()}
             />
           </ControlGroup>
 

packages/ui/src/components/form-input/components/form-text-input.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useRef } from 'react'
+import { forwardRef } from 'react'
 import { Controller, useFormContext } from 'react-hook-form'
 
 import { TextInput, type TextInputProps } from '@components/inputs'
@@ -10,20 +10,6 @@ interface FormTextInputPropsType extends TextInputProps {
 const FormTextInput = forwardRef<HTMLInputElement, FormTextInputPropsType>((props, ref) => {
   const formContext = useFormContext()
 
-  const inputRef = useRef<HTMLInputElement | null>(null)
-
-  const setRefs = (element: HTMLInputElement | null) => {
-    // Save to local ref
-    inputRef.current = element
-
-    // Forward to external ref
-    if (typeof ref === 'function') {
-      ref(element)
-    } else if (ref) {
-      ref.current = element
-    }
-  }
-
   // Only access the component if it is inside FormProvider component tree
   if (!formContext) {
     throw new Error(
@@ -35,15 +21,9 @@ const FormTextInput = forwardRef<HTMLInputElement, FormTextInputPropsType>((prop
     <Controller
       name={props.name}
       control={formContext.control}
-      render={({ field, fieldState }) => {
-        // Use proper React Hook Form reference handling
-        field.ref = setRefs
-
-        // form error takes precedence over props.error
-        const errorMessage = fieldState.error?.message || props.error
-
-        return <TextInput {...props} {...field} error={errorMessage} />
-      }}
+      render={({ field, fieldState }) => (
+        <TextInput {...props} {...field} error={fieldState.error?.message || props.error} ref={ref} />
+      )}
     />
   )
 })

packages/ui/src/components/form-input/components/form-textarea.tsx

@@ -0,0 +1,32 @@
+import { forwardRef } from 'react'
+import { Controller, useFormContext } from 'react-hook-form'
+
+import { Textarea, TextareaProps } from '@components/form-primitives'
+
+interface FormTextareaPropsType extends TextareaProps {
+  name: string
+}
+
+const FormTextarea = forwardRef<HTMLTextAreaElement, FormTextareaPropsType>((props, ref) => {
+  const formContext = useFormContext()
+
+  if (!formContext) {
+    throw new Error(
+      'FormTextarea must be used within a FormProvider context through FormWrapper. Use the standalone Textarea component if form integration is not required.'
+    )
+  }
+
+  return (
+    <Controller
+      name={props.name}
+      control={formContext.control}
+      render={({ field, fieldState }) => (
+        <Textarea {...props} {...field} error={fieldState.error?.message || props.error} ref={ref} />
+      )}
+    />
+  )
+})
+
+FormTextarea.displayName = 'FormInput.Textarea'
+
+export { FormTextarea, type FormTextareaPropsType }

packages/ui/src/components/form-input/index.ts

@@ -1,9 +1,11 @@
 import { FormMultiSelect, type FormMultiSelectPropsType } from './components/form-multi-select-v2'
 import { FormTextInput, type FormTextInputPropsType } from './components/form-text-input'
+import { FormTextarea } from './components/form-textarea'
 
 const FormInput = {
   Text: FormTextInput,
-  MultiSelect: FormMultiSelect
+  MultiSelect: FormMultiSelect,
+  Textarea: FormTextarea
 }
 
 export { FormInput, type FormTextInputPropsType, type FormMultiSelectPropsType }

packages/ui/src/components/form-primitives/form-caption.tsx

@@ -21,9 +21,18 @@ const formCaptionVariants = cva('cn-caption', {
 type FormCaptionProps = {
   theme?: VariantProps<typeof formCaptionVariants>['theme']
   className?: string
+  disabled?: boolean
 }
 
-export const FormCaption = ({ theme = 'default', className, children }: PropsWithChildren<FormCaptionProps>) => {
+export const FormCaption = ({
+  theme = 'default',
+  className,
+  disabled,
+  children
+}: PropsWithChildren<FormCaptionProps>) => {
+  /**
+   * Return null if no message, errorMessage, or warningMessage is provided
+   */
   if (!children) {
     return null
   }
@@ -37,7 +46,7 @@ export const FormCaption = ({ theme = 'default', className, children }: PropsWit
   const effectiveIconName = theme === 'danger' ? 'cross-circle' : 'warning-triangle-outline'
 
   return (
-    <p className={cn(formCaptionVariants({ theme }), className)}>
+    <p className={cn(formCaptionVariants({ theme }), { 'cn-caption-disabled': disabled }, className)}>
       {canShowIcon && <Icon name={effectiveIconName} size={14} />}
       <span>{children}</span>
     </p>

packages/ui/src/components/form-primitives/index.ts

@@ -6,5 +6,6 @@ export * from './legend'
 export * from './message'
 export * from './separator'
 export * from './form-wrapper'
+export * from './textarea'
 export * from './form-primitives.types'
 export * from './form-caption'

packages/ui/src/components/form-primitives/label.tsx

@@ -6,11 +6,11 @@ import * as LabelPrimitive from '@radix-ui/react-label'
 import { cn } from '@utils/cn'
 import { cva, type VariantProps } from 'class-variance-authority'
 
-const labelVariants = cva('label', {
+const labelVariants = cva('cn-label', {
   variants: {
     variant: {
-      default: 'label-default',
-      primary: 'label-primary'
+      default: 'cn-label-default',
+      primary: 'cn-label-primary'
     }
   },
   defaultVariants: {
@@ -27,19 +27,24 @@ export type LabelProps = Omit<ComponentPropsWithoutRef<typeof LabelPrimitive.Roo
   }
 
 const Label = forwardRef<ElementRef<typeof LabelPrimitive.Root>, LabelProps>(
-  ({ className, children, variant = 'default', optional, disabled, informerContent, ...props }, ref) => {
+  ({ className, children, variant = 'default', optional, disabled, informerContent, informerProps, ...props }, ref) => {
     const LabelComponent = ({ className }: { className?: string }) => (
-      <LabelPrimitive.Root ref={ref} className={cn(labelVariants({ variant }), className)} {...props}>
-        {children} {optional && <span className="label-optional">(optional)</span>}
+      <LabelPrimitive.Root
+        ref={ref}
+        className={cn(labelVariants({ variant }), { 'cn-label-disabled': disabled }, className)}
+        {...props}
+      >
+        <span className="cn-label-text">{children}</span>
+        {optional && <span className="cn-label-optional">(optional)</span>}
       </LabelPrimitive.Root>
     )
 
     if (informerContent) {
       return (
-        <span className={cn('flex items-center gap-1', className)}>
+        <span className={cn('cn-label-container', className)}>
           <LabelComponent />
 
-          <Informer className="label-informer" disabled={disabled}>
+          <Informer {...informerProps} className="cn-label-informer" disabled={disabled}>
             {informerContent}
           </Informer>
         </span>