fix(10343): Adds support for 'required' prop on RadioTile & TileGroup

[2nikhiltom]

Closes #10343

Adds support for 'required' prop on RadioTile
Adds support for 'required' prop on TileGroup

New
RadioTile supports 'required' prop and attaches it to underlying Input
Adds new TestCase to verify this functionality
TileGroup supports 'required' prop and attaches it to children RadioTile

Changed
RadioTile accepts required prop
PublicAPI snapshot updated with 'required' boolean attribute
The required attribute has to be specified only on every TileGroup instead of on every child RadioTile

Testing / Reviewing

1. Add TileGroup with required RadioTiles to a form like shown below
2. Submit form without selecting any of the tiles.

(Take pull of this PR and update any one of the storybook example with below code )

export const Test = () => {
  function onSubmit(e) {
    e.preventDefault();
    alert('submitted');
  }

  return (
    <div style={{ padding: '2em' }}>
      <Form onSubmit={onSubmit}>
        <TileGroup name="radio" required>
          <RadioTile value="1">
            Tile 1
          </RadioTile>
          <RadioTile value="2">
            Tile 2
          </RadioTile>
          <RadioTile value="3">
            Tile 3
          </RadioTile>
        </TileGroup>
        <Button type="submit">Submit</Button>
      </Form>
    </div>
  );
};

3. Verify the repro of below behaviour

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	354497a
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/66263d9db6d150000805a415
😎 Deploy Preview	https://deploy-preview-16237--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	dcf5aad
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/662a6d6650fe16000a47b74b
😎 Deploy Preview	https://deploy-preview-16237--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[tw15egan]

From the original issue:

The required attribute has to be specified on every RadioTile (in React at least) instead of on the TileGroup

Should required also be added to TileGroup, so you can only set required once instead of on each RadioTile? That way, if a user specifies <TileGroup required />, we can iterate over each RadioTile and set required automatically.

[2nikhiltom]

This makes sense, only concern is the proper usage of the HTML element/definition because TileGroup being a fieldset, lacks native support for required. Thoughts ?

[tw15egan]

@2nikhiltom I wouldn't apply the required to the fieldset, I would just use it to mark each RadioTile as required rather than making the user mark each one individually

[alisonjoseph]

@tw15egan if we add required to TileGroup, would we also want to add it to RadioButtonGroup for consistency? (in a separate issue/PR)

[tw15egan]

Yeah I think it would be good for consistency

[2nikhiltom]

The required attribute has to be specified on every RadioTile (in React at least) instead of on the TileGroup

I have made changes to accommodate the above concern. Now TileGroup can pass required prop , which will internally iterate over each RadioTile and set required automatically.

I will created a separate issue for RadioButtonGroup to maintain consistency. here

[tay1orjones]

Looks good to me! I pushed one update here adding tests for the required functionality on TileGroup

[tw15egan]

LGTM 👍 ✅