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(packages): validation state deprecated, isInvalid prop adjusted #1631

Merged
merged 1 commit into from
Sep 16, 2023
Merged

fix(packages): validation state deprecated, isInvalid prop adjusted #1631

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
9 changes: 9 additions & 0 deletions .changeset/rotten-cats-search.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
"@nextui-org/checkbox": patch
"@nextui-org/select": patch
"@nextui-org/input": patch
"@nextui-org/radio": patch
"@nextui-org/theme": patch
---

validationState prop deprecated, "isInvalid" prop adjusted, invalid checkbox and radios state improved
2 changes: 2 additions & 0 deletions apps/docs/content/components/checkbox-group/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,14 @@ import horizontal from "./horizontal";
import controlled from "./controlled";
import customStyles from "./custom-styles";
import customImplementation from "./custom-implementation";
import invalid from "./invalid";

export const checkboxGroupContent = {
usage,
disabled,
horizontal,
controlled,
customStyles,
invalid,
customImplementation,
};
31 changes: 31 additions & 0 deletions apps/docs/content/components/checkbox-group/invalid.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
const App = `import {CheckboxGroup, Checkbox} from "@nextui-org/react";

export default function App() {
const [isInvalid, setIsInvalid] = React.useState(true);

return (
<CheckboxGroup
isRequired
description="Select the cities you want to visit"
isInvalid={isInvalid}
label="Select cities"
onValueChange={(value) => {
setIsInvalid(value.length < 1);
}}
>
<Checkbox value="buenos-aires">Buenos Aires</Checkbox>
<Checkbox value="sydney">Sydney</Checkbox>
<Checkbox value="san-francisco">San Francisco</Checkbox>
<Checkbox value="london">London</Checkbox>
<Checkbox value="tokyo">Tokyo</Checkbox>
</CheckboxGroup>
);
}`;

const react = {
"/App.jsx": App,
};

export default {
...react,
};
2 changes: 1 addition & 1 deletion apps/docs/content/components/input/error-message.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export default function App() {
label="Email"
variant="bordered"
defaultValue="junior2nextui.org"
validationState="invalid"
isInvalid={true}
errorMessage="Please enter a valid email"
className="max-w-xs"
/>
Expand Down
12 changes: 6 additions & 6 deletions apps/docs/content/components/input/regex-validation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ export default function App() {

const validateEmail = (value) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i);

const validationState = React.useMemo(() => {
if (value === "") return undefined;
const isInvalid = React.useMemo(() => {
if (value === "") return false;

return validateEmail(value) ? "valid" : "invalid";
return validateEmail(value) ? false : true;
}, [value]);

return (
Expand All @@ -17,9 +17,9 @@ export default function App() {
type="email"
label="Email"
variant="bordered"
color={validationState === "invalid" ? "danger" : "success"}
errorMessage={validationState === "invalid" && "Please enter a valid email"}
validationState={validationState}
isInvalid={isInvalid}
color={isInvalid ? "danger" : "success"}
errorMessage={isInvalid && "Please enter a valid email"}
onValueChange={setValue}
className="max-w-xs"
/>
Expand Down
2 changes: 2 additions & 0 deletions apps/docs/content/components/radio-group/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,14 @@ import defaultValue from "./default-value";
import withDescription from "./with-description";
import customStyles from "./custom-styles";
import customImpl from "./custom-impl";
import invalid from "./invalid";

export const radioGroupContent = {
usage,
disabled,
horizontal,
controlled,
invalid,
defaultValue,
withDescription,
customStyles,
Expand Down
35 changes: 35 additions & 0 deletions apps/docs/content/components/radio-group/invalid.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
const App = `import {RadioGroup, Radio} from "@nextui-org/react";

export default function App() {
const [selected, setSelected] = React.useState("london");

const validOptions = ["buenos-aires", "san-francisco", "tokyo"];

const isInvalid = !validOptions.includes(selected);

return (
<div className="flex flex-col gap-3">
<RadioGroup
label="Select your favorite city"
value={selected}
isInvalid={isInvalid}
onValueChange={setSelected}
>
<Radio value="buenos-aires">Buenos Aires</Radio>
<Radio value="sydney">Sydney</Radio>
<Radio value="san-francisco">San Francisco</Radio>
<Radio value="london">London</Radio>
<Radio value="tokyo">Tokyo</Radio>
</RadioGroup>
<p className="text-default-500 text-small">Selected: {selected}</p>
</div>
);
}`;

const react = {
"/App.jsx": App,
};

export default {
...react,
};
2 changes: 1 addition & 1 deletion apps/docs/content/components/select/error-message.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default function App() {
placeholder="Select an animal"
description="The second most popular pet in the world"
errorMessage={isValid || !touched ? "" : "You must select a cat"}
validationState={isValid || !touched ? "valid" : "invalid"}
isInvalid={isValid || !touched ? false : true}
selectedKeys={value}
className="max-w-xs"
onSelectionChange={setValue}
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/textarea/error-message.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ const App = `import {Textarea} from "@nextui-org/react";
export default function App() {
return (
<Textarea
isInvalid={true}
variant="bordered"
label="Description"
labelPlacement="outside"
placeholder="Enter your description"
defaultValue="NextUI is a React UI library with..."
validationState="invalid"
errorMessage="The description should be at least 255 characters long."
className="max-w-xs"
/>
Expand Down
46 changes: 25 additions & 21 deletions apps/docs/content/docs/components/checkbox-group.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ A CheckboxGroup allows users to select one or more items from a list of choices.

---

<CarbonAd/>
<CarbonAd />

## Import

Expand Down Expand Up @@ -47,6 +47,10 @@ You can use the `value` and `onValueChange` properties to control the checkbox i

<CodeDemo title="Controlled" files={checkboxGroupContent.controlled} />

### Invalid

<CodeDemo title="Invalid" files={checkboxGroupContent.invalid} />

## Slots

- **base**: Checkbox group root wrapper, it wraps the label and the wrapper.
Expand All @@ -57,7 +61,6 @@ You can use the `value` and `onValueChange` properties to control the checkbox i

### Custom Styles


You can customize the `CheckboxGroup` component by passing custom Tailwind CSS classes to the component slots.

<CodeDemo title="Custom Styles" files={checkboxGroupContent.customStyles} />
Expand All @@ -76,25 +79,26 @@ In case you need to customize the checkbox even further, you can use the `useChe

### Checkbox Group Props

| Attribute | Type | Description | Default |
| ---------------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ---------- |
| children | `ReactNode[]` \| `ReactNode[]` | The checkboxes items. | - |
| orientation | `vertical` \| `horizontal` | The axis the checkbox group items should align with. | `vertical` |
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the checkboxes. | `primary` |
| size | `xs` \| `sm` \| `md` \| `lg` \| `xl` | The size of the checkboxes. | `md` |
| radius | `none` \| `base` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `full` | The radius of the checkboxes. | `md` |
| name | `string` | The name of the CheckboxGroup, used when submitting an HTML form. | - |
| value | `string[]` | The current selected values. (controlled). | - |
| lineThrough | `boolean` | Whether the checkboxes label should be crossed out. | `false` |
| defaultValue | `string[]` | The default selected values. (uncontrolled). | - |
| validationState | `valid` \| `invalid` | Whether the inputs should display its "valid" or "invalid" visual styling. | `false` |
| description | `ReactNode` | The checkbox group description. | - |
| errorMessage | `ReactNode` | The checkbox group error message. | - |
| isDisabled | `boolean` | Whether the checkbox group is disabled. | `false` |
| isRequired | `boolean` | Whether user checkboxes are required on the input before form submission. | `false` |
| isReadOnly | `boolean` | Whether the checkboxes can be selected but not changed by the user. | - |
| disableAnimation | `boolean` | Whether the animation should be disabled. | `false` |
| classNames | `Record<"base"｜ "wrapper"｜ "label", string>` | Allows to set custom class names for the checkbox group slots. | - |
| Attribute | Type | Description | Default |
| ---------------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ---------- |
| children | `ReactNode[]` \| `ReactNode[]` | The checkboxes items. | - |
| orientation | `vertical` \| `horizontal` | The axis the checkbox group items should align with. | `vertical` |
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the checkboxes. | `primary` |
| size | `xs` \| `sm` \| `md` \| `lg` \| `xl` | The size of the checkboxes. | `md` |
| radius | `none` \| `base` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `full` | The radius of the checkboxes. | `md` |
| name | `string` | The name of the CheckboxGroup, used when submitting an HTML form. | - |
| value | `string[]` | The current selected values. (controlled). | - |
| lineThrough | `boolean` | Whether the checkboxes label should be crossed out. | `false` |
| defaultValue | `string[]` | The default selected values. (uncontrolled). | - |
| isInvalid | `boolean` | Whether the checkbox group is invalid. | `false` |
| validationState | `valid` \| `invalid` | Whether the inputs should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead. | - |
| description | `ReactNode` | The checkbox group description. | - |
| errorMessage | `ReactNode` | The checkbox group error message. | - |
| isDisabled | `boolean` | Whether the checkbox group is disabled. | `false` |
| isRequired | `boolean` | Whether user checkboxes are required on the input before form submission. | `false` |
| isReadOnly | `boolean` | Whether the checkboxes can be selected but not changed by the user. | - |
| disableAnimation | `boolean` | Whether the animation should be disabled. | `false` |
| classNames | `Record<"base"｜ "wrapper"｜ "label", string>` | Allows to set custom class names for the checkbox group slots. | - |

### Checkbox Group Events

Expand Down
13 changes: 7 additions & 6 deletions apps/docs/content/docs/components/checkbox.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Checkboxes allow users to select multiple items from a list of individual items,

---

<CarbonAd/>
<CarbonAd />

## Import

Expand Down Expand Up @@ -134,19 +134,20 @@ In case you need to customize the checkbox even further, you can use the `useChe
| ---------------- | --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | --------- |
| children | `ReactNode` | The label of the checkbox. | - |
| icon | [CheckboxIconProps](#checkbox-icon-props) | The icon to be displayed when the checkbox is checked. | - |
| value | `string` | The value of the input element, used when submitting an HTML form. | |
| name | `string` | The name of the input element, used when submitting an HTML form. | |
| value | `string` | The value of the checkbox element, used when submitting an HTML form. | |
| name | `string` | The name of the checkbox element, used when submitting an HTML form. | |
| size | `sm` \| `md` \| `lg` | The size of the checkbox. | `md` |
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the checkbox. | `primary` |
| radius | `none` \| `sm` \| `md` \| `lg` \| `full` | The radius of the checkbox. | - |
| lineThrough | `boolean` | Whether the label should be crossed out. | `false` |
| isSelected | `boolean` | Whether the element should be selected (controlled). | |
| defaultSelected | `boolean` | Whether the element should be selected (uncontrolled). | |
| validationState | `valid` \| `invalid` | Whether the input should display its "valid" or "invalid" visual styling. | - |
| isRequired | `boolean` | Whether user input is required on the input before form submission. | `false` |
| isReadOnly | `boolean` | Whether the input can be selected but not changed by the user. | |
| isRequired | `boolean` | Whether user checkbox is required on the checkbox before form submission. | `false` |
| isReadOnly | `boolean` | Whether the checkbox can be selected but not changed by the user. | |
| isDisabled | `boolean` | Whether the checkbox is disabled. | `false` |
| isIndeterminate | `boolean` | Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction. | |
| isInvalid | `boolean` | Whether the checkbox is invalid. | `false` |
| validationState | `valid` \| `invalid` | Whether the checkbox should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead. | - |
| disableAnimation | `boolean` | Whether the animation should be disabled. | `false` |
| classNames | `Record<"base"｜ "wrapper"｜ "icon"｜ "label", string>` | Allows to set custom class names for the checkbox slots. | - |

Expand Down
Loading
Loading