Skip to content

Commit

Permalink
refactor: improves types and api
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@jaredLunde
jaredLunde committed Jul 11, 2020
1 parent c6ca014 commit 72db571
Show file tree
Hide file tree
Showing 5 changed files with 209 additions and 359 deletions.
77 changes: 26 additions & 51 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,17 +35,17 @@ focus and update a checkbox input with the keyboard.

## Quick Start

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

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

const MyCheckbox = () => (
<label className="my-checkbox">
<Checkbox name="my-field-name">
<span className="my-checkbox">
<Checkmark checkedClass="checked" uncheckedClass="unchecked">
<span className="checkmark" />
<label className='my-checkbox'>
<Checkbox name='my-field-name'>
<span className='my-checkbox'>
<Checkmark checkedClass='checked' uncheckedClass='unchecked'>
<span className='checkmark' />
</Checkmark>
</span>
</Checkbox>
Expand All @@ -56,7 +56,7 @@ const MyCheckbox = () => (

## API

### `<Checkbox>`
### &lt;Checkbox&gt;

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

#### Props

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

### `<Checkmark>`
### &lt;Checkmark&gt;

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

#### Props

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

### `<Checked>`
### &lt;Checked&gt;

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

### `<Unchecked>`
### &lt;Unchecked&gt;

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

### `<Toggle>`
### &lt;Toggle&gt;

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

### `useCheckbox()`
### useCheckbox()

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

### `CheckboxContextValue`
### CheckboxContextValue

```typescript
interface CheckboxContextValue {
Expand All @@ -142,31 +142,6 @@ interface CheckboxContextValue {
}
```

### `useChecked()`

Returns `true` when the `<Checkbox>` is checked, otherwise `false`

### `useFocused()`

Returns `true` when the `<Checkbox>` is focused, otherwise `false`

### `useDisabled()`

Returns `true` when the `<Checkbox>` is disabled, otherwise `false`

### `useControls()`

This hook provides access to the `<Checkbox>`'s `check`, `uncheck`, and `toggle` functions

#### Example

```jsx harmony
const Component = () => {
const {check, uncheck, toggle} = useControls()
return <button onClick={toggle}>Toggle me</button>
}
```

## LICENSE

MIT
49 changes: 1 addition & 48 deletions src/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,6 @@ exports[`<Checkbox> should have a custom id: checkbox--foobar 1`] = `
</DocumentFragment>
`;
exports[`<Checkbox> should provide context to function child 1`] = `
Object {
"check": [Function],
"checked": false,
"disabled": false,
"focused": false,
"toggle": [Function],
"uncheck": [Function],
}
`;
exports[`<Checked> should be null when unchecked 1`] = `
<DocumentFragment>
<label
Expand Down Expand Up @@ -69,7 +58,6 @@ exports[`<Checkmark> should apply checked and unchecked styles: checked 1`] = `
type="checkbox"
/>
<span
class="checkbox--checked"
style="display: block;"
>
Checkmark
Expand Down Expand Up @@ -150,9 +138,7 @@ exports[`<Checkmark> should have \`unchecked\` class name when checked: checked
style="border: 0px; height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; position: absolute;"
type="checkbox"
/>
<span
class="checkbox--checked"
>
<span>
Checkmark
</span>
</label>
Expand Down Expand Up @@ -212,36 +198,3 @@ exports[`<Unchecked> should display when unchecked 1`] = `
</label>
</DocumentFragment>
`;
exports[`useFocused() should be \`true\` when focused, \`false\` when blurred: false 1`] = `
<DocumentFragment>
<input
data-testid="cb"
style="border: 0px; height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; position: absolute;"
type="checkbox"
/>
false
</DocumentFragment>
`;
exports[`useFocused() should be \`true\` when focused, \`false\` when blurred: false 2`] = `
<DocumentFragment>
<input
data-testid="cb"
style="border: 0px; height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; position: absolute;"
type="checkbox"
/>
false
</DocumentFragment>
`;
exports[`useFocused() should be \`true\` when focused, \`false\` when blurred: true 1`] = `
<DocumentFragment>
<input
data-testid="cb"
style="border: 0px; height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; position: absolute;"
type="checkbox"
/>
true
</DocumentFragment>
`;

0 comments on commit 72db571

Please sign in to comment.