From 704ba5254980a7c095328f8bc1348a126cbd8eb3 Mon Sep 17 00:00:00 2001
From: iqingting <qingting4619@gmail.com>
Date: Tue, 3 Dec 2024 17:17:51 +0800
Subject: [PATCH 1/2] fix(theme): support description with a single space using
 zero-width space

---
 .../stories/autocomplete.stories.tsx          | 34 +++++--------------
 .../stories/checkbox-group.stories.tsx        | 10 ++++--
 .../date-input/src/date-input-group.tsx       |  4 ++-
 .../date-input/stories/date-input.stories.tsx | 10 ++++--
 .../date-input/stories/time-input.stories.tsx | 10 ++++--
 .../stories/date-picker.stories.tsx           | 10 ++++--
 .../stories/date-range-picker.stories.tsx     | 10 ++++--
 .../input-otp/stories/input-otp.stories.tsx   | 12 +++++--
 packages/components/input/src/input.tsx       |  2 +-
 .../input/stories/input.stories.tsx           | 10 +++++-
 .../input/stories/textarea.stories.tsx        | 15 ++++++++
 .../radio/stories/radio.stories.tsx           |  9 ++++-
 packages/components/select/src/select.tsx     |  4 ++-
 .../select/stories/select.stories.tsx         | 25 ++++++++++++--
 14 files changed, 119 insertions(+), 46 deletions(-)

diff --git a/packages/components/autocomplete/stories/autocomplete.stories.tsx b/packages/components/autocomplete/stories/autocomplete.stories.tsx
index a63fdf61b4..1f06da9a81 100644
--- 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
index 6182918020..9eae425311 100644
--- 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
index 998d166e47..e8878075f0 100644
--- 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
index af0cc936f5..9a49934c6a 100644
--- 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
index cdf090c8b1..98f1c7105d 100644
--- 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
index 49a72bb301..4b0b6bf525 100644
--- 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
index 1dcac5ac4d..9d6e7da13e 100644
--- 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
index b3c97ff01d..0df74301dd 100644
--- 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
index 91dadea0e9..c1fc31af87 100644
--- 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
index d74a2523a8..43394b8554 100644
--- 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
index fdca80cfbc..b2ab78279d 100644
--- 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
index 28aae052ad..681a0c807e 100644
--- 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
index 38eb938b75..7d4fae802e 100644
--- 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
index f768f58e49..9cf77b4267 100644
--- 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",
   },
 };
 

From ecfd47196b95230755dfcdeca84aa4ca96197f82 Mon Sep 17 00:00:00 2001
From: iqingting <qingting4619@gmail.com>
Date: Tue, 3 Dec 2024 17:32:21 +0800
Subject: [PATCH 2/2] fix: revert code

---
 packages/components/input/src/input.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

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