Skip to content

Commit fb69848

Browse files
mcnaveenmcnaveen
committed
docs(docs): 📝 improve documentation for multiple components
1 parent a8e84df commit fb69848

File tree

18 files changed

+191
-188
lines changed

18 files changed

+191
-188
lines changed

‎pages/docs/components/feedback/circular-progress.mdx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ import {
2626
CircularProgressBarWrapper,
2727
CircularProgressHint,
2828
CircularProgressTrack,
29-
CircularProgressTrackWrapper,
3029
} from "@adaptui/react-tailwind";
3130
```
3231

‎pages/docs/components/feedback/progress.mdx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,6 @@ import {
2222
ProgressBar,
2323
ProgressHint,
2424
ProgressLabel,
25-
useProgressProps,
26-
useProgressState,
2725
ProgressTrack,
2826
ProgressWrapper,
2927
} from "@adaptui/react-tailwind";

‎pages/docs/components/feedback/show-more.mdx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
# ShowMore
88

99
ShowMore is used to display the progress status for a task that takes a long
10-
time or consists of several steps. It uses Arikits's
10+
time or consists of several steps. It uses Ariakit's
1111
[Disclosure](https://reakit.io/docs/disclosure/) component internally.
1212

1313
<ComponentLinks github="show-more" story="feedback-showmore" />
@@ -19,8 +19,6 @@ import {
1919
ShowMore,
2020
ShowMoreButton,
2121
ShowMoreContent,
22-
useShowMoreProps,
23-
useShowMoreState,
2422
} from "@adaptui/react-tailwind";
2523
```
2624

‎pages/docs/components/forms/checkbox-group.mdx‎

Lines changed: 82 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ import {
22
ComponentLinks,
33
InteractiveCodeblock,
44
PropsTable,
5-
Codeblock,
65
} from "@/components/index";
76

87
# CheckboxGroup
98

109
CheckboxGroup are used when multiple choices may be selected in a series of
11-
options. CheckboxGroup composes `Checkbox` component.
10+
options. CheckboxGroup composes `Checkbox` component. It uses Ariakit's
11+
[Checkbox](https://reakit.io/docs/checkbox/) component internally.
1212

1313
<ComponentLinks
1414
github="checkbox-group"
@@ -21,8 +21,6 @@ options. CheckboxGroup composes `Checkbox` component.
2121
```js
2222
import {
2323
CheckboxGroup,
24-
useCheckboxGroupProps,
25-
useCheckboxGroupState,
2624
CheckboxGroupWrapper,
2725
CheckboxShowMore,
2826
} from "@adaptui/react-tailwind";
@@ -44,7 +42,7 @@ import {
4442
<Checkbox value="grapes" label="Grapes" />
4543
</CheckboxGroup>
4644
`}
47-
themeProps={{ size: "checkbox.icon.size" }}
45+
themeProps={{ size: "checkbox.size" }}
4846
/>
4947

5048
## CheckboxGroup sizes
@@ -58,30 +56,29 @@ sizes are: `sm` `md` `lg`
5856
import { CheckboxGroup, Checkbox } from "@adaptui/react-tailwind";
5957
6058
export const App = props => {
61-
return (
62-
63-
const CheckboxGroupBasic = props => {
64-
return (
65-
<CheckboxGroup aria-label="fruits" {...props}>
66-
<Checkbox value="apple" label="Apple" />
67-
<Checkbox value="orange" label="Orange" />
68-
<Checkbox value="watermelon" label="Watermelon" />
69-
<Checkbox value="grapes" label="Grapes" />
70-
</CheckboxGroup>
71-
);
59+
const CheckboxGroupBasic = props => {
60+
return (
61+
<CheckboxGroup aria-label="fruits" {...props}>
62+
<Checkbox value="apple" label="Apple" />
63+
<Checkbox value="orange" label="Orange" />
64+
<Checkbox value="watermelon" label="Watermelon" />
65+
<Checkbox value="grapes" label="Grapes" />
66+
</CheckboxGroup>
67+
);
68+
};
69+
70+
const CheckboxGroupStack = props => {
71+
return (
72+
<div className="flex space-x-2">
73+
<CheckboxGroupBasic size="sm" />
74+
<CheckboxGroupBasic size="md" />
75+
<CheckboxGroupBasic size="lg" />
76+
</div>
77+
);
78+
};
79+
80+
return <CheckboxGroupStack />;
7281
};
73-
74-
const CheckboxGroupStack = props => { return (
75-
76-
<div className="flex space-x-2">
77-
<CheckboxGroupBasic size="sm" />
78-
<CheckboxGroupBasic size="md" />
79-
<CheckboxGroupBasic size="lg" />
80-
</div>
81-
); };
82-
83-
84-
render (<CheckboxGroupStack/>); `} />
8582
```
8683

8784
</Codeblock>
@@ -90,66 +87,80 @@ render (<CheckboxGroupStack/>); `} />
9087

9188
CheckboxGroup can be arranged `vertical` or `horizontal`
9289

93-
<Codeblock
94-
live
95-
noInline
96-
code={`
97-
const CheckboxGroupBasic = props => {
98-
return (
99-
<CheckboxGroup aria-label="fruits" {...props}>
100-
<Checkbox value="apple" label="Apple" />
101-
<Checkbox value="orange" label="Orange" />
102-
<Checkbox value="watermelon" label="Watermelon" />
103-
<Checkbox value="grapes" label="Grapes" />
104-
</CheckboxGroup>
105-
);
106-
};
90+
<Codeblock live noInline>
10791

108-
const CheckboxGroupStack = props => { return (
92+
```
93+
import { CheckboxGroup, Checkbox } from "@adaptui/react-tailwind";
10994
110-
<div className="flex flex-col space-y-2">
111-
<CheckboxGroupBasic size="md" stack="vertical" />
112-
<CheckboxGroupBasic size="md" stack="horizontal" />
113-
</div>
114-
); };
95+
export const App = props => {
96+
const CheckboxGroupBasic = props => {
97+
return (
98+
<CheckboxGroup aria-label="fruits" {...props}>
99+
<Checkbox value="apple" label="Apple" />
100+
<Checkbox value="orange" label="Orange" />
101+
<Checkbox value="watermelon" label="Watermelon" />
102+
<Checkbox value="grapes" label="Grapes" />
103+
</CheckboxGroup>
104+
);
105+
};
106+
107+
const CheckboxGroupStack = props => {
108+
return (
109+
<div className="flex flex-col space-y-2">
110+
<CheckboxGroupBasic size="md" stack="vertical" />
111+
<CheckboxGroupBasic size="md" stack="horizontal" />
112+
</div>
113+
);
114+
};
115+
116+
return <CheckboxGroupStack />;
117+
};
118+
```
115119

116-
render (<CheckboxGroupStack/>); `} />
120+
</Codeblock>
117121

118122
## CheckboxGroup Show More
119123

120124
CheckboxGroup with more Checkboxs can be made hidden by adding `maxVisibleItems`
121125
prop
122126

123-
<Codeblock
124-
live
125-
noInline
126-
code={`
127-
const CheckboxGroupBasic = props => {
128-
return (
129-
<CheckboxGroup aria-label="fruits" maxVisibleItems={2} {...props}>
130-
<Checkbox value="apple" label="Apple" />
131-
<Checkbox value="orange" label="Orange" />
132-
<Checkbox value="watermelon" label="Watermelon" />
133-
<Checkbox value="grapes" label="Grapes" />
134-
</CheckboxGroup>
135-
);
136-
};
127+
<Codeblock live noInline>
137128

138-
const CheckboxGroupStack = props => { return (
129+
```
130+
import { CheckboxGroup, Checkbox } from "@adaptui/react-tailwind";
139131
140-
<div className="flex flex-col space-y-2">
141-
<CheckboxGroupBasic size="md" stack="vertical" className="w-32" />
142-
<CheckboxGroupBasic size="md" stack="horizontal" />
143-
</div>
144-
); };
132+
export const App = props => {
133+
const CheckboxGroupBasic = props => {
134+
return (
135+
<CheckboxGroup aria-label="fruits" maxVisibleItems={2} {...props}>
136+
<Checkbox value="apple" label="Apple" />
137+
<Checkbox value="orange" label="Orange" />
138+
<Checkbox value="watermelon" label="Watermelon" />
139+
<Checkbox value="grapes" label="Grapes" />
140+
</CheckboxGroup>
141+
);
142+
};
143+
144+
const CheckboxGroupStack = props => {
145+
return (
146+
<div className="flex flex-col space-y-2">
147+
<CheckboxGroupBasic size="md" stack="vertical" className="w-32" />
148+
<CheckboxGroupBasic size="md" stack="horizontal" />
149+
</div>
150+
);
151+
};
152+
153+
return <CheckboxGroupStack />;
154+
};
155+
```
145156

146-
render (<CheckboxGroupStack/>); `} />
157+
</Codeblock>
147158

148159
## API Reference
149160

150161
<PropsTable
151162
data={[
152-
{ name: "size", themeKey: "checkbox.icon.size", default: "md" },
163+
{ name: "size", themeKey: "checkbox.size", default: "md" },
153164
{
154165
name: "stack",
155166
type: "string",
@@ -164,7 +175,3 @@ render (<CheckboxGroupStack/>); `} />
164175
},
165176

166177
]} />
167-
168-
```
169-
170-
```

‎pages/docs/components/forms/checkbox.mdx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import {
88
# Checkbox
99

1010
The Checkbox is used in forms when a user needs to select multiple values from
11-
several options. Checkbox composes
12-
[reakit's checkbox](https://reakit.io/docs/checkbox/) component.
11+
several options. Checkbox composes Ariakit's
12+
[checkbox](https://reakit.io/docs/checkbox/) component.
1313

1414
<ComponentLinks github="checkbox" theme="checkbox" story="forms-checkbox" />
1515

@@ -22,9 +22,8 @@ import {
2222
CheckboxIcon,
2323
CheckboxInput,
2424
CheckboxLabel,
25-
useCheckboxProps,
26-
useCheckboxState,
2725
CheckboxText,
26+
CheckboxTextWrapper,
2827
} from "@adaptui/react-tailwind";
2928
```
3029

‎pages/docs/components/forms/input.mdx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import {
22
ComponentLinks,
33
InteractiveCodeblock,
44
PropsTable,
5-
Codeblock,
65
} from "@/components/index";
76

87
# Input
98

10-
The Input component is a text field used to get input from the user.
9+
The Input component is a text field used to get input from the user. It uses
10+
Ariakit's [Input](https://reakit.io/docs/input/) Component internally.
1111

1212
<ComponentLinks github="input" theme="input" story="forms-input" />
1313

@@ -19,8 +19,6 @@ import {
1919
InputBase,
2020
InputPrefix,
2121
InputSuffix,
22-
useInputProps,
23-
useInputState,
2422
InputWrapper,
2523
} from "@adaptui/react-tailwind";
2624
```

0 commit comments

Comments
 (0)