Skip to content

Commit

Permalink
refactor: update apis owned by nextui and fix table integration
Browse files Browse the repository at this point in the history
  • Loading branch information
tianenpang committed May 8, 2022
1 parent c692763 commit f37300c
Show file tree
Hide file tree
Showing 20 changed files with 110 additions and 122 deletions.
Expand Up @@ -6,7 +6,7 @@ export default function App() {
return (
<>
<Checkbox defaultSelected color="success">Subscribe (uncontrolled)</Checkbox>
<Checkbox defaultSelected={true} color="success">Subscribe (uncontrolled)</Checkbox>
<Spacer x={1} />
<Checkbox isSelected={selected} color="success" onChange={setSelected} >
Subscribe (controlled)
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/checkbox/disabled.ts
Expand Up @@ -2,7 +2,7 @@ const App = `import { Checkbox } from "@nextui-org/react";
export default function App() {
return (
<Checkbox isDisabled defaultSelected={true}>
<Checkbox isDisabled={true} defaultSelected={true}>
Default
</Checkbox>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/checkbox/interminate.ts
Expand Up @@ -2,7 +2,7 @@ const App = `import { Checkbox } from "@nextui-org/react";
export default function App() {
return (
<Checkbox isIndeterminate defaultSelected={true}>
<Checkbox isIndeterminate={true} defaultSelected={true}>
Option
</Checkbox>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/checkbox/line-through.ts
Expand Up @@ -2,7 +2,7 @@ const App = `import { Checkbox } from "@nextui-org/react";
export default function App() {
return (
<Checkbox line defaultSelected={true}>
<Checkbox lineThrough={true} defaultSelected={true}>
Option
</Checkbox>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/checkbox/no-animated.ts
Expand Up @@ -2,7 +2,7 @@ const App = `import { Checkbox } from "@nextui-org/react";
export default function App() {
return (
<Checkbox line animated={false} defaultSelected={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
Expand Up @@ -2,7 +2,7 @@ const App = `import { Checkbox } from "@nextui-org/react";
export default function App() {
return (
<Checkbox rounded color="primary" defaultSelected={true}>
<Checkbox isRounded={true} defaultSelected={true} color="primary">
Rounded option
</Checkbox>
);
Expand Down
48 changes: 24 additions & 24 deletions apps/docs/content/docs/components/checkbox.mdx
Expand Up @@ -49,7 +49,7 @@ 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}
/>

Expand All @@ -61,7 +61,7 @@ import { Checkbox } from '@nextui-org/react';

<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}
/>

Expand All @@ -75,7 +75,7 @@ import { Checkbox } from '@nextui-org/react';
<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,27 +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` |
| **isSelected** | `boolean` | Whether the element should be selected (controlled) | `false` |
| **defaultSelected** | `boolean` | Whether the element should be selected (uncontrolled) | `false` |
| **animated** | `boolean` | Whether the checkbox has animations | `true` |
| **isDisabled** | `boolean` | Whether the input is disabled | `false` |
| **isIndeterminate** | `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 | - |
| **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` |
| 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

0 comments on commit f37300c

Please sign in to comment.