From 8bb54fa65c4bf423867697da074d782538d98463 Mon Sep 17 00:00:00 2001
From: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com>
Date: Thu, 25 Apr 2024 20:38:52 +0530
Subject: [PATCH] fix(10343): Adds support for 'required' prop on RadioTile &
 TileGroup (#16237)

* fix(10343): adds support for 'required' prop in RadioTile

* chore: updates readme

* feat(10343): adds required attribute support to TileGroup

* test(tilegroup): cover required attribute behavior in tests

---------

Co-authored-by: Taylor Jones <taylor.jones826@gmail.com>
Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
---
 .all-contributorsrc                           |  9 ++++
 README.md                                     |  4 +-
 .../__snapshots__/PublicAPI-test.js.snap      |  3 ++
 .../components/RadioTile/RadioTile-test.js    |  8 ++++
 .../src/components/RadioTile/RadioTile.tsx    | 12 ++++++
 .../src/components/TileGroup/TileGroup.tsx    | 13 +++++-
 .../TileGroup/__tests__/TileGroup-test.js     | 42 ++++++++++++++++++-
 7 files changed, 88 insertions(+), 3 deletions(-)

diff --git a/.all-contributorsrc b/.all-contributorsrc
index 193515950cd7..955f1884a16a 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -1497,6 +1497,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "2nikhiltom",
+      "name": "Nikhil Tomar",
+      "avatar_url": "https://avatars.githubusercontent.com/2nikhiltom?v=4",
+      "profile": "https://github.com/2nikhiltom",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"
diff --git a/README.md b/README.md
index 7da9ea03bbc9..d24fda04b38c 100644
--- a/README.md
+++ b/README.md
@@ -283,10 +283,12 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://cuppajoey.com/"><img src="https://avatars.githubusercontent.com/u/14837881?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Joseph Schultz</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=cuppajoey" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/anjaly0606"><img src="https://avatars.githubusercontent.com/u/99959496?v=4?s=100" width="100px;" alt=""/><br /><sub><b>anjaly0606</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=anjaly0606" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/jesnajoseijk"><img src="https://avatars.githubusercontent.com/u/38346258?v=4?s=100" width="100px;" alt=""/><br /><sub><b>jesnajoseijk</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=jesnajoseijk" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/Jawahars"><img src="https://avatars.githubusercontent.com/u/4353146?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jawahar S</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Jawahars" title="Code">💻</a></td>
+ 
   </tr>
   <tr>
+    <td align="center"><a href="https://github.com/Jawahars"><img src="https://avatars.githubusercontent.com/u/4353146?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jawahar S</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Jawahars" title="Code">💻</a></td>
     <td align="center"><a href="https://hollyos.com/"><img src="https://avatars.githubusercontent.com/u/4097509?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Holly Springsteen</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=hollyos" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/2nikhiltom"><img src="https://avatars.githubusercontent.com/2nikhiltom?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Nikhil Tomar</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=2nikhiltom" title="Code">💻</a></td>
   </tr>
 </table>
 
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 3b858175b6f8..43e3c1b3776b 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -6591,6 +6591,9 @@ Map {
       "onChange": Object {
         "type": "func",
       },
+      "required": Object {
+        "type": "bool",
+      },
       "tabIndex": Object {
         "type": "number",
       },
diff --git a/packages/react/src/components/RadioTile/RadioTile-test.js b/packages/react/src/components/RadioTile/RadioTile-test.js
index 82077918c321..7b91f4e66a47 100644
--- a/packages/react/src/components/RadioTile/RadioTile-test.js
+++ b/packages/react/src/components/RadioTile/RadioTile-test.js
@@ -123,5 +123,13 @@ describe('RadioTile', () => {
       expect(ref.current.type).toEqual('radio');
       expect(ref.current.value).toEqual('some test value');
     });
+    it('should pass "required" prop to the input element', () => {
+      render(
+        <RadioTile required value="some test value">
+          Option 1
+        </RadioTile>
+      );
+      expect(screen.getByRole('radio')).toHaveAttribute('required');
+    });
   });
 });
diff --git a/packages/react/src/components/RadioTile/RadioTile.tsx b/packages/react/src/components/RadioTile/RadioTile.tsx
index 36dbd92f6bd6..44749a5f5912 100644
--- a/packages/react/src/components/RadioTile/RadioTile.tsx
+++ b/packages/react/src/components/RadioTile/RadioTile.tsx
@@ -81,6 +81,11 @@ export interface RadioTileProps {
    * Specify the value of the underlying `<input>`.
    */
   value: string | number;
+
+  /**
+   * `true` to specify if the input is required.
+   */
+  required?: boolean;
 }
 
 const RadioTile = React.forwardRef(function RadioTile(
@@ -95,6 +100,7 @@ const RadioTile = React.forwardRef(function RadioTile(
     id,
     onChange = noopFn,
     tabIndex = 0,
+    required,
     ...rest
   }: RadioTileProps,
   ref: React.Ref<HTMLInputElement>
@@ -153,6 +159,7 @@ const RadioTile = React.forwardRef(function RadioTile(
         type="radio"
         value={value}
         ref={ref}
+        required={required}
       />
       <label {...rest} htmlFor={inputId} className={className}>
         <span className={`${prefix}--tile__checkmark`}>{icon()}</span>
@@ -211,6 +218,11 @@ RadioTile.propTypes = {
    */
   onChange: PropTypes.func,
 
+  /**
+   * `true` to specify if the control is required.
+   */
+  required: PropTypes.bool,
+
   /**
    * Specify the tab index of the underlying `<input>`.
    */
diff --git a/packages/react/src/components/TileGroup/TileGroup.tsx b/packages/react/src/components/TileGroup/TileGroup.tsx
index a5da20ceeeb2..ce7f23c68a8e 100644
--- a/packages/react/src/components/TileGroup/TileGroup.tsx
+++ b/packages/react/src/components/TileGroup/TileGroup.tsx
@@ -55,6 +55,10 @@ export interface TileGroupProps
    * Specify the value that is currently selected in the group
    */
   valueSelected?: string | number;
+  /**
+   * `true` to specify if input selection in group is required.
+   */
+  required?: boolean;
 }
 
 const TileGroup = (props) => {
@@ -67,9 +71,10 @@ const TileGroup = (props) => {
     name,
     onChange = noopFn,
     valueSelected,
+    required,
   } = props;
-  const prefix = usePrefix();
 
+  const prefix = usePrefix();
   const [selected, setSelected] = useState(valueSelected ?? defaultSelected);
   const [prevValueSelected, setPrevValueSelected] = useState(valueSelected);
 
@@ -91,6 +96,7 @@ const TileGroup = (props) => {
           return (
             <RadioTile
               {...otherProps}
+              required={required}
               name={name}
               key={value}
               value={value}
@@ -174,6 +180,11 @@ TileGroup.propTypes = {
    */
   onChange: PropTypes.func,
 
+  /**
+   * `true` to specify if input selection in group is required.
+   */
+  required: PropTypes.bool,
+
   /**
    * Specify the value that is currently selected in the group
    */
diff --git a/packages/react/src/components/TileGroup/__tests__/TileGroup-test.js b/packages/react/src/components/TileGroup/__tests__/TileGroup-test.js
index ab1e6ebcb5da..4f5df9c2f4f6 100644
--- a/packages/react/src/components/TileGroup/__tests__/TileGroup-test.js
+++ b/packages/react/src/components/TileGroup/__tests__/TileGroup-test.js
@@ -12,7 +12,7 @@ import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
 import { FeatureFlags } from '../../FeatureFlags';
 
-describe('PasswordInput', () => {
+describe('TileGroup', () => {
   describe('renders as expected - Component API', () => {
     it('should render `legend` in a <legend>', () => {
       render(
@@ -54,6 +54,46 @@ describe('PasswordInput', () => {
       expect(fieldset).toContainElement(screen.getByDisplayValue('test-2'));
     });
 
+    it('should place required on every child <RadioTile>', () => {
+      render(
+        <TileGroup
+          defaultSelected="test-1"
+          legend="TestGroup"
+          name="test"
+          required>
+          <RadioTile id="test-1" value="test-1">
+            Option 1
+          </RadioTile>
+          <RadioTile id="test-2" value="test-2">
+            Option 2
+          </RadioTile>
+        </TileGroup>
+      );
+
+      expect(screen.getByDisplayValue('test-1')).toBeRequired();
+      expect(screen.getByDisplayValue('test-2')).toBeRequired();
+    });
+
+    it('should override required on every child <RadioTile>', () => {
+      render(
+        <TileGroup
+          defaultSelected="test-1"
+          legend="TestGroup"
+          name="test"
+          required>
+          <RadioTile id="test-1" value="test-1" required={false}>
+            Option 1
+          </RadioTile>
+          <RadioTile id="test-2" value="test-2">
+            Option 2
+          </RadioTile>
+        </TileGroup>
+      );
+
+      expect(screen.getByDisplayValue('test-1')).toBeRequired();
+      expect(screen.getByDisplayValue('test-2')).toBeRequired();
+    });
+
     it('should support a custom `className` on the outermost element', () => {
       const { container } = render(
         <TileGroup