[ui][textarea] add description prop

apps/storybook/stories/text-area.stories.tsx

@@ -15,6 +15,9 @@ export default {
     autoComplete: {
       control: 'text',
     },
+    description: {
+      control: 'text',
+    },
     disabled: {
       control: 'boolean',
     },
@@ -108,6 +111,20 @@ export function Error() {
   );
 }
 
+export function Description() {
+  const [value, setValue] = useState('Some comment');
+
+  return (
+    <TextArea
+      description="Your message must be at least 6 characters"
+      errorMessage={value.length < 6 ? 'Your comment is too short' : undefined}
+      label="Leave a reply"
+      value={value}
+      onChange={setValue}
+    />
+  );
+}
+
 export function ReadOnly() {
   return (
     <TextArea

packages/ui/src/TextArea/TextArea.tsx

@@ -27,6 +27,7 @@ export type TextAreaResize = 'both' | 'horizontal' | 'none' | 'vertical';
 
 type Props = Readonly<{
   defaultValue?: string;
+  description?: React.ReactNode;
   errorMessage?: React.ReactNode;
   id?: string;
   isLabelHidden?: boolean;
@@ -66,6 +67,7 @@ const resizeClasses: Record<TextAreaResize, string> = {
 function TextArea(
   {
     defaultValue,
+    description,
     disabled,
     errorMessage,
     id: idParam,
@@ -82,7 +84,7 @@ function TextArea(
   const hasError = errorMessage != null;
   const generatedId = useId();
   const id = idParam ?? generatedId;
-  const errorId = useId();
+  const messageId = useId();
   const state: State = hasError ? 'error' : 'normal';
 
   return (
@@ -105,7 +107,9 @@ function TextArea(
       <div>
         <textarea
           ref={ref}
-          aria-describedby={hasError ? errorId : undefined}
+          aria-describedby={
+            hasError || description != null ? messageId : undefined
+          }
           aria-invalid={hasError ? true : undefined}
           className={clsx(
             'block w-full rounded-md text-sm disabled:bg-slate-50 disabled:text-slate-500',
@@ -128,9 +132,14 @@ function TextArea(
           {...props}
         />
       </div>
-      {errorMessage && (
-        <p className="text-danger-600 mt-2 text-sm" id={errorId}>
-          {errorMessage}
+      {(errorMessage ?? description) && (
+        <p
+          className={clsx(
+            'mt-2 text-sm',
+            errorMessage ? 'text-danger-600' : 'text-slate-500',
+          )}
+          id={messageId}>
+          {errorMessage ?? description}
         </p>
       )}
     </div>