Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 2 commits into
base: canary
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
704ba52
fix(theme): support description with a single space using zero-width …
iqingting Dec 3, 2024
ecfd471
fix: revert code
iqingting Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 8 additions & 26 deletions packages/components/autocomplete/stories/autocomplete.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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",
},
};

Expand Down
10 changes: 8 additions & 2 deletions packages/components/checkbox/stories/checkbox-group.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
},
};

Expand Down
4 changes: 3 additions & 1 deletion packages/components/date-input/src/date-input-group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. It's not immediately clear for users that " " causes a span to appear where normally you'd expect text
  2. Doesn't seem ideal for accessibility

Copy link
Contributor

@Peterl561 Peterl561 Dec 4, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also this won't work if neighboring inputs have multiple lines of description.

</div>
) : null}
</div>
);
Expand Down
10 changes: 8 additions & 2 deletions packages/components/date-input/stories/date-input.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
},
};

Expand Down
10 changes: 8 additions & 2 deletions packages/components/date-input/stories/time-input.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
},
};

Expand Down
10 changes: 8 additions & 2 deletions packages/components/date-picker/stories/date-picker.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
},
};

Expand Down
10 changes: 8 additions & 2 deletions packages/components/date-picker/stories/date-range-picker.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
},
};

Expand Down
12 changes: 9 additions & 3 deletions packages/components/input-otp/stories/input-otp.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
},
};

Expand Down
4 changes: 3 additions & 1 deletion packages/components/input/src/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,9 @@ const Input = forwardRef<"input", InputProps>((props, ref) => {
{shouldShowError ? (
<div {...getErrorMessageProps()}>{errorMessage}</div>
) : (
<div {...getDescriptionProps()}>{description}</div>
<div {...getDescriptionProps()}>
{description === " " ? <span>&#8203;</span> : description}
</div>
)}
</div>
);
Expand Down
10 changes: 9 additions & 1 deletion packages/components/input/stories/input.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -590,7 +598,7 @@ export const WithoutLabel = {
};

export const WithDescription = {
render: MirrorTemplate,
render: WithDescriptionTemplate,

args: {
...defaultProps,
Expand Down
15 changes: 15 additions & 0 deletions packages/components/input/stories/textarea.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
9 changes: 8 additions & 1 deletion packages/components/radio/stories/radio.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 3 additions & 1 deletion packages/components/select/src/select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
25 changes: 23 additions & 2 deletions packages/components/select/stories/select.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
},
};

Expand Down
Loading