Update components to place className on outer node

[joshblack]

We currently inconsistently place className for our components. In v11, we will have each component place the className prop on the outermost node. This issue is for updating components in a non-breaking way using the useFeatureFlag hook to place the className prop on the outermost node.

function Demo() {
  const enabled = useFeatureFlag('enable-v11-release');

  // Figure out common pattern for placing `className` on outermost node
}

This issue is for filling out the list below of components that currently place className on the outermost node and for addressing this using the pattern described above.

A list of components that place className on the outermost node:

• TODO

[tw15egan]

Components that do not place className on the outermost node:

• Checkbox (also wrapped in bx--form-item, but it is wrapping two adjacent elements)
• Combobox / Dropdown / Multiselect (Should all be fixed via Listbox)
• DatePicker (wrapped in bx--form-item)
• NumberInput (wrapped in bx--form-item)
• RadioButtonGroup (wrapped in bx--form-item)
• Slider (also wrapped in bx--form-item, but it is wrapping two adjacent elements)
• TimePicker (also wrapped in bx--form-item, but it is wrapping adjacent elements)

@andreancardona

• Select (wrapped in bx--form-item)
• TextArea (also wrapped in bx--form-item, but it is wrapping adjacent elements)
• TextInput (also wrapped in bx--form-item, but it is wrapping adjacent elements)

This seems to be all components that do not allow a user to add a className to the top-level element. In the case of DatePicker, NumberInput, RadioButtonGroup, and Select, it may be best to add the className to bx--form-item, and move the others noted with bx-form-item to also add classes to this outermost wrapper for consistency.