chore(textarea): refactor Textarea component props and add (#1928)

hasHelper prop
heroui-inc · Nov 8, 2023 · d2bd008 · d2bd008 · vercel · Nov 8, 2023
1 parent 2f87b8d
commit d2bd008
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/.changeset/happy-rice-walk.md b/.changeset/happy-rice-walk.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/input": patch
+---
+
+Texarea label validation added to avoid rendering the element when there is no label.
diff --git a/packages/components/input/src/textarea.tsx b/packages/components/input/src/textarea.tsx
@@ -18,9 +18,7 @@ type OmittedInputProps =
   | "isClearButtonFocusVisible"
   | "isLabelPlaceholder"
   | "isClearable"
-  | "isTextarea"
-  | "startContent"
-  | "endContent";
+  | "isTextarea";
 
 export type TextareaHeightChangeMeta = {
   rowHeight: number;
@@ -77,6 +75,7 @@ const Textarea = forwardRef<"textarea", TextAreaProps>(
       description,
       startContent,
       endContent,
+      hasHelper,
       shouldLabelBeOutside,
       shouldLabelBeInside,
       errorMessage,
@@ -92,7 +91,7 @@ const Textarea = forwardRef<"textarea", TextAreaProps>(
 
     const [hasMultipleRows, setIsHasMultipleRows] = useState(minRows > 1);
     const [isLimitReached, setIsLimitReached] = useState(false);
-    const labelContent = <label {...getLabelProps()}>{label}</label>;
+    const labelContent = label ? <label {...getLabelProps()}>{label}</label> : null;
     const inputProps = getInputProps();
 
     const handleHeightChange = (height: number, meta: TextareaHeightChangeMeta) => {
@@ -143,13 +142,15 @@ const Textarea = forwardRef<"textarea", TextAreaProps>(
           {shouldLabelBeInside ? labelContent : null}
           {innerWrapper}
         </div>
-        <div {...getHelperWrapperProps()}>
-          {errorMessage ? (
-            <div {...getErrorMessageProps()}>{errorMessage}</div>
-          ) : description ? (
-            <div {...getDescriptionProps()}>{description}</div>
-          ) : null}
-        </div>
+        {hasHelper ? (
+          <div {...getHelperWrapperProps()}>
+            {errorMessage ? (
+              <div {...getErrorMessageProps()}>{errorMessage}</div>
+            ) : description ? (
+              <div {...getDescriptionProps()}>{description}</div>
+            ) : null}
+          </div>
+        ) : null}
       </Component>
     );
   },