Skip to content

Commit

Permalink
Merge pull request #435 from tianenpang/fix/checkbox-initialchecked
Browse files Browse the repository at this point in the history 
refactor: use react-aria/checkbox prop types instead for better integration
  • Loading branch information
@jrgarciadev
jrgarciadev committed May 8, 2022
2 parents 33c8ae2 + 90ded09 commit b922bb9
Show file tree
Hide file tree
Showing 29 changed files with 546 additions and 462 deletions.
13 changes: 7 additions & 6 deletions apps/docs/content/components/checkbox/color.ts
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,29 @@
const App = `import { Checkbox, Spacer } from "@nextui-org/react";
export default function App() {
return (
<>
<Checkbox color="primary" initialChecked={true}>
<Checkbox color="primary" defaultSelected={true}>
Primary
</Checkbox>
<Spacer />
<Checkbox color="secondary" initialChecked={true}>
<Checkbox color="secondary" defaultSelected={true}>
Secondary
</Checkbox>
<Spacer />
<Checkbox color="success" initialChecked={true}>
<Checkbox color="success" defaultSelected={true}>
Success
</Checkbox>
<Spacer />
<Checkbox color="warning" initialChecked={true}>
<Checkbox color="warning" defaultSelected={true}>
Warning
</Checkbox>
<Spacer />
<Checkbox color="error" initialChecked={true}>
<Checkbox color="error" defaultSelected={true}>
Error
</Checkbox>
<Spacer />
<Checkbox color="gradient" initialChecked={true}>
<Checkbox color="gradient" defaultSelected={true}>
Gradient
</Checkbox>
</>
Expand Down
4 changes: 2 additions & 2 deletions apps/docs/content/components/checkbox/controlled-vs-uncontrolled.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ export default function App() {
return (
<>
<Checkbox initialChecked color="success">Subscribe (uncontrolled)</Checkbox>
<Checkbox defaultSelected={true} color="success">Subscribe (uncontrolled)</Checkbox>
<Spacer x={1} />
<Checkbox checked={selected} color="success" onChange={setSelected} >
<Checkbox isSelected={selected} color="success" onChange={setSelected} >
Subscribe (controlled)
</Checkbox>
</>
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/checkbox/default.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const App = `import { Checkbox } from "@nextui-org/react";
export default function App() {
return <Checkbox initialChecked={true}>Option</Checkbox>;
return <Checkbox defaultSelected={true}>Option</Checkbox>;
}`;

const react = {
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/checkbox/disabled.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ const App = `import { Checkbox } from "@nextui-org/react";
export default function App() {
return (
<Checkbox disabled initialChecked={true}>
<Checkbox isDisabled={true} defaultSelected={true}>
Default
</Checkbox>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/checkbox/interminate.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ const App = `import { Checkbox } from "@nextui-org/react";
export default function App() {
return (
<Checkbox indeterminate initialChecked={true}>
<Checkbox isIndeterminate={true} defaultSelected={true}>
Option
</Checkbox>
);
Expand Down
10 changes: 5 additions & 5 deletions apps/docs/content/components/checkbox/label-color.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,23 @@ const App = `import { Checkbox, Spacer } from "@nextui-org/react";
export default function App() {
return (
<>
<Checkbox color="primary" labelColor="primary" initialChecked={true}>
<Checkbox color="primary" labelColor="primary" defaultSelected={true}>
Primary
</Checkbox>
<Spacer />
<Checkbox color="secondary" labelColor="secondary" initialChecked={true}>
<Checkbox color="secondary" labelColor="secondary" defaultSelected={true}>
Secondary
</Checkbox>
<Spacer />
<Checkbox color="success" labelColor="success" initialChecked={true}>
<Checkbox color="success" labelColor="success" defaultSelected={true}>
Success
</Checkbox>
<Spacer />
<Checkbox color="warning" labelColor="warning" initialChecked={true}>
<Checkbox color="warning" labelColor="warning" defaultSelected={true}>
Warning
</Checkbox>
<Spacer />
<Checkbox color="error" labelColor="error" initialChecked={true}>
<Checkbox color="error" labelColor="error" defaultSelected={true}>
Error
</Checkbox>
</>
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/checkbox/line-through.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ const App = `import { Checkbox } from "@nextui-org/react";
export default function App() {
return (
<Checkbox line initialChecked={true}>
<Checkbox lineThrough={true} defaultSelected={true}>
Option
</Checkbox>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/checkbox/no-animated.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ const App = `import { Checkbox } from "@nextui-org/react";
export default function App() {
return (
<Checkbox line animated={false} initialChecked={true}>
<Checkbox disableAnimation={true} defaultSelected={true} lineThrough={true}>
Option
</Checkbox>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/checkbox/rounded.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ const App = `import { Checkbox } from "@nextui-org/react";
export default function App() {
return (
<Checkbox rounded color="primary" initialChecked={true}>
<Checkbox isRounded={true} defaultSelected={true} color="primary">
Rounded option
</Checkbox>
);
Expand Down
10 changes: 5 additions & 5 deletions apps/docs/content/components/checkbox/size.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,23 @@ const App = `import { Checkbox, Spacer } from "@nextui-org/react";
export default function App() {
return (
<>
<Checkbox initialChecked={true} size="xs">
<Checkbox defaultSelected={true} size="xs">
mini
</Checkbox>
<Spacer />
<Checkbox initialChecked={true} size="sm">
<Checkbox defaultSelected={true} size="sm">
small
</Checkbox>
<Spacer />
<Checkbox initialChecked={true} size="md">
<Checkbox defaultSelected={true} size="md">
medium
</Checkbox>
<Spacer />
<Checkbox initialChecked={true} size="lg">
<Checkbox defaultSelected={true} size="lg">
large
</Checkbox>
<Spacer />
<Checkbox initialChecked={true} size="xl">
<Checkbox defaultSelected={true} size="xl">
xlarge
</Checkbox>
</>
Expand Down
5 changes: 2 additions & 3 deletions apps/docs/content/docs/components/checkbox-group.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,10 @@ import { Checkbox } from '@nextui-org/react';
| **size** | [NormalSizes](#normal-sizes) | The size of the component | `medium` |
| **color** | [NormalColors](#normal-colors) | The color of the component | `default` |
| **labelColor** | [SimpleColors](#simple-colors) | The color of the label | `default` |
| **disabled** | `boolean` | Whether the checkbox group is disabled | `false` |
| **readOnly** | `boolean` | Whether the input can be selected but not changed by the user. | `false` |
| **isDisabled** | `boolean` | Whether the checkbox group is disabled | `false` |
| **isReadOnly** | `boolean` | Whether the input can be selected but not changed by the user. | `false` |
| **css** | `Stitches.CSS` | Override Default CSS style | - |
| **as** | `keyof JSX.IntrinsicElements` | Changes which tag component outputs | `div` |
| ... | `HTMLDivAttributes` | Native element props | - |

<Spacer y={1} />

Expand Down
53 changes: 26 additions & 27 deletions apps/docs/content/docs/components/checkbox.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,33 +49,33 @@ import { Checkbox } from '@nextui-org/react';

<Playground
title="Rounded"
desc="You can change the full style to a rounded `Checkbox` with the `rounded` property."
desc="You can change the full style to a rounded `Checkbox` with the `isRounded` property."
files={checkboxContent.rounded}
/>

<Playground
title="Indeterminate"
desc="A `Checkbox` can be in an indeterminate state, controlled using the `interminate` prop."
desc="A `Checkbox` can be in an indeterminate state, controlled using the `isIndeterminate` prop."
files={checkboxContent.interminate}
/>

<Playground
title="Line Through"
desc="Add a line in the middle of the label when the `Checkbox` is checked with the property `line`"
desc="Add a line in the middle of the label when the `Checkbox` is checked with the property `lineThrough`"
files={checkboxContent.lineThrough}
/>

<Playground
title="Controlled vs Uncontrolled"
desc="Checkboxes are not selected by default. The `initialChecked` prop can be used to set the default state (uncontrolled). Alternatively, the `checked` prop can be used to make the selected state controlled."
desc="Checkboxes are not selected by default. The `defaultSelected` prop can be used to set the default state (uncontrolled). Alternatively, the `isSelected` prop can be used to make the selected state controlled."
files={checkboxContent.controlledVsUncontrolled}
/>

> Note: See React's documentation on [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) for more info.
<Playground
title="No Animated"
desc="You can disable the animation of the entire `Checkbox` with the property `animated={false}`."
desc="You can disable the animation of the entire `Checkbox` with the property `disableAnimation={true}`."
files={checkboxContent.noAnimation}
/>

Expand All @@ -87,28 +87,27 @@ import { Checkbox } from '@nextui-org/react';

#### Checkbox Props

| Attribute | Type | Description | Default |
| ------------------ | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| **children** | `ReactNode` | The label for the element | - |
| **value** | `string` | The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue) | - |
| **label** | `string` | The label for the element | - |
| **name** | `string` | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname) | - |
| **color** | [NormalColors](#normal-colors) | The color of the component | `default` |
| **labelColor** | [SimpleColors](#simple-colors) | The color of the label | `default` |
| **size** | [NormalSizes](#normal-sizes) | The size of the component | `md` |
| **checked** | `boolean` | Whether the element should be checked (controlled) | `false` |
| **initialChecked** | `boolean` | Whether the element should be checked (uncontrolled) | `false` |
| **animated** | `boolean` | Whether the checkbox has animations | `true` |
| **disabled** | `boolean` | Whether the input is disabled | `false` |
| **indeterminate** | `boolean` | Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction. | `false` |
| **rounded** | `boolean` | Whether the checkbox is rounded | `false` |
| **line** | `boolean` | Line in the middle of the label when the `Checkbox` is checked | - |
| **readOnly** | `boolean` | Whether the input can be selected but not changed by the user. | `false` |
| **required** | `boolean` | Whether user input is required on the input before form submission. | `false` |
| **autoFocus** | `boolean` | Whether the element should receive focus on render |
| **css** | `Stitches.CSS` | Override Default CSS style | - |
| **as** | `keyof JSX.IntrinsicElements` | Changes which tag component outputs | `label` |
| ... | `HTMLLabelElement` | Native element props | - |
| Attribute | Type | Description | Default |
| -------------------- | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| **children** | `ReactNode` | The label for the element | - |
| **value** | `string` | The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue) | - |
| **label** | `string` | The label for the element | - |
| **name** | `string` | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname) | - |
| **color** | [NormalColors](#normal-colors) | The color of the component | `default` |
| **labelColor** | [SimpleColors](#simple-colors) | The color of the label | `default` |
| **size** | [NormalSizes](#normal-sizes) | The size of the component | `md` |
| **isSelected** | `boolean` | Whether the element should be selected (controlled) | `false` |
| **defaultSelected** | `boolean` | Whether the element should be selected (uncontrolled) | `false` |
| **disableAnimation** | `boolean` | Whether the checkbox has animations | `false` |
| **isDisabled** | `boolean` | Whether the input is disabled | `false` |
| **isIndeterminate** | `boolean` | Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction. | `false` |
| **isRounded** | `boolean` | Whether the checkbox is rounded | `false` |
| **lineThrough** | `boolean` | Line in the middle of the label when the `Checkbox` is checked | - |
| **isReadOnly** | `boolean` | Whether the input can be selected but not changed by the user. | `false` |
| **isRequired** | `boolean` | Whether user input is required on the input before form submission. | `false` |
| **autoFocus** | `boolean` | Whether the element should receive focus on render |
| **css** | `Stitches.CSS` | Override Default CSS style | - |
| **as** | `keyof JSX.IntrinsicElements` | Changes which tag component outputs | `label` |

<Spacer y={1} />

Expand Down
8 changes: 5 additions & 3 deletions apps/docs/content/docs/manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,13 +143,15 @@
},
{
"title": "Checkbox",
"updated": true,
"keywords": "check, radio, selectable, checkbox, box",
"path": "/docs/components/checkbox.mdx"
},
{
"title": "Checkbox Group",
"keywords": "check, radio, selectable, checkbox, box, group, items",
"path": "/docs/components/checkbox-group.mdx"
"title": "Checkbox Group",
"updated": true,
"keywords": "check, radio, selectable, checkbox, box, group, items",
"path": "/docs/components/checkbox-group.mdx"
},
{
"title": "Radio",
Expand Down

0 comments on commit b922bb9

Please sign in to comment.