diff --git a/packages/core/src/components/ChoiceList/Choice.example.jsx b/packages/core/src/components/ChoiceList/Choice.example.jsx index 2b6ce892d4..a361ff596e 100644 --- a/packages/core/src/components/ChoiceList/Choice.example.jsx +++ b/packages/core/src/components/ChoiceList/Choice.example.jsx @@ -26,7 +26,7 @@ const childSelect = ( ReactDOM.render(
- Checkbox example + Checkboxes
- Checkbox example with children - + Checkboxes with children + Checkbox A
+
+
- Radio example - + Radio buttons + Radio A @@ -78,11 +76,12 @@ ReactDOM.render(
- Radio example with children + Radio buttons with children Radio A
+
+ +
+ Small checkboxes with children + + Checkbox A + + + {childSelect} +
+ } + size="small" + > + Checkbox B - with children + + + Checkbox C + + +
- Inverse radio example with children + Inverse radio buttons with children Radio A . See .ds-c-fieldset > .ds-c-label for more info. margin: $spacer-3 0 0; min-width: 0; @@ -98,9 +98,15 @@ $ds-c-inset-border-width: $spacer-half; margin-left: ($choice-size / 2) - ($ds-c-inset-border-width / 2); padding: $spacer-2; + // Checked children container on dark background &--inverse { border-left-color: $color-white; } + + // Small input variant + &--small { + margin-left: $spacer-1; + } } } @@ -334,14 +340,10 @@ Style guide: components.choice.react - The `` component includes a `checkedChildren` prop that can expose hidden text information or form elements. This **expose within** pattern is especially useful if you need to collect data from follow up questions or give just-in-time feedback. - Checked children can be exposed by checking the parent checkbox or radio button -- Checked children will be announced to screen readers when they are exposed. They have been tested with the following devices: - - Windows 10 + Internet Explorer 11 + JAWS screen reader - - Windows 10 + Chrome + JAWS - - Windows 10 + Firefox + NVDA - - MacOS Mojave + Safari + VoiceOver -- The checkedChildren prop should return one or more items wrapped in a `div` with the following className: `ds-c-choice__checkedChild`. This class sets the spacing and border color for the exposed elements. +- The `checkedChildren` prop should return one or more items wrapped in a `div` with the following className: `ds-c-choice__checkedChild`. This class sets the spacing and border color for the exposed elements. - Add the className `ds-c-choice__checkedChild--inverse` to the `div` to show the inverse white border - You may need to add the className `ds-u-margin--0` to your child element(s) to avoid extra top margin +- If you opt for smaller radio buttons or checkboxes, add className `ds-c-choice__checkedChild--small` to your checked child container ## Accessibility @@ -349,6 +351,12 @@ Style guide: components.choice.react - Some screen readers read the `legend` text for each `fieldset`, so it should be brief and descriptive. - Each input should have a semantic `id` attribute, and its corresponding `label` should have the same value in its `for` attribute. - The custom checkboxes and radio buttons here are accessible to screen readers because the default fields are moved off-screen. +- `checkedChildren` will be announced to screen readers when they are exposed. They have been tested with the following devices: + - Windows 10 + Internet Explorer 11 + JAWS screen reader + - Windows 10 + Chrome + JAWS + - Windows10 - Firefox + NVDA + - NVDA reads out the `