Adding small and right inputs, fixing frame height on Choice. (#341)

* Adding small and right inputs, fixing frame height on Choice. * Removing right checked children styling, example, docs * Adding code wrap around prop in documentation * Removing extra word in the SCSS comments
CMSgov · Feb 22, 2019 · 500c383 · 500c383
1 parent cb2c449
commit 500c383
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 19 deletions.
diff --git 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(
   <div>
     <fieldset className="ds-c-fieldset">
-      <legend className="ds-c-label">Checkbox example</legend>
+      <legend className="ds-c-label">Checkboxes</legend>
       <Choice
         defaultChecked
         hint="Checkbox A hint"
@@ -44,16 +44,12 @@ ReactDOM.render(
     </fieldset>
 
     <fieldset className="ds-c-fieldset">
-      <legend className="ds-c-label">Checkbox example with children</legend>
-      <Choice
-        hint="Checkbox A hint"
-        defaultChecked
-        name="checkbox_choice_children"
-        value="a"
-      >
+      <legend className="ds-c-label">Checkboxes with children</legend>
+      <Choice hint="Checkbox A hint" name="checkbox_choice_children" value="a">
         Checkbox A
       </Choice>
       <Choice
+        defaultChecked
         name="checkbox_choice_children"
         value="b"
         checkedChildren={
@@ -67,9 +63,11 @@ ReactDOM.render(
       </Choice>
     </fieldset>
 
+    <hr className="ds-u-margin-top--2" />
+
     <fieldset className="ds-c-fieldset">
-      <legend className="ds-c-label">Radio example</legend>
-      <Choice name="radio_choice" type="radio" value="a">
+      <legend className="ds-c-label">Radio buttons</legend>
+      <Choice defaultChecked name="radio_choice" type="radio" value="a">
         Radio A
       </Choice>
       <Choice name="radio_choice" type="radio" value="b">
@@ -78,11 +76,12 @@ ReactDOM.render(
     </fieldset>
 
     <fieldset className="ds-c-fieldset">
-      <legend className="ds-c-label">Radio example with children</legend>
+      <legend className="ds-c-label">Radio buttons with children</legend>
       <Choice name="radio_choice_children" type="radio" value="c">
         Radio A
       </Choice>
       <Choice
+        defaultChecked
         name="radio_choice_children"
         type="radio"
         value="d"
@@ -94,15 +93,41 @@ ReactDOM.render(
       </Choice>
     </fieldset>
 
+    <hr className="ds-u-margin-top--2" />
+
+    <fieldset className="ds-c-fieldset">
+      <legend className="ds-c-label">Small checkboxes with children</legend>
+      <Choice name="checkbox_choice_children_small" size="small" value="a">
+        Checkbox A
+      </Choice>
+      <Choice
+        defaultChecked
+        name="checkbox_choice_children_small"
+        value="b"
+        checkedChildren={
+          <div className="ds-c-choice__checkedChild ds-c-choice__checkedChild--small">
+            {childSelect}
+          </div>
+        }
+        size="small"
+      >
+        Checkbox B - with children
+      </Choice>
+      <Choice name="checkbox_choice_children_small" size="small" value="c">
+        Checkbox C
+      </Choice>
+    </fieldset>
+
     <div className="ds-base ds-base--inverse ds-u-padding--2 ds-u-margin-top--2">
       <fieldset className="ds-c-fieldset ds-u-margin-top--0">
         <legend className="ds-c-label">
-          Inverse radio example with children
+          Inverse radio buttons with children
         </legend>
         <Choice name="radio_choice_children_inv" type="radio" value="c">
           Radio A
         </Choice>
         <Choice
+          defaultChecked
           name="radio_choice_children_inv"
           type="radio"
           value="d"

diff --git a/packages/core/src/components/ChoiceList/Choice.scss b/packages/core/src/components/ChoiceList/Choice.scss
@@ -8,7 +8,7 @@ Markup:
 */
 .ds-c-fieldset {
   border: 0;
-  // We apply the same margin as a label has, since in the context of a fieldset
+  // We apply the same margin as a label, since in the context of a fieldset
   // this would be a <legend>. 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,21 +340,23 @@ Style guide: components.choice.react
 
 - The `<Choice>` 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
 
 - Surround a related set of choices with a `<fieldset>`. The `<legend>` provides context for the grouping. Do not use `fieldset` and `legend` for a single checkbox.
 - 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 `<select>` label and every `<option>` value
+  - MacOS Mojave + Safari + VoiceOver 
 
 ## Theming