feat: improve RadioButton and RadioButtonGroup types (#16648)

Changes: - Export prop interfaces for `RadioButton` and `RadioButtonGroup`. - Narrow `onChange` argument type for `RadioButtonGroupProps`. - Reference `RadioButtonProps` for `RadioButtonGroup` types where we are expecting a `RadioButton` value. - Add missing types for component `refs` and event handlers in `RadioButton` and `RadioButtonGroup`. - Simplify `getRadioButtons()` with a type assertion on `children` argument and refactoring to use an early return statement.
carbon-design-system · Jun 12, 2024 · e582548 · e582548
1 parent f715af5
commit e582548
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 98 deletions.
diff --git a/packages/react/src/components/RadioButton/RadioButton.tsx b/packages/react/src/components/RadioButton/RadioButton.tsx
@@ -72,8 +72,8 @@ export interface RadioButtonProps
    * the underlying `<input>` changes
    */
   onChange?: (
-    value: string | number,
-    name: string | undefined,
+    value: RadioButtonProps['value'],
+    name: RadioButtonProps['name'],
     event: React.ChangeEvent<HTMLInputElement>
   ) => void;
 
@@ -98,80 +98,85 @@ export interface RadioButtonProps
   required?: boolean;
 }
 
-const RadioButton = React.forwardRef((props: RadioButtonProps, ref) => {
-  const {
-    className,
-    disabled,
-    hideLabel,
-    id,
-    labelPosition = 'right',
-    labelText = '',
-    name,
-    onChange = () => {},
-    value = '',
-    slug,
-    required,
-    ...rest
-  } = props;
-
-  const prefix = usePrefix();
-  const uid = useId('radio-button');
-  const uniqueId = id || uid;
-
-  function handleOnChange(event) {
-    onChange(value, name, event);
-  }
-
-  const innerLabelClasses = classNames(`${prefix}--radio-button__label-text`, {
-    [`${prefix}--visually-hidden`]: hideLabel,
-  });
-
-  const wrapperClasses = classNames(
-    className,
-    `${prefix}--radio-button-wrapper`,
-    {
-      [`${prefix}--radio-button-wrapper--label-${labelPosition}`]:
-        labelPosition !== 'right',
-      [`${prefix}--radio-button-wrapper--slug`]: slug,
+const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(
+  (props, ref) => {
+    const {
+      className,
+      disabled,
+      hideLabel,
+      id,
+      labelPosition = 'right',
+      labelText = '',
+      name,
+      onChange = () => {},
+      value = '',
+      slug,
+      required,
+      ...rest
+    } = props;
+
+    const prefix = usePrefix();
+    const uid = useId('radio-button');
+    const uniqueId = id || uid;
+
+    function handleOnChange(event: React.ChangeEvent<HTMLInputElement>) {
+      onChange(value, name, event);
     }
-  );
 
-  const inputRef = useRef<HTMLInputElement>(null);
+    const innerLabelClasses = classNames(
+      `${prefix}--radio-button__label-text`,
+      {
+        [`${prefix}--visually-hidden`]: hideLabel,
+      }
+    );
+
+    const wrapperClasses = classNames(
+      className,
+      `${prefix}--radio-button-wrapper`,
+      {
+        [`${prefix}--radio-button-wrapper--label-${labelPosition}`]:
+          labelPosition !== 'right',
+        [`${prefix}--radio-button-wrapper--slug`]: slug,
+      }
+    );
+
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    let normalizedSlug: React.ReactElement | undefined;
+    if (slug && React.isValidElement(slug)) {
+      const size = slug.props?.['kind'] === 'inline' ? 'md' : 'mini';
+      normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
+        size,
+      });
+    }
 
-  let normalizedSlug;
-  if (slug && React.isValidElement(slug)) {
-    const size = slug.props?.['kind'] === 'inline' ? 'md' : 'mini';
-    normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
-      size,
-    });
+    return (
+      <div className={wrapperClasses}>
+        <input
+          {...rest}
+          type="radio"
+          className={`${prefix}--radio-button`}
+          onChange={handleOnChange}
+          id={uniqueId}
+          ref={mergeRefs(inputRef, ref)}
+          disabled={disabled}
+          value={value}
+          name={name}
+          required={required}
+        />
+        <label htmlFor={uniqueId} className={`${prefix}--radio-button__label`}>
+          <span className={`${prefix}--radio-button__appearance`} />
+          {labelText && (
+            <Text className={innerLabelClasses}>
+              {labelText}
+              {normalizedSlug}
+            </Text>
+          )}
+        </label>
+      </div>
+    );
   }
-
-  return (
-    <div className={wrapperClasses}>
-      <input
-        {...rest}
-        type="radio"
-        className={`${prefix}--radio-button`}
-        onChange={handleOnChange}
-        id={uniqueId}
-        ref={mergeRefs(inputRef, ref)}
-        disabled={disabled}
-        value={value}
-        name={name}
-        required={required}
-      />
-      <label htmlFor={uniqueId} className={`${prefix}--radio-button__label`}>
-        <span className={`${prefix}--radio-button__appearance`} />
-        {labelText && (
-          <Text className={innerLabelClasses}>
-            {labelText}
-            {normalizedSlug}
-          </Text>
-        )}
-      </label>
-    </div>
-  );
-});
+);
 
 RadioButton.displayName = 'RadioButton';
 

diff --git a/packages/react/src/components/RadioButton/index.ts b/packages/react/src/components/RadioButton/index.ts
@@ -5,7 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import RadioButton from './RadioButton';
+import RadioButton, { RadioButtonProps } from './RadioButton';
 
 export default RadioButton;
 export { RadioButton };
+
+export type { RadioButtonProps };
diff --git a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx
@@ -14,6 +14,7 @@ import React, {
   useState,
 } from 'react';
 import classNames from 'classnames';
+import type { RadioButtonProps } from '../RadioButton';
 import { Legend } from '../Text';
 import { usePrefix } from '../../internal/usePrefix';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
@@ -44,7 +45,7 @@ export interface RadioButtonGroupProps
   /**
    * Specify the `<RadioButton>` to be selected by default
    */
-  defaultSelected?: string | number;
+  defaultSelected?: RadioButtonProps['value'];
 
   /**
    * Specify whether the group is disabled
@@ -87,10 +88,11 @@ export interface RadioButtonGroupProps
    * the group changes
    */
   onChange?: (
-    selection: React.ReactNode,
-    name: string,
+    selection: RadioButtonProps['value'],
+    name: RadioButtonGroupProps['name'],
     event: React.ChangeEvent<HTMLInputElement>
   ) => void;
+
   /**
    * Provide where radio buttons should be placed
    */
@@ -119,7 +121,8 @@ export interface RadioButtonGroupProps
   /**
    * Specify the value that is currently selected in the group
    */
-  valueSelected?: string | number;
+  valueSelected?: RadioButtonProps['value'];
+
   /**
    * `true` to specify if input selection in group is required.
    */
@@ -166,30 +169,38 @@ const RadioButtonGroup = React.forwardRef(
     }
 
     function getRadioButtons() {
-      const mappedChildren = React.Children.map(children, (radioButton) => {
-        const { value } = (radioButton as ReactElement)?.props ?? undefined;
-
-        const newProps = {
-          name: name,
-          key: value,
-          value: value,
-          onChange: handleOnChange,
-          checked: value === selected,
-          required: required,
-        };
-
-        if (!selected && (radioButton as ReactElement)?.props.checked) {
-          newProps.checked = true;
+      const mappedChildren = React.Children.map(
+        children as ReactElement<RadioButtonProps>,
+        (radioButton) => {
+          if (!radioButton) {
+            return;
+          }
+
+          const newProps = {
+            name: name,
+            key: radioButton.props.value,
+            value: radioButton.props.value,
+            onChange: handleOnChange,
+            checked: radioButton.props.value === selected,
+            required: required,
+          };
+
+          if (!selected && radioButton.props.checked) {
+            newProps.checked = true;
+          }
+
+          return React.cloneElement(radioButton, newProps);
         }
-        if (radioButton) {
-          return React.cloneElement(radioButton as ReactElement, newProps);
-        }
-      });
+      );
 
       return mappedChildren;
     }
 
-    function handleOnChange(newSelection, value, evt) {
+    function handleOnChange(
+      newSelection: RadioButtonProps['value'],
+      value: RadioButtonProps['name'],
+      evt: React.ChangeEvent<HTMLInputElement>
+    ) {
       if (!readOnly) {
         if (newSelection !== selected) {
           setSelected(newSelection);
@@ -230,7 +241,7 @@ const RadioButtonGroup = React.forwardRef(
     const divRef = useRef<HTMLDivElement>(null);
 
     // Slug is always size `mini`
-    let normalizedSlug;
+    let normalizedSlug: ReactElement | undefined;
     if (slug && slug['type']?.displayName === 'Slug') {
       normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
         size: 'mini',

diff --git a/packages/react/src/components/RadioButtonGroup/index.ts b/packages/react/src/components/RadioButtonGroup/index.ts
@@ -5,7 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import RadioButtonGroup from './RadioButtonGroup';
+import RadioButtonGroup, { RadioButtonGroupProps } from './RadioButtonGroup';
 
 export default RadioButtonGroup;
 export { RadioButtonGroup };
+
+export type { RadioButtonGroupProps };