refactor: using reactnode instead of reactnodelike (#16428)

carbon-design-system · May 14, 2024 · f0d89db · f0d89db
1 parent b6393db
commit f0d89db
Show file tree

Hide file tree

Showing 10 changed files with 43 additions and 36 deletions.
diff --git a/packages/react/src/components/Tag/DismissibleTag.tsx b/packages/react/src/components/Tag/DismissibleTag.tsx
@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import PropTypes, { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import { usePrefix } from '../../internal/usePrefix';
@@ -57,7 +57,7 @@ export interface DismissibleTagBaseProps {
   /**
    * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
    */
-  slug?: ReactNodeLike;
+  slug?: ReactNode;
 
   /**
    * Text to show on clear filters

diff --git a/packages/react/src/components/Tag/OperationalTag.tsx b/packages/react/src/components/Tag/OperationalTag.tsx
@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import PropTypes, { ReactNodeLike } from 'prop-types';
-import React, { MouseEventHandler } from 'react';
+import PropTypes from 'prop-types';
+import React, { MouseEventHandler, ReactNode } from 'react';
 import classNames from 'classnames';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import { usePrefix } from '../../internal/usePrefix';
@@ -65,7 +65,7 @@ export interface OperationalTagBaseProps {
   /**
    * **Experimental:** Provide a `Slug` component to be rendered inside the `OperationalTag` component
    */
-  slug?: ReactNodeLike;
+  slug?: ReactNode;
 
   /**
    * Specify the type of the `Tag`

diff --git a/packages/react/src/components/Tag/SelectableTag.tsx b/packages/react/src/components/Tag/SelectableTag.tsx
@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import PropTypes, { ReactNodeLike } from 'prop-types';
-import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import React, { ReactNode, useState } from 'react';
 import classNames from 'classnames';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import { usePrefix } from '../../internal/usePrefix';
@@ -56,7 +56,7 @@ export interface SelectableTagBaseProps {
   /**
    * **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
    */
-  slug?: ReactNodeLike;
+  slug?: ReactNode;
 }
 
 export type SelectableTagProps<T extends React.ElementType> = PolymorphicProps<

diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import PropTypes, { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 import { Close } from '@carbon/icons-react';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
@@ -83,7 +83,7 @@ export interface TagBaseProps {
   /**
    * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
    */
-  slug?: ReactNodeLike;
+  slug?: ReactNode;
 
   /**
    * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.

diff --git a/packages/react/src/components/Text/Text.tsx b/packages/react/src/components/Text/Text.tsx
@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import PropTypes, { ReactNodeLike } from 'prop-types';
-import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import React, { ReactNode, useContext } from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { TextDir } from './TextDirection';
 import { TextDirectionContext } from './TextDirectionContext';
@@ -88,7 +88,7 @@ Text.propTypes = {
   dir: PropTypes.oneOf(['ltr', 'rtl', 'auto']),
 };
 
-function getTextFromChildren(children: ReactNodeLike) {
+function getTextFromChildren(children: ReactNode) {
   if (typeof children === 'string') {
     return children;
   }

diff --git a/packages/react/src/components/TextArea/TextArea.tsx b/packages/react/src/components/TextArea/TextArea.tsx
@@ -5,8 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import PropTypes, { ReactNodeLike } from 'prop-types';
-import React, { useState, useContext, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import React, {
+  ReactNode,
+  useState,
+  useContext,
+  useRef,
+  useEffect,
+} from 'react';
 import classNames from 'classnames';
 import deprecate from '../../prop-types/deprecate';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
@@ -52,7 +58,7 @@ export interface TextAreaProps
   /**
    * Provide text that is used alongside the control label for additional help
    */
-  helperText?: ReactNodeLike;
+  helperText?: ReactNode;
 
   /**
    * Specify whether you want the underlying label to be visually hidden
@@ -72,13 +78,13 @@ export interface TextAreaProps
   /**
    * Provide the text that is displayed when the control is in an invalid state
    */
-  invalidText?: ReactNodeLike;
+  invalidText?: ReactNode;
 
   /**
    * Provide the text that will be read by a screen reader when visiting this
    * control
    */
-  labelText: ReactNodeLike;
+  labelText: ReactNode;
 
   /**
    * @deprecated
@@ -128,7 +134,7 @@ export interface TextAreaProps
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `TextArea` component
    */
-  slug?: ReactNodeLike;
+  slug?: ReactNode;
 
   /**
    * Provide the current value of the `<textarea>`
@@ -143,7 +149,7 @@ export interface TextAreaProps
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText?: ReactNodeLike;
+  warnText?: ReactNode;
 
   /**
    * Specify the method used for calculating the counter number

diff --git a/packages/react/src/components/TextInput/PasswordInput.tsx b/packages/react/src/components/TextInput/PasswordInput.tsx
@@ -1,11 +1,12 @@
 import React, {
   InputHTMLAttributes,
+  ReactNode,
   useContext,
   useEffect,
   useState,
 } from 'react';
 import classNames from 'classnames';
-import PropTypes, { ReactNodeLike } from 'prop-types';
+import PropTypes from 'prop-types';
 import { View, ViewOff } from '@carbon/icons-react';
 import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps';
 import { textInputProps } from './util';
@@ -42,7 +43,7 @@ export interface PasswordInputProps
   /**
    * Provide text that is used alongside the control label for additional help
    */
-  helperText?: ReactNodeLike;
+  helperText?: ReactNode;
 
   /**
    * Specify whether or not the underlying label is visually hidden
@@ -72,12 +73,12 @@ export interface PasswordInputProps
   /**
    * Provide the text that is displayed when the control is in an invalid state
    */
-  invalidText?: ReactNodeLike;
+  invalidText?: ReactNode;
 
   /**
    * Provide the text that will be read by a screen reader when visiting this control
    */
-  labelText: ReactNodeLike;
+  labelText: ReactNode;
 
   /**
    * @deprecated The `light` prop for `PasswordInput` has been deprecated in favor of the new `Layer` component. It will be removed in the next major release.
@@ -164,7 +165,7 @@ export interface PasswordInputProps
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText?: ReactNodeLike;
+  warnText?: ReactNode;
 }
 
 const PasswordInput = React.forwardRef(function PasswordInput(

diff --git a/packages/react/src/components/TextInput/TextInput.tsx b/packages/react/src/components/TextInput/TextInput.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, { ReactNode, useContext, useState } from 'react';
 import classNames from 'classnames';
 import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps';
@@ -124,7 +124,7 @@ export interface TextInputProps
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `TextInput` component
    */
-  slug?: ReactNodeLike;
+  slug?: ReactNode;
 
   /**
    * Specify the type of the `<input>`

diff --git a/packages/react/src/components/Tile/Tile.tsx b/packages/react/src/components/Tile/Tile.tsx
@@ -9,7 +9,7 @@ import React, {
   type ChangeEvent,
   type ComponentType,
 } from 'react';
-import PropTypes, { ReactNodeLike } from 'prop-types';
+import PropTypes from 'prop-types';
 import cx from 'classnames';
 import {
   Checkbox,
@@ -48,7 +48,7 @@ export interface TileProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
    */
-  slug?: ReactNodeLike;
+  slug?: ReactNode;
 }
 
 export const Tile = React.forwardRef<HTMLDivElement, TileProps>(function Tile(
@@ -396,7 +396,7 @@ export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
    */
-  slug?: ReactNodeLike;
+  slug?: ReactNode;
 
   /**
    * Specify the tab index of the wrapper element
@@ -641,7 +641,7 @@ export interface ExpandableTileProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `ExpandableTile` component
    */
-  slug?: ReactNodeLike;
+  slug?: ReactNode;
 
   /**
    * The `tabindex` attribute.

diff --git a/packages/react/src/components/TileGroup/TileGroup.tsx b/packages/react/src/components/TileGroup/TileGroup.tsx
@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import PropTypes, { ReactNodeLike } from 'prop-types';
-import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import React, { ReactNode, useState } from 'react';
 import RadioTile from '../RadioTile';
 import { usePrefix } from '../../internal/usePrefix';
 import { ReactAttr } from '../../types/common';
@@ -19,7 +19,7 @@ export interface TileGroupProps
   /**
    * Provide a collection of <RadioTile> components to render in the group
    */
-  children?: ReactNodeLike;
+  children?: ReactNode;
 
   /**
    * Provide an optional className to be applied to the container node