[HOTFIX][WNMGDS-1665] Remove max-width constraint on Choices' checked…

…/unchecked children (#1812)

* Do not apply the ds-c-choice-wrapper's flexbox layout to checked children

And also revert the max-width of the input and label to be `$measure-base` because we didn't notify users of that change in our last release

* Can uncomment this now that the wrapper only applies to input + label

* Add VRT references for new story

* Update snapshots

packages/design-system/src/components/ChoiceList/Choice.tsx

@@ -213,41 +213,41 @@ export class Choice extends React.PureComponent<
       'ds-c-choice--small': size === 'small',
     });
 
-    const choiceWrapperClasses = classNames(className, 'ds-c-choice-wrapper');
-
     // Remove props we have our own implementations for
     if (inputProps.id) delete inputProps.id;
     if (inputProps.onChange) delete inputProps.onChange;
 
     return (
       <div
-        className={choiceWrapperClasses}
+        className={className}
         aria-live={checkedChildren ? 'polite' : null}
         aria-relevant={checkedChildren ? 'additions text' : null}
         aria-atomic={checkedChildren ? 'false' : null}
       >
-        <input
-          className={inputClasses}
-          id={this.id}
-          onChange={this.handleChange}
-          disabled={disabled}
-          ref={(ref) => {
-            this.input = ref;
-            if (inputRef) {
-              inputRef(ref);
-            }
-          }}
-          {...inputProps}
-        />
-        <FormLabel
-          className={labelClassName}
-          fieldId={this.id}
-          hint={hint}
-          inversed={inversed}
-          requirementLabel={requirementLabel}
-        >
-          {label || children}
-        </FormLabel>
+        <div className="ds-c-choice-wrapper">
+          <input
+            className={inputClasses}
+            id={this.id}
+            onChange={this.handleChange}
+            disabled={disabled}
+            ref={(ref) => {
+              this.input = ref;
+              if (inputRef) {
+                inputRef(ref);
+              }
+            }}
+            {...inputProps}
+          />
+          <FormLabel
+            className={labelClassName}
+            fieldId={this.id}
+            hint={hint}
+            inversed={inversed}
+            requirementLabel={requirementLabel}
+          >
+            {label || children}
+          </FormLabel>
+        </div>
         {this.checked() ? checkedChildren : uncheckedChildren}
       </div>
     );

packages/design-system/src/components/ChoiceList/ChoiceList.stories.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-
+import { Alert } from '../Alert';
 import ChoiceList from './ChoiceList';
 import Choice from './Choice';
 
@@ -23,7 +23,7 @@ export default {
       { label: 'Disabled choice 3', value: 'C', disabled: true },
     ],
   },
-  subcomponents: { Choice },
+  subcomponents: { Alert, Choice },
 };
 
 const Template = (args) => <ChoiceList {...args} />;
@@ -64,3 +64,35 @@ InverseOption.args = {
 InverseOption.parameters = {
   backgrounds: { default: process.env.STORYBOOK_DS === 'medicare' ? 'Mgov dark' : 'Hcgov dark' },
 };
+
+export const ChoiceChildren = Template.bind({});
+ChoiceChildren.args = {
+  name: 'radio_choices',
+  type: 'radio',
+  choices: [
+    {
+      label: 'Choice 1',
+      value: 'A',
+      defaultChecked: true,
+      checkedChildren: (
+        <Alert heading="You'll save more with this option">
+          Based on the household information you provided, this option will give you the maximum
+          savings. We are adding some filler text just to show what it looks like when you have a
+          long alert as the checkedChildren of a Choice component.
+        </Alert>
+      ),
+    },
+    {
+      label: 'Choice 2',
+      requirementLabel: 'Choice hint text',
+      value: 'B',
+      checkedChildren: (
+        <Alert variation="warn" heading="Are you sure?">
+          Based on the household information you provided, you can actually save more with the other
+          option. You are free to change this at any point during the application process until you
+          have signed and submitted your final application.
+        </Alert>
+      ),
+    },
+  ],
+};

packages/design-system/src/components/ChoiceList/__snapshots__/ChoiceList.test.tsx.snap

@@ -15,47 +15,51 @@ exports[`ChoiceList Radio buttons and Checkboxes is a radio button group 1`] = `
         Foo
       </span>
     </legend>
-    <div
-      class="ds-c-choice-wrapper"
-    >
-      <input
-        class="ds-c-choice"
-        id="radio_spec-field_2"
-        name="spec-field"
-        type="radio"
-        value="1"
-      />
-      <label
-        class="ds-c-label"
-        for="radio_spec-field_2"
+    <div>
+      <div
+        class="ds-c-choice-wrapper"
       >
-        <span
-          class=""
+        <input
+          class="ds-c-choice"
+          id="radio_spec-field_2"
+          name="spec-field"
+          type="radio"
+          value="1"
+        />
+        <label
+          class="ds-c-label"
+          for="radio_spec-field_2"
         >
-          Choice 1
-        </span>
-      </label>
+          <span
+            class=""
+          >
+            Choice 1
+          </span>
+        </label>
+      </div>
     </div>
-    <div
-      class="ds-c-choice-wrapper"
-    >
-      <input
-        class="ds-c-choice"
-        id="radio_spec-field_3"
-        name="spec-field"
-        type="radio"
-        value="2"
-      />
-      <label
-        class="ds-c-label"
-        for="radio_spec-field_3"
+    <div>
+      <div
+        class="ds-c-choice-wrapper"
       >
-        <span
-          class=""
+        <input
+          class="ds-c-choice"
+          id="radio_spec-field_3"
+          name="spec-field"
+          type="radio"
+          value="2"
+        />
+        <label
+          class="ds-c-label"
+          for="radio_spec-field_3"
         >
-          Choice 2
-        </span>
-      </label>
+          <span
+            class=""
+          >
+            Choice 2
+          </span>
+        </label>
+      </div>
     </div>
   </fieldset>
 </DocumentFragment>