From 50a62eafc77b52ed73ebf338374e90de1a364536 Mon Sep 17 00:00:00 2001
From: Joseph Schultz <jschultz333@gmail.com>
Date: Fri, 15 Mar 2024 22:19:25 -0500
Subject: [PATCH 1/2] feat: add types to `RadioTile`

Changes:
- Convert `RadioTile` to Typescript and add types.
- Add export for new interface `RadioTileProps`.
- Normalize PropType descriptions with similar components.
---
 .all-contributorsrc                           |   9 ++
 README.md                                     |   1 +
 .../RadioTile/{RadioTile.js => RadioTile.tsx} | 100 +++++++++++++++---
 .../RadioTile/{index.js => index.ts}          |   4 +-
 4 files changed, 96 insertions(+), 18 deletions(-)
 rename packages/react/src/components/RadioTile/{RadioTile.js => RadioTile.tsx} (55%)
 rename packages/react/src/components/RadioTile/{index.js => index.ts} (71%)

diff --git a/.all-contributorsrc b/.all-contributorsrc
index 862fe8ead31f..d006f943b119 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -1434,6 +1434,15 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "cuppajoey",
+      "name": "Joseph Schultz",
+      "avatar_url": "https://avatars.githubusercontent.com/u/14837881?v=4",
+      "profile": "https://cuppajoey.com/",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"
diff --git a/README.md b/README.md
index c4f64b34cfc4..1de1f5e7a86d 100644
--- a/README.md
+++ b/README.md
@@ -278,6 +278,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
   <tr>
     <td align="center"><a href="https://github.com/ggdawson"><img src="https://avatars.githubusercontent.com/u/37080130?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Garrett Dawson</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=ggdawson" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=ggdawson" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/dedanade"><img src="https://avatars.githubusercontent.com/u/66811981?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Daniel Adebonojo</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=dedanade" title="Documentation">📖</a></td>
+    <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>
   </tr>
 </table>
 
diff --git a/packages/react/src/components/RadioTile/RadioTile.js b/packages/react/src/components/RadioTile/RadioTile.tsx
similarity index 55%
rename from packages/react/src/components/RadioTile/RadioTile.js
rename to packages/react/src/components/RadioTile/RadioTile.tsx
index 9ea9a8a9b31a..c2eca494ca51 100644
--- a/packages/react/src/components/RadioTile/RadioTile.js
+++ b/packages/react/src/components/RadioTile/RadioTile.tsx
@@ -21,12 +21,73 @@ import { noopFn } from '../../internal/noopFn';
 import { Text } from '../Text';
 import { useFeatureFlag } from '../FeatureFlags';
 
+export interface RadioTileProps {
+  /**
+   * Specify whether the `RadioTile` should be checked.
+   */
+  checked?: boolean;
+
+  /**
+   * The `RadioTile` content.
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Provide an optional `className` to be applied to the underlying `<label>`.
+   */
+  className?: string;
+
+  /**
+   * Specify whether the `RadioTile` should be disabled.
+   */
+  disabled?: boolean;
+
+  /**
+   * Provide a unique id for the underlying `<input>`.
+   */
+  id?: string;
+
+  /**
+   * `true` to use the light version. For use on $ui-01 backgrounds only.
+   * Don't use this to make tile background color the same as the container background color.
+   *
+   * @deprecated This prop is no longer needed and has been deprecated in v11 in favor of the new Layer component. It will be removed in the next major release.
+   */
+  light?: boolean;
+
+  /**
+   * Provide a `name` for the underlying `<input>`.
+   */
+  name?: string;
+
+  /**
+   * Provide an optional `onChange` hook that is called each time the value of
+   * the underlying `<input>` changes.
+   */
+  onChange?: (
+    value: string | number,
+    name: string | undefined,
+    event:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.KeyboardEvent<HTMLInputElement>
+  ) => void;
+
+  /**
+   * Specify the tab index of the underlying `<input>`.
+   */
+  tabIndex?: number;
+
+  /**
+   * Specify the value of the underlying `<input>`.
+   */
+  value: string | number;
+}
+
 const RadioTile = React.forwardRef(function RadioTile(
   {
     children,
     className: customClassName,
     disabled,
-    // eslint-disable-next-line no-unused-vars
     light,
     checked,
     name,
@@ -35,8 +96,8 @@ const RadioTile = React.forwardRef(function RadioTile(
     onChange = noopFn,
     tabIndex = 0,
     ...rest
-  },
-  ref
+  }: RadioTileProps,
+  ref: React.Ref<HTMLInputElement>
 ) {
   const prefix = usePrefix();
   const inputId = useFallbackId(id);
@@ -63,11 +124,15 @@ const RadioTile = React.forwardRef(function RadioTile(
     }
   }
 
-  function handleOnChange(evt) {
+  function handleOnChange(
+    evt:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.KeyboardEvent<HTMLInputElement>
+  ) {
     onChange(value, name, evt);
   }
 
-  function handleOnKeyDown(evt) {
+  function handleOnKeyDown(evt: React.KeyboardEvent<HTMLInputElement>) {
     if (matches(evt, [keys.Enter, keys.Space])) {
       evt.preventDefault();
       onChange(value, name, evt);
@@ -82,9 +147,9 @@ const RadioTile = React.forwardRef(function RadioTile(
         disabled={disabled}
         id={inputId}
         name={name}
-        onChange={!disabled ? handleOnChange : null}
-        onKeyDown={!disabled ? handleOnKeyDown : null}
-        tabIndex={!disabled ? tabIndex : null}
+        onChange={!disabled ? handleOnChange : undefined}
+        onKeyDown={!disabled ? handleOnKeyDown : undefined}
+        tabIndex={!disabled ? tabIndex : undefined}
         type="radio"
         value={value}
         ref={ref}
@@ -99,27 +164,27 @@ const RadioTile = React.forwardRef(function RadioTile(
 
 RadioTile.propTypes = {
   /**
-   * `true` if this tile should be selected.
+   * Specify whether the `RadioTile` should be checked.
    */
   checked: PropTypes.bool,
 
   /**
-   * The tile content.
+   * The `RadioTile` content.
    */
   children: PropTypes.node,
 
   /**
-   * The CSS class names.
+   * Provide an optional `className` to be applied to the underlying `<label>`.
    */
   className: PropTypes.string,
 
   /**
-   * Specify whether the RadioTile should be disabled
+   * Specify whether the `RadioTile` should be disabled.
    */
   disabled: PropTypes.bool,
 
   /**
-   * The ID of the `<input>`.
+   * Provide a unique id for the underlying `<input>`.
    */
   id: PropTypes.string,
 
@@ -134,22 +199,23 @@ RadioTile.propTypes = {
   ),
 
   /**
-   * The `name` of the `<input>`.
+   * Provide a `name` for the underlying `<input>`.
    */
   name: PropTypes.string,
 
   /**
-   * The handler of the massaged `change` event on the `<input>`.
+   * Provide an optional `onChange` hook that is called each time the value of
+   * the underlying `<input>` changes.
    */
   onChange: PropTypes.func,
 
   /**
-   * Specify the tab index of the wrapper element
+   * Specify the tab index of the underlying `<input>`.
    */
   tabIndex: PropTypes.number,
 
   /**
-   * The `value` of the `<input>`.
+   * Specify the value of the underlying `<input>`.
    */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
 };
diff --git a/packages/react/src/components/RadioTile/index.js b/packages/react/src/components/RadioTile/index.ts
similarity index 71%
rename from packages/react/src/components/RadioTile/index.js
rename to packages/react/src/components/RadioTile/index.ts
index f7dc0e4b8450..7970436d8eb2 100644
--- a/packages/react/src/components/RadioTile/index.js
+++ b/packages/react/src/components/RadioTile/index.ts
@@ -5,7 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import RadioTile from './RadioTile';
+import RadioTile, { RadioTileProps } from './RadioTile';
 
 export default RadioTile;
 export { RadioTile };
+
+export type { RadioTileProps };

From da0a29c1f434b3976bc7cb7e0dad363159e4bdac Mon Sep 17 00:00:00 2001
From: Joseph Schultz <jschultz333@gmail.com>
Date: Tue, 19 Mar 2024 11:48:58 -0500
Subject: [PATCH 2/2] docs: fix typos in `propTypes.light` description

---
 packages/react/src/components/RadioTile/RadioTile.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/RadioTile/RadioTile.tsx b/packages/react/src/components/RadioTile/RadioTile.tsx
index c2eca494ca51..a9bdaeab34e9 100644
--- a/packages/react/src/components/RadioTile/RadioTile.tsx
+++ b/packages/react/src/components/RadioTile/RadioTile.tsx
@@ -48,7 +48,7 @@ export interface RadioTileProps {
   id?: string;
 
   /**
-   * `true` to use the light version. For use on $ui-01 backgrounds only.
+   * `true` to use the light version. For use on `$layer-01` backgrounds only.
    * Don't use this to make tile background color the same as the container background color.
    *
    * @deprecated This prop is no longer needed and has been deprecated in v11 in favor of the new Layer component. It will be removed in the next major release.
@@ -189,13 +189,13 @@ RadioTile.propTypes = {
   id: PropTypes.string,
 
   /**
-   * `true` to use the light version. For use on $ui-01 backgrounds only.
+   * `true` to use the light version. For use on `$layer-01` backgrounds only.
    * Don't use this to make tile background color same as container background color.
    */
   light: deprecate(
     PropTypes.bool,
     'The `light` prop for `RadioTile` is no longer needed and has ' +
-      'been deprecated in v11 in favor of the new `Layer` component. It will be moved in the next major release.'
+      'been deprecated in v11 in favor of the new `Layer` component. It will be removed in the next major release.'
   ),
 
   /**