Skip to content

Commit 72db571

Browse files
jaredLundejaredLunde
committed
refactor: improves types and api
This commit removes superfluous hooks and improves the package's types BREAKING CHANGE: Removes `useControls()`, `useChecked()`, `useFocused()`, `useDisabled()` hooks and may also break types because they are more correct now.
1 parent c6ca014 commit 72db571

File tree

5 files changed

+209
-359
lines changed

5 files changed

+209
-359
lines changed

‎README.md

Lines changed: 26 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -35,17 +35,17 @@ focus and update a checkbox input with the keyboard.
3535

3636
## Quick Start
3737

38-
[Check out the example on CodeSandbox](https://codesandbox.io/s/accessiblecheckbox-examples-epc8b)
38+
[Check out the example on **CodeSandbox**](https://codesandbox.io/s/accessiblecheckbox-examples-epc8b)
3939

4040
```jsx harmony
4141
import {Checkbox, Checkmark} from '@accessible/checkbox'
4242

4343
const MyCheckbox = () => (
44-
<label className="my-checkbox">
45-
<Checkbox name="my-field-name">
46-
<span className="my-checkbox">
47-
<Checkmark checkedClass="checked" uncheckedClass="unchecked">
48-
<span className="checkmark" />
44+
<label className='my-checkbox'>
45+
<Checkbox name='my-field-name'>
46+
<span className='my-checkbox'>
47+
<Checkmark checkedClass='checked' uncheckedClass='unchecked'>
48+
<span className='checkmark' />
4949
</Checkmark>
5050
</span>
5151
</Checkbox>
@@ -56,7 +56,7 @@ const MyCheckbox = () => (
5656

5757
## API
5858

59-
### `<Checkbox>`
59+
### &lt;Checkbox&gt;
6060

6161
Creates a visually hidden checkbox input that is focusable and accessible via keyboard navigation.
6262
All props passed to this component are applied to the `<input>`. This also creates a context
@@ -65,28 +65,28 @@ deep in the tree.
6565

6666
#### Props
6767

68-
| Prop | Type | Default | Required? | Description |
69-
| -------------- | ----------------------------------------------------------------------------------------------------------------- | ----------- | --------- | ------------------------------------------------------------------------------------------------------------------------ |
70-
| checked | `boolean` | `undefined` | No | Makes the checkbox a controlled component which can no longer be updated with `check`, `uncheck`, and `toggle` controls. |
71-
| defaultChecked | `boolean` | `undefined` | No | Set this to `true` to make the checkbox `checked` by default. |
72-
| onChange | `(checked: boolean) => any` | `undefined` | No | Called each time the `checked` state changes. |
73-
| children | <code>React.ReactNode &#124; React.ReactNode[] &#124; ((context: CheckboxContextValue) => React.ReactNode)</code> | `undefined` | No | Your custom styled checkbox. |
68+
| Prop | Type | Default | Required? | Description |
69+
| -------------- | --------------------------- | ----------- | --------- | ------------------------------------------------------------------------------------------------------------------------ |
70+
| checked | `boolean` | `undefined` | No | Makes the checkbox a controlled component which can no longer be updated with `check`, `uncheck`, and `toggle` controls. |
71+
| defaultChecked | `boolean` | `undefined` | No | Set this to `true` to make the checkbox `checked` by default. |
72+
| onChange | `(checked: boolean) => any` | `undefined` | No | Called each time the `checked` state changes. |
73+
| children | `React.ReactNode` | `undefined` | No | Your custom styled checkbox. |
7474

75-
### `<Checkmark>`
75+
### &lt;Checkmark&gt;
7676

7777
A convenient component for conditionally adding class names and styles when the component is checked/unchecked.
7878

7979
#### Props
8080

81-
| Prop | Type | Default | Required? | Description |
82-
| -------------- | --------------------- | --------------------- | --------- | -------------------------------------------------------------------------------------- |
83-
| uncheckedClass | `string` | `undefined` | No | This class name will be applied to the child element when the checkbox is `unchecked`. |
84-
| checkedClass | `string` | `"checkbox--checked"` | No | This class name will be applied to the child element when the checkbox is `checked`. |
85-
| uncheckedStyle | `React.CSSProperties` | `undefined` | No | These styles will be applied to the child element when the checkbox is `unchecked`. |
86-
| checkedStyle | `React.CSSProperties` | `undefined` | No | These styles name will be applied to the child element when the checkbox is `checked`. |
87-
| children | `React.ReactNode` | `undefined` | Yes | The child you wish to render when the checkbox is checked. |
81+
| Prop | Type | Default | Required? | Description |
82+
| -------------- | --------------------- | ----------- | --------- | -------------------------------------------------------------------------------------- |
83+
| uncheckedClass | `string` | `undefined` | No | This class name will be applied to the child element when the checkbox is `unchecked`. |
84+
| checkedClass | `string` | `undefined` | No | This class name will be applied to the child element when the checkbox is `checked`. |
85+
| uncheckedStyle | `React.CSSProperties` | `undefined` | No | These styles will be applied to the child element when the checkbox is `unchecked`. |
86+
| checkedStyle | `React.CSSProperties` | `undefined` | No | These styles name will be applied to the child element when the checkbox is `checked`. |
87+
| children | `React.ReactNode` | `undefined` | Yes | The child you wish to render when the checkbox is checked. |
8888

89-
### `<Checked>`
89+
### &lt;Checked&gt;
9090

9191
The child of this component will only render when the `<Checkbox>` is in
9292
a `checked` state. It must be a child of a `<Checkbox>`.
@@ -97,7 +97,7 @@ a `checked` state. It must be a child of a `<Checkbox>`.
9797
| -------- | ----------------- | ----------- | --------- | ---------------------------------------------------------- |
9898
| children | `React.ReactNode` | `undefined` | Yes | The child you wish to render when the checkbox is checked. |
9999

100-
### `<Unchecked>`
100+
### &lt;Unchecked&gt;
101101

102102
The child of this component will only render when the `<Checkbox>` is in
103103
an `unchecked` state. It must be a child of a `<Checkbox>`.
@@ -108,7 +108,7 @@ an `unchecked` state. It must be a child of a `<Checkbox>`.
108108
| -------- | ----------------- | ----------- | --------- | ------------------------------------------------------------ |
109109
| children | `React.ReactNode` | `undefined` | Yes | The child you wish to render when the checkbox is unchecked. |
110110

111-
### `<Toggle>`
111+
### &lt;Toggle&gt;
112112

113113
This component clones its child and adds an `onClick` handler to toggle the `<Checkbox>` between
114114
`checked` and `unchecked` states. It must be a child of a `<Checkbox>`.
@@ -119,11 +119,11 @@ This component clones its child and adds an `onClick` handler to toggle the `<Ch
119119
| -------- | ----------------- | ----------- | --------- | ------------------------------------------------------------ |
120120
| children | `React.ReactNode` | `undefined` | Yes | The child you wish to render when the checkbox is unchecked. |
121121

122-
### `useCheckbox()`
122+
### useCheckbox()
123123

124124
A React hook that returns the [`CheckboxContextValue`](#checkboxcontextvalue) for the nearest `<Checkbox>` parent.
125125

126-
### `CheckboxContextValue`
126+
### CheckboxContextValue
127127

128128
```typescript
129129
interface CheckboxContextValue {
@@ -142,31 +142,6 @@ interface CheckboxContextValue {
142142
}
143143
```
144144

145-
### `useChecked()`
146-
147-
Returns `true` when the `<Checkbox>` is checked, otherwise `false`
148-
149-
### `useFocused()`
150-
151-
Returns `true` when the `<Checkbox>` is focused, otherwise `false`
152-
153-
### `useDisabled()`
154-
155-
Returns `true` when the `<Checkbox>` is disabled, otherwise `false`
156-
157-
### `useControls()`
158-
159-
This hook provides access to the `<Checkbox>`'s `check`, `uncheck`, and `toggle` functions
160-
161-
#### Example
162-
163-
```jsx harmony
164-
const Component = () => {
165-
const {check, uncheck, toggle} = useControls()
166-
return <button onClick={toggle}>Toggle me</button>
167-
}
168-
```
169-
170145
## LICENSE
171146

172147
MIT

‎src/__snapshots__/index.test.tsx.snap

Lines changed: 1 addition & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,6 @@ exports[`<Checkbox> should have a custom id: checkbox--foobar 1`] = `
1111
</DocumentFragment>
1212
`;
1313
14-
exports[`<Checkbox> should provide context to function child 1`] = `
15-
Object {
16-
"check": [Function],
17-
"checked": false,
18-
"disabled": false,
19-
"focused": false,
20-
"toggle": [Function],
21-
"uncheck": [Function],
22-
}
23-
`;
24-
2514
exports[`<Checked> should be null when unchecked 1`] = `
2615
<DocumentFragment>
2716
<label
@@ -69,7 +58,6 @@ exports[`<Checkmark> should apply checked and unchecked styles: checked 1`] = `
6958
type="checkbox"
7059
/>
7160
<span
72-
class="checkbox--checked"
7361
style="display: block;"
7462
>
7563
Checkmark
@@ -150,9 +138,7 @@ exports[`<Checkmark> should have \`unchecked\` class name when checked: checked
150138
style="border: 0px; height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; position: absolute;"
151139
type="checkbox"
152140
/>
153-
<span
154-
class="checkbox--checked"
155-
>
141+
<span>
156142
Checkmark
157143
</span>
158144
</label>
@@ -212,36 +198,3 @@ exports[`<Unchecked> should display when unchecked 1`] = `
212198
</label>
213199
</DocumentFragment>
214200
`;
215-
216-
exports[`useFocused() should be \`true\` when focused, \`false\` when blurred: false 1`] = `
217-
<DocumentFragment>
218-
<input
219-
data-testid="cb"
220-
style="border: 0px; height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; position: absolute;"
221-
type="checkbox"
222-
/>
223-
false
224-
</DocumentFragment>
225-
`;
226-
227-
exports[`useFocused() should be \`true\` when focused, \`false\` when blurred: false 2`] = `
228-
<DocumentFragment>
229-
<input
230-
data-testid="cb"
231-
style="border: 0px; height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; position: absolute;"
232-
type="checkbox"
233-
/>
234-
false
235-
</DocumentFragment>
236-
`;
237-
238-
exports[`useFocused() should be \`true\` when focused, \`false\` when blurred: true 1`] = `
239-
<DocumentFragment>
240-
<input
241-
data-testid="cb"
242-
style="border: 0px; height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; position: absolute;"
243-
type="checkbox"
244-
/>
245-
true
246-
</DocumentFragment>
247-
`;

0 commit comments

Comments
 (0)