Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add CheckboxGroup and RadioGroup components #830

Merged
merged 32 commits into from
Dec 3, 2024
+1,366 −1
Merged

Add CheckboxGroup and RadioGroup components #830

Changes from 1 commit
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
885dd26
add CheckboxGroup, RadioGroup, and InputGroup components
joshfarrant Nov 21, 2024
09ba756
add changeset
joshfarrant Nov 25, 2024
50b888c
update snapshots
joshfarrant Nov 25, 2024
c3f881d
improve changeset
joshfarrant Nov 25, 2024
b71c4c2
remove unused InputGroup test file
joshfarrant Nov 25, 2024
e43f7fb
fixed broken animation
joshfarrant Nov 25, 2024
aca86dc
github-actions[bot] Regenerated snapshots
joshfarrant Nov 25, 2024
790fa13
rename InputGroup to ControlGroup
joshfarrant Nov 25, 2024
526ae02
reset snapshots
joshfarrant Nov 26, 2024
a9aca70
reduce Caption and Validation font-size to 100
joshfarrant Nov 26, 2024
52cc180
rename CSS declaration file
joshfarrant Nov 26, 2024
810a183
github-actions[bot] Regenerated snapshots
joshfarrant Nov 26, 2024
d65b102
add documentation for CheckboxGroup and RadioGroup components
joshfarrant Nov 27, 2024
4b9b5f4
reduce font-weight on FormControl labels within a ControlGroup
joshfarrant Nov 27, 2024
78366b2
github-actions[bot] Regenerated snapshots
joshfarrant Nov 27, 2024
7bd4fea
update changeset
joshfarrant Nov 27, 2024
0fd5510
update changeset semver bump
joshfarrant Nov 27, 2024
df783b5
various docs updates based on PR feedback
joshfarrant Nov 27, 2024
fa4729d
leverage Text component
joshfarrant Nov 27, 2024
17aefc5
split stories up into multiple fies
joshfarrant Nov 27, 2024
8405890
remove regex
joshfarrant Nov 27, 2024
3bbaec1
updated docs to align with prc
joshfarrant Nov 27, 2024
d3ab439
fix tabs in React docs
joshfarrant Nov 27, 2024
1aa22e8
fix case
joshfarrant Nov 27, 2024
8e91013
stop forwarding unused prop to Radio
joshfarrant Nov 27, 2024
fc5f393
correct casing
joshfarrant Dec 2, 2024
160275a
modify styles to avoid :global selector
joshfarrant Dec 3, 2024
c3dc707
update animation easing
joshfarrant Dec 3, 2024
e6096f8
update links in docs
joshfarrant Dec 3, 2024
7c3b183
update changeset
joshfarrant Dec 3, 2024
e6f5a23
github-actions[bot] Regenerated snapshots
joshfarrant Dec 3, 2024
b535c93
remove nested describe
joshfarrant Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
remove nested describe
@joshfarrant
joshfarrant committed Dec 3, 2024
commit b535c9317345bad7e5205423015f9dbb40ee8782
162 changes: 80 additions & 82 deletions packages/react/src/forms/CheckboxGroup/CheckboxGroup.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -67,87 +67,85 @@ describe('CheckboxGroup', () => {
expect(results).toHaveNoViolations()
})

describe('aria-describedby', () => {
it('associates the hint with the input', () => {
const {getByRole, getByText} = render(
<CheckboxGroup>
<CheckboxGroup.Label>Choices</CheckboxGroup.Label>
<CheckboxGroup.Caption>You can only pick one</CheckboxGroup.Caption>
<FormControl>
<FormControl.Label>Choice one</FormControl.Label>
<Checkbox value="one" defaultChecked />
</FormControl>
<FormControl>
<FormControl.Label>Choice two</FormControl.Label>
<Checkbox value="two" />
</FormControl>
<FormControl>
<FormControl.Label>Choice three</FormControl.Label>
<Checkbox value="three" />
</FormControl>
</CheckboxGroup>,
)

const fieldset = getByRole('group', {name: 'Choices'})
const caption = getByText('You can only pick one')

expect(fieldset).toHaveAttribute('aria-describedby', caption.id)
})

it('associates the validation with the input', () => {
const {getByRole, getByText} = render(
<CheckboxGroup>
<CheckboxGroup.Label>Choices</CheckboxGroup.Label>
<FormControl>
<FormControl.Label>Choice one</FormControl.Label>
<Checkbox value="one" defaultChecked />
</FormControl>
<FormControl>
<FormControl.Label>Choice two</FormControl.Label>
<Checkbox value="two" />
</FormControl>
<FormControl>
<FormControl.Label>Choice three</FormControl.Label>
<Checkbox value="three" />
</FormControl>

<CheckboxGroup.Validation variant="error">Uh oh!</CheckboxGroup.Validation>
</CheckboxGroup>,
)

const fieldset = getByRole('group', {name: 'Choices'})
const validation = getByText('Uh oh!')

expect(fieldset).toHaveAttribute('aria-describedby', validation.id)
})

it('associates both a hint and validation with the input', () => {
const {getByRole, getByText} = render(
<CheckboxGroup>
<CheckboxGroup.Label>Choices</CheckboxGroup.Label>
<CheckboxGroup.Caption>You can only pick one</CheckboxGroup.Caption>
<FormControl>
<FormControl.Label>Choice one</FormControl.Label>
<Checkbox value="one" defaultChecked />
</FormControl>
<FormControl>
<FormControl.Label>Choice two</FormControl.Label>
<Checkbox value="two" />
</FormControl>
<FormControl>
<FormControl.Label>Choice three</FormControl.Label>
<Checkbox value="three" />
</FormControl>

<CheckboxGroup.Validation variant="success">Great job!</CheckboxGroup.Validation>
</CheckboxGroup>,
)

const fieldset = getByRole('group', {name: 'Choices'})
const hint = getByText('You can only pick one')
const validation = getByText('Great job!')

expect(fieldset).toHaveAttribute('aria-describedby', `${hint.id} ${validation.id}`)
})
it('associates the hint with the input using aria-describedby', () => {
const {getByRole, getByText} = render(
<CheckboxGroup>
<CheckboxGroup.Label>Choices</CheckboxGroup.Label>
<CheckboxGroup.Caption>You can only pick one</CheckboxGroup.Caption>
<FormControl>
<FormControl.Label>Choice one</FormControl.Label>
<Checkbox value="one" defaultChecked />
</FormControl>
<FormControl>
<FormControl.Label>Choice two</FormControl.Label>
<Checkbox value="two" />
</FormControl>
<FormControl>
<FormControl.Label>Choice three</FormControl.Label>
<Checkbox value="three" />
</FormControl>
</CheckboxGroup>,
)

const fieldset = getByRole('group', {name: 'Choices'})
const caption = getByText('You can only pick one')

expect(fieldset).toHaveAttribute('aria-describedby', caption.id)
})

it('associates the validation with the input using aria-describedby', () => {
const {getByRole, getByText} = render(
<CheckboxGroup>
<CheckboxGroup.Label>Choices</CheckboxGroup.Label>
<FormControl>
<FormControl.Label>Choice one</FormControl.Label>
<Checkbox value="one" defaultChecked />
</FormControl>
<FormControl>
<FormControl.Label>Choice two</FormControl.Label>
<Checkbox value="two" />
</FormControl>
<FormControl>
<FormControl.Label>Choice three</FormControl.Label>
<Checkbox value="three" />
</FormControl>

<CheckboxGroup.Validation variant="error">Uh oh!</CheckboxGroup.Validation>
</CheckboxGroup>,
)

const fieldset = getByRole('group', {name: 'Choices'})
const validation = getByText('Uh oh!')

expect(fieldset).toHaveAttribute('aria-describedby', validation.id)
})

it('associates both a hint and validation with the input using aria-describedby', () => {
const {getByRole, getByText} = render(
<CheckboxGroup>
<CheckboxGroup.Label>Choices</CheckboxGroup.Label>
<CheckboxGroup.Caption>You can only pick one</CheckboxGroup.Caption>
<FormControl>
<FormControl.Label>Choice one</FormControl.Label>
<Checkbox value="one" defaultChecked />
</FormControl>
<FormControl>
<FormControl.Label>Choice two</FormControl.Label>
<Checkbox value="two" />
</FormControl>
<FormControl>
<FormControl.Label>Choice three</FormControl.Label>
<Checkbox value="three" />
</FormControl>

<CheckboxGroup.Validation variant="success">Great job!</CheckboxGroup.Validation>
</CheckboxGroup>,
)

const fieldset = getByRole('group', {name: 'Choices'})
const hint = getByText('You can only pick one')
const validation = getByText('Great job!')

expect(fieldset).toHaveAttribute('aria-describedby', `${hint.id} ${validation.id}`)
})
})
162 changes: 80 additions & 82 deletions packages/react/src/forms/RadioGroup/RadioGroup.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -67,87 +67,85 @@ describe('RadioGroup', () => {
expect(results).toHaveNoViolations()
})

describe('aria-describedby', () => {
it('associates the hint with the input', () => {
const {getByRole, getByText} = render(
<RadioGroup>
<RadioGroup.Label>Choices</RadioGroup.Label>
<RadioGroup.Caption>You can only pick one</RadioGroup.Caption>
<FormControl>
<FormControl.Label>Choice one</FormControl.Label>
<Radio name="demo" value="one" defaultChecked />
</FormControl>
<FormControl>
<FormControl.Label>Choice two</FormControl.Label>
<Radio name="demo" value="two" />
</FormControl>
<FormControl>
<FormControl.Label>Choice three</FormControl.Label>
<Radio name="demo" value="three" />
</FormControl>
</RadioGroup>,
)

const fieldset = getByRole('group', {name: 'Choices'})
const caption = getByText('You can only pick one')

expect(fieldset).toHaveAttribute('aria-describedby', caption.id)
})

it('associates the validation with the input', () => {
const {getByRole, getByText} = render(
<RadioGroup>
<RadioGroup.Label>Choices</RadioGroup.Label>
<FormControl>
<FormControl.Label>Choice one</FormControl.Label>
<Radio name="demo" value="one" defaultChecked />
</FormControl>
<FormControl>
<FormControl.Label>Choice two</FormControl.Label>
<Radio name="demo" value="two" />
</FormControl>
<FormControl>
<FormControl.Label>Choice three</FormControl.Label>
<Radio name="demo" value="three" />
</FormControl>

<RadioGroup.Validation variant="error">Uh oh!</RadioGroup.Validation>
</RadioGroup>,
)

const fieldset = getByRole('group', {name: 'Choices'})
const validation = getByText('Uh oh!')

expect(fieldset).toHaveAttribute('aria-describedby', validation.id)
})

it('associates both a hint and validation with the input', () => {
const {getByRole, getByText} = render(
<RadioGroup>
<RadioGroup.Label>Choices</RadioGroup.Label>
<RadioGroup.Caption>You can only pick one</RadioGroup.Caption>
<FormControl>
<FormControl.Label>Choice one</FormControl.Label>
<Radio name="demo" value="one" defaultChecked />
</FormControl>
<FormControl>
<FormControl.Label>Choice two</FormControl.Label>
<Radio name="demo" value="two" />
</FormControl>
<FormControl>
<FormControl.Label>Choice three</FormControl.Label>
<Radio name="demo" value="three" />
</FormControl>

<RadioGroup.Validation variant="success">Great job!</RadioGroup.Validation>
</RadioGroup>,
)

const fieldset = getByRole('group', {name: 'Choices'})
const hint = getByText('You can only pick one')
const validation = getByText('Great job!')

expect(fieldset).toHaveAttribute('aria-describedby', `${hint.id} ${validation.id}`)
})
it('associates the hint with the input using aria-describedby', () => {
const {getByRole, getByText} = render(
<RadioGroup>
<RadioGroup.Label>Choices</RadioGroup.Label>
<RadioGroup.Caption>You can only pick one</RadioGroup.Caption>
<FormControl>
<FormControl.Label>Choice one</FormControl.Label>
<Radio name="demo" value="one" defaultChecked />
</FormControl>
<FormControl>
<FormControl.Label>Choice two</FormControl.Label>
<Radio name="demo" value="two" />
</FormControl>
<FormControl>
<FormControl.Label>Choice three</FormControl.Label>
<Radio name="demo" value="three" />
</FormControl>
</RadioGroup>,
)

const fieldset = getByRole('group', {name: 'Choices'})
const caption = getByText('You can only pick one')

expect(fieldset).toHaveAttribute('aria-describedby', caption.id)
})

it('associates the validation with the input using aria-describedby', () => {
const {getByRole, getByText} = render(
<RadioGroup>
<RadioGroup.Label>Choices</RadioGroup.Label>
<FormControl>
<FormControl.Label>Choice one</FormControl.Label>
<Radio name="demo" value="one" defaultChecked />
</FormControl>
<FormControl>
<FormControl.Label>Choice two</FormControl.Label>
<Radio name="demo" value="two" />
</FormControl>
<FormControl>
<FormControl.Label>Choice three</FormControl.Label>
<Radio name="demo" value="three" />
</FormControl>

<RadioGroup.Validation variant="error">Uh oh!</RadioGroup.Validation>
</RadioGroup>,
)

const fieldset = getByRole('group', {name: 'Choices'})
const validation = getByText('Uh oh!')

expect(fieldset).toHaveAttribute('aria-describedby', validation.id)
})

it('associates both a hint and validation with the input using aria-describedby', () => {
const {getByRole, getByText} = render(
<RadioGroup>
<RadioGroup.Label>Choices</RadioGroup.Label>
<RadioGroup.Caption>You can only pick one</RadioGroup.Caption>
<FormControl>
<FormControl.Label>Choice one</FormControl.Label>
<Radio name="demo" value="one" defaultChecked />
</FormControl>
<FormControl>
<FormControl.Label>Choice two</FormControl.Label>
<Radio name="demo" value="two" />
</FormControl>
<FormControl>
<FormControl.Label>Choice three</FormControl.Label>
<Radio name="demo" value="three" />
</FormControl>

<RadioGroup.Validation variant="success">Great job!</RadioGroup.Validation>
</RadioGroup>,
)

const fieldset = getByRole('group', {name: 'Choices'})
const hint = getByText('You can only pick one')
const validation = getByText('Great job!')

expect(fieldset).toHaveAttribute('aria-describedby', `${hint.id} ${validation.id}`)
})
})