fix(theme): support description with a single space using zero-width …

…space
heroui-inc · Dec 3, 2024 · 704ba52 · 704ba52
1 parent e8bfdc8
commit 704ba52
Show file tree

Hide file tree

Showing 14 changed files with 119 additions and 46 deletions.
diff --git a/packages/components/autocomplete/stories/autocomplete.stories.tsx b/packages/components/autocomplete/stories/autocomplete.stories.tsx
@@ -285,30 +285,6 @@ const FullyControlledTemplate = () => {
   );
 };
 
-const MirrorTemplate = ({color, variant, ...args}: AutocompleteProps) => (
-  <div className="w-full max-w-xl flex flex-row gap-4">
-    <Autocomplete
-      className="max-w-xs"
-      color={color}
-      label="Select an animal"
-      variant={variant}
-      {...args}
-    >
-      {items}
-    </Autocomplete>
-    <Autocomplete
-      className="max-w-xs"
-      color={color}
-      label="Favorite Animal"
-      placeholder="Select an animal"
-      variant={variant}
-      {...args}
-    >
-      {items}
-    </Autocomplete>
-  </div>
-);
-
 const LabelPlacementTemplate = ({color, variant, ...args}: AutocompleteProps) => (
   <div className="w-full flex flex-col items-center gap-12">
     <div className="w-full max-w-2xl flex flex-col gap-3">
@@ -983,11 +959,17 @@ export const IsInvalid = {
 };
 
 export const WithDescription = {
-  render: MirrorTemplate,
+  render: (props: AutocompleteProps) => {
+    return (
+      <div className="w-full max-w-3xl flex justify-center gap-4">
+        <Template {...props} description="Select your favorite animal" />
+        <Template {...props} description=" " />
+      </div>
+    );
+  },
 
   args: {
     ...defaultProps,
-    description: "Select your favorite animal",
   },
 };
 

diff --git a/packages/components/checkbox/stories/checkbox-group.stories.tsx b/packages/components/checkbox/stories/checkbox-group.stories.tsx
@@ -232,11 +232,17 @@ export const LineThrough = {
 };
 
 export const WithDescription = {
-  render: Template,
+  render: (args: CheckboxGroupProps) => {
+    return (
+      <div className="w-full max-w-3xl flex justify-center gap-4">
+        <Template {...args} description="Select the cities you want to visit" />
+        <Template {...args} description=" " />
+      </div>
+    );
+  },
 
   args: {
     ...defaultProps,
-    description: "Select the cities you want to visit",
   },
 };
 

diff --git a/packages/components/date-input/src/date-input-group.tsx b/packages/components/date-input/src/date-input-group.tsx
@@ -64,7 +64,9 @@ export const DateInputGroup = forwardRef<"div", DateInputGroupProps>((props, ref
         {isInvalid && errorMessage ? (
           <div {...errorMessageProps}>{errorMessage}</div>
         ) : description ? (
-          <div {...descriptionProps}>{description}</div>
+          <div {...descriptionProps}>
+            {description === " " ? <span>&#8203;</span> : description}
+          </div>
         ) : null}
       </div>
     );

diff --git a/packages/components/date-input/stories/date-input.stories.tsx b/packages/components/date-input/stories/date-input.stories.tsx
@@ -210,11 +210,17 @@ export const WithoutLabel = {
 };
 
 export const WithDescription = {
-  render: Template,
+  render: (props: DateInputProps) => {
+    return (
+      <div className="w-full max-w-3xl flex justify-center gap-4">
+        <Template {...props} description="Please enter your birth date" />
+        <Template {...props} description=" " />
+      </div>
+    );
+  },
 
   args: {
     ...defaultProps,
-    description: "Please enter your birth date",
   },
 };
 

diff --git a/packages/components/date-input/stories/time-input.stories.tsx b/packages/components/date-input/stories/time-input.stories.tsx
@@ -185,11 +185,17 @@ export const WithoutLabel = {
 };
 
 export const WithDescription = {
-  render: Template,
+  render: (args: TimeInputProps) => {
+    return (
+      <div className="w-full max-w-3xl flex justify-center gap-4">
+        <Template {...args} description="Please enter your meeting time" />
+        <Template {...args} description=" " />
+      </div>
+    );
+  },
 
   args: {
     ...defaultProps,
-    description: "Please enter your meeting time",
   },
 };
 

diff --git a/packages/components/date-picker/stories/date-picker.stories.tsx b/packages/components/date-picker/stories/date-picker.stories.tsx
@@ -489,11 +489,17 @@ export const WithoutLabel = {
 };
 
 export const WithDescription = {
-  render: Template,
+  render: (args: DatePickerProps) => {
+    return (
+      <div className="w-full max-w-3xl flex justify-center gap-4">
+        <Template {...args} description="Please enter your birth date" />
+        <Template {...args} description=" " />
+      </div>
+    );
+  },
 
   args: {
     ...defaultProps,
-    description: "Please enter your birth date",
   },
 };
 

diff --git a/packages/components/date-picker/stories/date-range-picker.stories.tsx b/packages/components/date-picker/stories/date-range-picker.stories.tsx
@@ -570,11 +570,17 @@ export const WithoutLabel = {
 };
 
 export const WithDescription = {
-  render: Template,
+  render: (args: DateRangePickerProps) => {
+    return (
+      <div className="w-full max-w-3xl flex justify-center gap-4">
+        <Template {...args} description="Please enter your stay duration" />
+        <Template {...args} description=" " />
+      </div>
+    );
+  },
 
   args: {
     ...defaultProps,
-    description: "Please enter your stay duration",
   },
 };
 

diff --git a/packages/components/input-otp/stories/input-otp.stories.tsx b/packages/components/input-otp/stories/input-otp.stories.tsx
@@ -5,7 +5,7 @@ import {useForm} from "react-hook-form";
 import {ValidationResult} from "@react-types/shared";
 import {Button} from "@nextui-org/button";
 
-import {InputOtp} from "../src";
+import {InputOtp, InputOtpProps} from "../src";
 
 export default {
   title: "Components/InputOtp",
@@ -213,11 +213,17 @@ export const ReadOnly = {
 };
 
 export const WithDescription = {
-  render: Template,
+  render: (args: InputOtpProps) => {
+    return (
+      <div className="w-full max-w-3xl flex justify-center gap-4">
+        <Template {...args} description="Enter the 4 digit code sent to your email" />
+        <Template {...args} description=" " />
+      </div>
+    );
+  },
   args: {
     ...defaultProps,
     length: 4,
-    description: "Enter the 4 digit code sent to your email",
   },
 };
 

diff --git a/packages/components/input/src/input.tsx b/packages/components/input/src/input.tsx
@@ -53,7 +53,7 @@ const Input = forwardRef<"input", InputProps>((props, ref) => {
         {shouldShowError ? (
           <div {...getErrorMessageProps()}>{errorMessage}</div>
         ) : (
-          <div {...getDescriptionProps()}>{description}</div>
+          <div {...getDescriptionProps()}>{description === " " ? <span /> : description}</div>
         )}
       </div>
     );

diff --git a/packages/components/input/stories/input.stories.tsx b/packages/components/input/stories/input.stories.tsx
@@ -91,6 +91,14 @@ const MirrorTemplate = (args) => (
   </div>
 );
 
+const WithDescriptionTemplate = (args) => (
+  <div className="w-full max-w-4xl flex flex-row items-end gap-4">
+    <Input {...args} />
+    <Input {...args} placeholder="Enter your email" />
+    <Input {...args} description=" " placeholder="Enter your email" />
+  </div>
+);
+
 const FormTemplate = (args) => (
   <form
     className="w-full max-w-xl flex flex-row items-end gap-4"
@@ -590,7 +598,7 @@ export const WithoutLabel = {
 };
 
 export const WithDescription = {
-  render: MirrorTemplate,
+  render: WithDescriptionTemplate,
 
   args: {
     ...defaultProps,

diff --git a/packages/components/input/stories/textarea.stories.tsx b/packages/components/input/stories/textarea.stories.tsx
@@ -214,6 +214,21 @@ export const WithEndContent = {
   },
 };
 
+export const WithDescription = {
+  render: (args: TextAreaProps) => {
+    return (
+      <div className="w-full max-w-3xl flex justify-center gap-4">
+        <Template {...args} description="Please enter your description" />
+        <Template {...args} description=" " />
+      </div>
+    );
+  },
+
+  args: {
+    ...defaultProps,
+  },
+};
+
 const ServerValidationTemplate = (args: TextAreaProps) => {
   const [serverErrors, setServerErrors] = React.useState({});
   const onSubmit = (e) => {

diff --git a/packages/components/radio/stories/radio.stories.tsx b/packages/components/radio/stories/radio.stories.tsx
@@ -271,7 +271,14 @@ export const IsRequired = {
 };
 
 export const WithDescription = {
-  render: Template,
+  render: (args: RadioGroupProps) => {
+    return (
+      <div className="w-full max-w-3xl flex justify-center gap-4">
+        <Template {...args} description="Please select an option" />
+        <Template {...args} description=" " />
+      </div>
+    );
+  },
 
   args: {
     ...defaultProps,

diff --git a/packages/components/select/src/select.tsx b/packages/components/select/src/select.tsx
@@ -71,7 +71,9 @@ const Select = forwardRef(function Select<T extends object>(
         {shouldShowError ? (
           <div {...getErrorMessageProps()}>{errorMessage}</div>
         ) : (
-          <div {...getDescriptionProps()}>{description}</div>
+          <div {...getDescriptionProps()}>
+            {description === " " ? <span>&#8203;</span> : description}
+          </div>
         )}
       </div>
     );

diff --git a/packages/components/select/stories/select.stories.tsx b/packages/components/select/stories/select.stories.tsx
@@ -865,11 +865,32 @@ export const StartContent = {
 };
 
 export const WithDescription = {
-  render: MirrorTemplate,
+  render: (args: SelectProps) => {
+    return (
+      <div className="w-full max-w-3xl flex justify-center gap-4">
+        <Template
+          {...args}
+          description="Select your favorite animal"
+          placeholder="Select an animal"
+        />
+        <Template
+          {...args}
+          description="Select your favorite animal"
+          label="Favorite Animal"
+          placeholder="Select an animal"
+        />
+        <Template
+          {...args}
+          description=" "
+          label="Favorite Animal"
+          placeholder="Select an animal"
+        />
+      </div>
+    );
+  },
 
   args: {
     ...defaultProps,
-    description: "Select your favorite animal",
   },
 };