Can't pass a `className` to `RadioGroup`

[GrossDesignCo]

Describe the bug

generic components Radio & RadioGroup are missing handling for className in userProps.

Likely low-priority since most folks use custom components but nice to have :)

Working example in Input

Compare to RadioGroup

To Reproduce

Repro: https://codesandbox.io/p/sandbox/keen-sound-h6zk5d

[joepuzzo]

Hmm where would you expect the class to end up ?

[GrossDesignCo]

In the default/native inputs case I'd expect the className to get applied to the fieldset for RadioGroup. For Radio it's a bit more debatable, but I think the most useful would be on the label since that wraps the input.

As a rule of thumb on TDS we'd try to put the className on the outermost element within the component's markup, and if necessary add another prop like inputProps (maybe inputElementProps or something in this case) so that it was easy to target for folks.

[joepuzzo]

Sorry Holidays ran away from me. Working on this today.

[joepuzzo]

Soo I did it but I dont think im going to push this code as really it should be up to the consumer to build their own inputs

If I did do it here is the code I have

For Radio Group:

/* eslint-disable indent */
import React from 'react';
import { RadioGroupContext } from '../../Context';
import { useField } from '../../hooks/useField';
import { Radio } from './Radio';

export const RadioGroup = props => {
  const { fieldApi, fieldState, userProps } = useField(props);

  const {
    label,
    id,
    options,
    children,
    className,
    radioProps,
    radioLabelProps
  } = userProps;
  const { showError, error } = fieldState;

  const groupContext = {
    radioGroupApi: fieldApi,
    radioGroupState: fieldState,
    radioProps,
    radioLabelProps,
    ...props
  };

  return (
    <RadioGroupContext.Provider value={groupContext}>
      <fieldset aria-describedby={`${id}-error`} className={className}>
        {label ? <legend>{label}</legend> : null}
        {options
          ? options.map(option => (
              <label key={option.value}>
                {option.label} <Radio value={option.value} />
              </label>
            ))
          : children}
        {showError ? (
          <small role="alert" id={`${id}-error`}>
            {error}
          </small>
        ) : null}
      </fieldset>
    </RadioGroupContext.Provider>
  );
};

And for Radio:

import React from 'react';
import { useRadioGroup } from '../../hooks/useRadioGroup';

export const Radio = ({ label, value, ...props }) => {
  const {
    radioGroupApi,
    radioGroupState,
    radioProps = {},
    radioLabelProps = {}
  } = useRadioGroup();

  const { setValue, setTouched } = radioGroupApi;

  const { value: groupValue, showError } = radioGroupState;

  return (
    <label {...radioLabelProps}>
      {label}
      <input
        {...radioProps}
        {...props}
        aria-invalid={!!showError}
        value={value}
        checked={groupValue === value}
        onChange={e => {
          if (!e.target.checked) {
            return;
          }
          setValue(value, e);
        }}
        onBlur={e => {
          setTouched(true, e);
        }}
        type="radio"
      />
    </label>
  );
};

[joepuzzo]

Things like

radioProps,
radioLabelProps

Are opinionated and I think should be left up to the consumer. The default inputs are really mostly to show how to properly configure your own custom inputs.