refactor: using ReactNode instead of ReactNodeLike (#16418)

* refactor: using reactnode instead of reactnodelike * refactor: changed reactelementlike to reactelement
carbon-design-system · May 13, 2024 · 7171531 · 7171531
1 parent 8293f95
commit 7171531
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 24 deletions.
diff --git a/packages/react/src/components/NumberInput/NumberInput.tsx b/packages/react/src/components/NumberInput/NumberInput.tsx
@@ -7,7 +7,7 @@
 
 import { Add, Subtract } from '@carbon/icons-react';
 import cx from 'classnames';
-import PropTypes, { ReactNodeLike } from 'prop-types';
+import PropTypes from 'prop-types';
 import React, {
  ReactNode,
  useContext,
@@ -168,7 +168,7 @@ export interface NumberInputProps
  /**
  * **Experimental**: Provide a `Slug` component to be rendered inside the `TextInput` component
  */
- slug?: ReactNodeLike;
+ slug?: ReactNode;
 
  /**
  * Specify how much the values should increase/decrease upon clicking on up/down button

diff --git a/packages/react/src/components/RadioButton/RadioButton.tsx b/packages/react/src/components/RadioButton/RadioButton.tsx
@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import PropTypes, { ReactNodeLike } from 'prop-types';
-import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import React, { ReactNode, useRef } from 'react';
 import classNames from 'classnames';
 import { Text } from '../Text';
 import { usePrefix } from '../../internal/usePrefix';
@@ -60,7 +60,7 @@ export interface RadioButtonProps
  * Provide label text to be read by screen readers when interacting with the
  * control
  */
- labelText: ReactNodeLike;
+ labelText: ReactNode;
 
  /**
  * Provide a name for the underlying `<input>` node
@@ -85,7 +85,7 @@ export interface RadioButtonProps
  /**
  * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButton` component
  */
- slug?: ReactNodeLike;
+ slug?: ReactNode;
 
  /**
  * Specify the value of the `<RadioButton>`

diff --git a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx
@@ -5,8 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import PropTypes, { ReactElementLike, ReactNodeLike } from 'prop-types';
-import React, { createContext, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import React, {
+ createContext,
+ ReactElement,
+ ReactNode,
+ useRef,
+ useState,
+} from 'react';
 import classNames from 'classnames';
 import { Legend } from '../Text';
 import { usePrefix } from '../../internal/usePrefix';
@@ -28,7 +34,7 @@ export interface RadioButtonGroupProps
  /**
  * Provide a collection of `<RadioButton>` components to render in the group
  */
- children?: ReactNodeLike;
+ children?: ReactNode;
 
  /**
  * Provide an optional className to be applied to the container node
@@ -48,7 +54,7 @@ export interface RadioButtonGroupProps
  /**
  * Provide text that is used alongside the control label for additional help
  */
- helperText?: ReactNodeLike;
+ helperText?: ReactNode;
 
  /**
  * Specify whether the control is currently invalid
@@ -58,7 +64,7 @@ export interface RadioButtonGroupProps
  /**
  * Provide the text that is displayed when the control is in an invalid state
  */
- invalidText?: ReactNodeLike;
+ invalidText?: ReactNode;
 
  /**
  * Provide where label text should be placed
@@ -69,7 +75,7 @@ export interface RadioButtonGroupProps
  * Provide a legend to the RadioButtonGroup input that you are
  * exposing to the user
  */
- legendText?: ReactNodeLike;
+ legendText?: ReactNode;
 
  /**
  * Specify the name of the underlying `<input>` nodes
@@ -98,7 +104,7 @@ export interface RadioButtonGroupProps
  /**
  * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
  */
- slug?: ReactNodeLike;
+ slug?: ReactNode;
 
  /**
  * Specify whether the control is currently in warning state
@@ -108,7 +114,7 @@ export interface RadioButtonGroupProps
  /**
  * Provide the text that is displayed when the control is in warning state
  */
- warnText?: ReactNodeLike;
+ warnText?: ReactNode;
 
  /**
  * Specify the value that is currently selected in the group
@@ -161,7 +167,7 @@ const RadioButtonGroup = React.forwardRef(
 
  function getRadioButtons() {
  const mappedChildren = React.Children.map(children, (radioButton) => {
- const { value } = (radioButton as ReactElementLike)?.props ?? undefined;
+ const { value } = (radioButton as ReactElement)?.props ?? undefined;
 
  const newProps = {
  name: name,
@@ -172,11 +178,11 @@ const RadioButtonGroup = React.forwardRef(
  required: required,
  };
 
- if (!selected && (radioButton as ReactElementLike)?.props.checked) {
+ if (!selected && (radioButton as ReactElement)?.props.checked) {
  newProps.checked = true;
  }
  if (radioButton) {
- return React.cloneElement(radioButton as ReactElementLike, newProps);
+ return React.cloneElement(radioButton as ReactElement, newProps);
  }
  });
 

diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import PropTypes, { ReactNodeLike } from 'prop-types';
+import PropTypes from 'prop-types';
 import React, {
  ChangeEventHandler,
  ComponentPropsWithRef,
@@ -122,7 +122,7 @@ interface SelectProps
  /**
  * **Experimental**: Provide a `Slug` component to be rendered inside the `Dropdown` component
  */
- slug?: ReactNodeLike;
+ slug?: ReactNode;
 
  /**
  * Specify whether the control is currently in warning state

diff --git a/packages/react/src/components/Slider/Slider.tsx b/packages/react/src/components/Slider/Slider.tsx
@@ -5,8 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { type KeyboardEventHandler, PureComponent } from 'react';
-import PropTypes, { ReactNodeLike } from 'prop-types';
+import React, {
+ type KeyboardEventHandler,
+ PureComponent,
+ ReactNode,
+} from 'react';
+import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
 import throttle from 'lodash.throttle';
@@ -136,7 +140,7 @@ export interface SliderProps
  /**
  * The child nodes.
  */
- children?: ReactNodeLike;
+ children?: ReactNode;
 
  /**
  * The CSS class name for the slider, set on the wrapping div.
@@ -176,12 +180,12 @@ export interface SliderProps
  /**
  * Provide the text that is displayed when the Slider is in an invalid state
  */
- invalidText?: React.ReactNode;
+ invalidText?: ReactNode;
 
  /**
  * The label for the slider.
  */
- labelText?: ReactNodeLike;
+ labelText?: ReactNode;
 
  /**
  * @deprecated