Apply class name only to CheckboxGroup/RadioGroup container

[chawes13]

Currently, passing in the className prop to a field that uses the CheckboxGroup component will override the className prop on the outer fieldset, as well as the fieldset for each individual checkbox. This isn't ideal, since our base styling relies on CheckboxGroup and checkbox classes to exist on these fieldsets and it makes it harder to target the outer element. Since we can target the checkbox fieldsets via nesting, I'd propose that only the outer fieldset have the class name applied.

Proposed

<Field
  name="flavors"
  component={CheckboxGroup}
  className="CheckboxGroup flex"
/>

// Output
<fieldset class="CheckboxGroup flex">
  <fieldset class="checkbox" />
  <fieldset class="checkbox" />
  <fieldset class="checkbox" />
</fieldset>

// Styling
.CheckboxGroup {
  &.flex {
     display: flex;
     .checkbox {
       flex-shrink: 3;
     }
  }
}

Current

<Field
  name="flavors"
  component={CheckboxGroup}
  className="CheckboxGroup flex"
/>

// Output
<fieldset class="CheckboxGroup flex">
  <fieldset class="CheckboxGroup flex" />
  <fieldset class="CheckboxGroup flex" />
  <fieldset class="CheckboxGroup flex" />
</fieldset>

[dpikt]

Makes sense to me!

[chawes13]

Relatedly, it would be nice to pass down props specifically to each checkbox. For example, a custom labelComponent. Thinking an api could look like checkboxProps. I'll try this out on CDK before porting it over