Skip to content

Commit

Permalink
fix(packages): validation state deprecated, isInvalid prop adjusted (#…
Browse files Browse the repository at this point in the history 
…1631)
  • Loading branch information
@jrgarciadev
jrgarciadev authored Sep 16, 2023
1 parent a5a1ea5 commit 425a034
Show file tree
Hide file tree
Showing 30 changed files with 435 additions and 169 deletions.
9 changes: 9 additions & 0 deletions .changeset/rotten-cats-search.md
View file
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
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
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
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
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
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
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
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
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
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
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

1 comment on commit 425a034

@vercel
Copy link

@vercel vercel bot commented on 425a034 Sep 16, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

nextui-storybook-v2 – ./packages/storybook

nextui-storybook-v2-git-main-nextui-org.vercel.app
nextui-storybook-v2-nextui-org.vercel.app
storybook.nextui.org
nextui-storybook-v2.vercel.app
sb.nextui.org

Please sign in to comment.