[WNMGDS-6/checked-child-css] Adding CSS support for Choice checked ch…

…ildren (#330) * Adding CSS and documentation for Choice checkedChildren * Updating CSS per stylelint BEM nesting * Updating example to split radio button groups * Missed a CSS rule for inverse display. * Refactoring checkedChild styling, docs.
CMSgov · Feb 18, 2019 · 5c483d4 · 5c483d4
1 parent d33b512
commit 5c483d4
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 4 deletions.
diff --git a/packages/core/src/components/ChoiceList/Choice.example.jsx b/packages/core/src/components/ChoiceList/Choice.example.jsx
@@ -18,7 +18,7 @@ const childSelect = (
   <ChoiceList
     choices={selectChoices}
     label="Select example"
-    className=""
+    labelClassName="ds-c-label ds-u-margin-top--0"
     name="select_choices_field"
   />
 );
@@ -56,7 +56,9 @@ ReactDOM.render(
       <Choice
         name="checkbox_choice_children"
         value="b"
-        checkedChildren={childSelect}
+        checkedChildren={
+          <div className="ds-c-choice__checkedChild">{childSelect}</div>
+        }
       >
         Checkbox B - with children
       </Choice>
@@ -84,11 +86,36 @@ ReactDOM.render(
         name="radio_choice_children"
         type="radio"
         value="d"
-        checkedChildren={childSelect}
+        checkedChildren={
+          <div className="ds-c-choice__checkedChild">{childSelect}</div>
+        }
       >
         Radio B - with children
       </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
+        </legend>
+        <Choice name="radio_choice_children_inv" type="radio" value="c">
+          Radio A
+        </Choice>
+        <Choice
+          name="radio_choice_children_inv"
+          type="radio"
+          value="d"
+          checkedChildren={
+            <div className="ds-c-choice__checkedChild ds-c-choice__checkedChild--inverse">
+              {childSelect}
+            </div>
+          }
+        >
+          Radio B - with children
+        </Choice>
+      </fieldset>
+    </div>
   </div>,
   document.getElementById('js-example')
 );
diff --git a/packages/core/src/components/ChoiceList/Choice.jsx b/packages/core/src/components/ChoiceList/Choice.jsx
@@ -148,7 +148,9 @@ Choice.propTypes = {
    */
   checked: PropTypes.bool,
   /**
-   * Content to be shown when the choice is checked
+   * Content to be shown when the choice is checked. See
+   * **Checked children and the expose within pattern** on
+   * the Guidance tab for detailed instructions.
    */
   checkedChildren: PropTypes.node,
   /**

diff --git a/packages/core/src/components/ChoiceList/Choice.scss b/packages/core/src/components/ChoiceList/Choice.scss
@@ -82,12 +82,26 @@ Markup:
 Style guide: components.choice.inversed
 */
 
+$ds-c-inset-border-width: $spacer-half;
+
 // Hide the default browser checkbox/radio button since we'll
 // create our own custom version
 .ds-c-choice {
   left: -999em;
   opacity: 0;
   position: absolute;
+
+  // Checked children container
+  &__checkedChild {
+    border-left: $ds-c-inset-border-width solid $color-primary;
+    margin-bottom: $spacer-2;
+    margin-left: ($choice-size / 2) - ($ds-c-inset-border-width / 2);
+    padding: $spacer-2;
+
+    &--inverse {
+      border-left-color: $color-white;
+    }
+  }
 }
 
 .ds-c-choice + label {
@@ -316,6 +330,19 @@ Style guide: components.choice.react
 
 **[View the "Forms" guidelines for additional guidance and best practices.]({{root}}/guidelines/forms/)**
 
+## Checked children and the expose within pattern
+
+- 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.
+- 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
+
 ## 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.