Skip to content

Commit

Permalink
feat(components): rewrite Selector components (#560)
Browse files Browse the repository at this point in the history
* feat(components): rewrite the Selector as radio/checkbox

This makes the Selector component accessible (it wasn't before). It also brings the API inline with
the Checkbox and RadioButton components. Furthermore, it allows for multiple options to be selected.

BREAKING CHANGE:
The Selector component now accepts the onChange, value, name, and checked props. The onClick and
selected props have been removed.

ISSUES CLOSED: #544

* feat(components): increase color contrast on Selector

ISSUES CLOSED: #544

* feat(components): add SelectorGroup component

The SelectorGroup is a convenience component to display multiple, related Selector components in an
accessible way. The component API is modelled after the RadioButtonGroup component, so they can be
used interchangeably.

* fix(components): remove unnecessary attributes from Checkbox and RadioButton labels

The value and name attributes are not valid HTML attributes on the label element.

* feat(components): rename label prop for RadioButtonGroup options

The options that are passed to a RadioButtonGroup should include a children prop instead of a label
prop. This brings it in line with the RadioButton and SelectorGroup components.

BREAKING CHANGE:
The label property of the options prop of the RadioButtonGroup component has been renamed to
children.

* test(components): update storyshots

* refactor(docs): don't persist event unnecessarily
  • Loading branch information
connor-baer authored Apr 3, 2020
1 parent 6b39169 commit aa13889
Show file tree
Hide file tree
Showing 21 changed files with 1,555 additions and 568 deletions.
2 changes: 1 addition & 1 deletion scripts/static-styles/__fixtures__/functional-component.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ function FunctionalComponent({ label, value }) {
const id = 'id';
return (
<Wrapper>
<Label for={id}>{label}</Label>
<Label htmlFor={id}>{label}</Label>
<Input id={id} value={value} />
</Wrapper>
);
Expand Down
Loading

0 comments on commit aa13889

Please sign in to comment.