Skip to content

ButtonGroup: Checkbox not reading "this field is required #2322

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

Merged
merged 4 commits into from
Sep 27, 2019
Merged

ButtonGroup: Checkbox not reading "this field is required #2322

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
770c8a5
fixed a11y issue for button group checkbox
kevinparkerson Sep 20, 2019
e8c0534
Checkbox example: Update label prop
interactivellama Sep 27, 2019
1d35fe8
Merge branch 'master' of github.com:salesforce/design-system-react in…
interactivellama Sep 27, 2019
ec0609c
Merge branch 'master' of github.com:salesforce/design-system-react in…
interactivellama Sep 27, 2019
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
8 changes: 8 additions & 0 deletions components/builder-header/__docs__/__snapshots__/storybook-stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,6 +268,7 @@ exports[`DOM snapshots SLDSBuilderHeader After Successful Save 1`] = `
>
<div
className="slds-button-group"
id="button-group-canvas-actions"
role="group"
>
<button
Expand Down Expand Up @@ -318,6 +319,7 @@ exports[`DOM snapshots SLDSBuilderHeader After Successful Save 1`] = `
>
<div
className="slds-button-group"
id="button-group-edit-actions"
role="group"
>
<button
Expand Down Expand Up @@ -1386,6 +1388,7 @@ exports[`DOM snapshots SLDSBuilderHeader Base with Toolbar 1`] = `
>
<div
className="slds-button-group"
id="button-group-canvas-actions"
role="group"
>
<button
Expand Down Expand Up @@ -1436,6 +1439,7 @@ exports[`DOM snapshots SLDSBuilderHeader Base with Toolbar 1`] = `
>
<div
className="slds-button-group"
id="button-group-edit-actions"
role="group"
>
<button
Expand Down Expand Up @@ -1813,6 +1817,7 @@ exports[`DOM snapshots SLDSBuilderHeader Failed Save 1`] = `
>
<div
className="slds-button-group"
id="button-group-canvas-actions"
role="group"
>
<button
Expand Down Expand Up @@ -1863,6 +1868,7 @@ exports[`DOM snapshots SLDSBuilderHeader Failed Save 1`] = `
>
<div
className="slds-button-group"
id="button-group-edit-actions"
role="group"
>
<button
Expand Down Expand Up @@ -2293,6 +2299,7 @@ exports[`DOM snapshots SLDSBuilderHeader Successful Save 1`] = `
>
<div
className="slds-button-group"
id="button-group-canvas-actions"
role="group"
>
<button
Expand Down Expand Up @@ -2343,6 +2350,7 @@ exports[`DOM snapshots SLDSBuilderHeader Successful Save 1`] = `
>
<div
className="slds-button-group"
id="button-group-edit-actions"
role="group"
>
<button
Expand Down
4 changes: 2 additions & 2 deletions components/builder-header/__examples__/after-successful-save.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ const Example = (props) => (
</div>
)}
>
<ButtonGroup label="Canvas Actions">
<ButtonGroup label="Canvas Actions" id="button-group-canvas-actions">
<Button
assistiveText={{ icon: 'Undo' }}
iconCategory="utility"
Expand All @@ -86,7 +86,7 @@ const Example = (props) => (
variant="icon"
/>
</ButtonGroup>
<ButtonGroup label="Edit Actions">
<ButtonGroup label="Edit Actions" id="button-group-edit-actions">
<Button
assistiveText={{ icon: 'Cut' }}
iconCategory="utility"
Expand Down
4 changes: 2 additions & 2 deletions components/builder-header/__examples__/base-with-toolbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ const Example = (props) => (
</div>
)}
>
<ButtonGroup label="Canvas Actions">
<ButtonGroup label="Canvas Actions" id="button-group-canvas-actions">
<Button
assistiveText={{ icon: 'Undo' }}
iconCategory="utility"
Expand All @@ -76,7 +76,7 @@ const Example = (props) => (
variant="icon"
/>
</ButtonGroup>
<ButtonGroup label="Edit Actions">
<ButtonGroup label="Edit Actions" id="button-group-edit-actions">
<Button
assistiveText={{ icon: 'Cut' }}
iconCategory="utility"
Expand Down
4 changes: 2 additions & 2 deletions components/builder-header/__examples__/failed-save.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ const Example = (props) => (
</div>
)}
>
<ButtonGroup label="Canvas Actions">
<ButtonGroup label="Canvas Actions" id="button-group-canvas-actions">
<Button
assistiveText={{ icon: 'Undo' }}
iconCategory="utility"
Expand All @@ -118,7 +118,7 @@ const Example = (props) => (
variant="icon"
/>
</ButtonGroup>
<ButtonGroup label="Edit Actions">
<ButtonGroup label="Edit Actions" id="button-group-edit-actions">
<Button
assistiveText={{ icon: 'Cut' }}
iconCategory="utility"
Expand Down
4 changes: 2 additions & 2 deletions components/builder-header/__examples__/successful-save.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const Example = (props) => (
</div>
)}
>
<ButtonGroup label="Canvas Actions">
<ButtonGroup label="Canvas Actions" id="button-group-canvas-actions">
<Button
assistiveText={{ icon: 'Undo' }}
iconCategory="utility"
Expand All @@ -87,7 +87,7 @@ const Example = (props) => (
variant="icon"
/>
</ButtonGroup>
<ButtonGroup label="Edit Actions">
<ButtonGroup label="Edit Actions" id="button-group-edit-actions">
<Button
assistiveText={{ icon: 'Cut' }}
iconCategory="utility"
Expand Down
13 changes: 13 additions & 0 deletions components/button-group/__docs__/__snapshots__/storybook-stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ exports[`DOM snapshots SLDSButtonGroup Checkbox 1`] = `
>
<div
className="slds-checkbox_button-group"
id="button-group-checkbox"
>
<span
className="slds-button slds-checkbox_button"
Expand Down Expand Up @@ -136,11 +137,13 @@ exports[`DOM snapshots SLDSButtonGroup Checkbox Error 1`] = `
>
<div
className="slds-checkbox_button-group"
id="button-group-checkbox-error"
>
<span
className="slds-button slds-checkbox_button"
>
<input
aria-describedby="button-group-error-button-group-checkbox-error"
id="ButtonGroupExampleMon"
onChange={[Function]}
type="checkbox"
Expand All @@ -160,6 +163,7 @@ exports[`DOM snapshots SLDSButtonGroup Checkbox Error 1`] = `
className="slds-button slds-checkbox_button"
>
<input
aria-describedby="button-group-error-button-group-checkbox-error"
id="ButtonGroupExampleTue"
onChange={[Function]}
type="checkbox"
Expand All @@ -179,6 +183,7 @@ exports[`DOM snapshots SLDSButtonGroup Checkbox Error 1`] = `
className="slds-button slds-checkbox_button"
>
<input
aria-describedby="button-group-error-button-group-checkbox-error"
id="ButtonGroupExampleWed"
onChange={[Function]}
type="checkbox"
Expand All @@ -198,6 +203,7 @@ exports[`DOM snapshots SLDSButtonGroup Checkbox Error 1`] = `
className="slds-button slds-checkbox_button"
>
<input
aria-describedby="button-group-error-button-group-checkbox-error"
id="ButtonGroupExampleThu"
onChange={[Function]}
type="checkbox"
Expand All @@ -217,6 +223,7 @@ exports[`DOM snapshots SLDSButtonGroup Checkbox Error 1`] = `
className="slds-button slds-checkbox_button"
>
<input
aria-describedby="button-group-error-button-group-checkbox-error"
id="ButtonGroupExampleFri"
onChange={[Function]}
type="checkbox"
Expand All @@ -235,6 +242,7 @@ exports[`DOM snapshots SLDSButtonGroup Checkbox Error 1`] = `
</div>
<div
className="slds-form-element__help"
id="button-group-error-button-group-checkbox-error"
>
This field is required
</div>
Expand All @@ -249,6 +257,7 @@ exports[`DOM snapshots SLDSButtonGroup Icon Group 1`] = `
>
<div
className="slds-button-group"
id="button-group-icon-group-1"
role="group"
>
<button
Expand Down Expand Up @@ -354,6 +363,7 @@ exports[`DOM snapshots SLDSButtonGroup Icon Group 1`] = `
>
<div
className="slds-button-group"
id="button-group-icon-group-2"
role="group"
>
<button
Expand Down Expand Up @@ -455,6 +465,7 @@ exports[`DOM snapshots SLDSButtonGroup List Variant 1`] = `
>
<ul
className="slds-button-group-list"
id="button-group-list-1"
>
<li>
<button
Expand Down Expand Up @@ -529,6 +540,7 @@ exports[`DOM snapshots SLDSButtonGroup List Variant 1`] = `
>
<ul
className="slds-button-group-list"
id="button-group-list-2"
>
<li>
<button
Expand Down Expand Up @@ -599,6 +611,7 @@ exports[`DOM snapshots SLDSButtonGroup More Icon 1`] = `
>
<div
className="slds-button-group"
id="button-group-more-icon"
role="group"
>
<button
Expand Down
11 changes: 6 additions & 5 deletions components/button-group/__examples__/checkbox-error.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,14 @@ class Example extends React.Component {
error: 'This field is required',
label: 'Scheduled Day(s)',
}}
id="button-group-checkbox-error"
variant="checkbox"
>
<Checkbox id="ButtonGroupExampleMon" label="Mon" />
<Checkbox id="ButtonGroupExampleTue" label="Tue" />
<Checkbox id="ButtonGroupExampleWed" label="Wed" />
<Checkbox id="ButtonGroupExampleThu" label="Thu" />
<Checkbox id="ButtonGroupExampleFri" label="Fri" />
<Checkbox id="ButtonGroupExampleMon" labels={{ label: 'Mon' }} />
<Checkbox id="ButtonGroupExampleTue" labels={{ label: 'Tue' }} />
<Checkbox id="ButtonGroupExampleWed" labels={{ label: 'Wed' }} />
<Checkbox id="ButtonGroupExampleThu" labels={{ label: 'Thu' }} />
<Checkbox id="ButtonGroupExampleFri" labels={{ label: 'Fri' }} />
</ButtonGroup>
);
}
Expand Down
11 changes: 6 additions & 5 deletions components/button-group/__examples__/checkbox.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,14 @@ class Example extends React.Component {
labels={{
label: 'Scheduled Day(s)',
}}
id="button-group-checkbox"
variant="checkbox"
>
<Checkbox id="ButtonGroupExampleMon" label="Mon" />
<Checkbox id="ButtonGroupExampleTue" label="Tue" />
<Checkbox id="ButtonGroupExampleWed" label="Wed" />
<Checkbox id="ButtonGroupExampleThu" label="Thu" />
<Checkbox id="ButtonGroupExampleFri" label="Fri" />
<Checkbox id="ButtonGroupExampleMon" labels={{ label: 'Mon' }} />
<Checkbox id="ButtonGroupExampleTue" labels={{ label: 'Tue' }} />
<Checkbox id="ButtonGroupExampleWed" labels={{ label: 'Wed' }} />
<Checkbox id="ButtonGroupExampleThu" labels={{ label: 'Thu' }} />
<Checkbox id="ButtonGroupExampleFri" labels={{ label: 'Fri' }} />
</ButtonGroup>
);
}
Expand Down
7 changes: 5 additions & 2 deletions components/button-group/__examples__/icon-group.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ class Example extends React.Component {
render() {
return (
<IconSettings iconPath="/assets/icons">
<ButtonGroup>
<ButtonGroup id="button-group-icon-group-1">
<ButtonStateful
assistiveText={{ icon: 'Show Chart' }}
buttonVariant="icon"
Expand Down Expand Up @@ -46,7 +46,10 @@ class Example extends React.Component {
</ButtonGroup>
<br />
<br />
<ButtonGroup labels={{ label: 'Actions' }}>
<ButtonGroup
id="button-group-icon-group-2"
labels={{ label: 'Actions' }}
>
<ButtonStateful
assistiveText={{ icon: 'Show Chart' }}
buttonVariant="icon"
Expand Down
3 changes: 2 additions & 1 deletion components/button-group/__examples__/list-variant.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ class Example extends React.Component {
render() {
return (
<IconSettings iconPath="/assets/icons">
<ButtonGroup variant="list">
<ButtonGroup id="button-group-list-1" variant="list">
<Button id="refresh-button-1" label="Refresh" />
<Button label="Edit" id="edit-button-1" />
<Dropdown
Expand All @@ -33,6 +33,7 @@ class Example extends React.Component {
<br />
<ButtonGroup
classNameContainer="custom-container-class"
id="button-group-list-2"
labels={{ label: 'Actions' }}
variant="list"
>
Expand Down
2 changes: 1 addition & 1 deletion components/button-group/__examples__/more-icon.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ class Example extends React.Component {
render() {
return (
<IconSettings iconPath="/assets/icons">
<ButtonGroup>
<ButtonGroup id="button-group-more-icon">
<Button label="Refresh" />
<Button label="Edit" />
<Button label="Save" />
Expand Down
Loading