fix: normalize renderIcon types (#18683)

* fix: normalize renderIcon types

* refactor: normalize renderIcon jsdoc comments

---------

Co-authored-by: Gururaj J <89023023+Gururajj77@users.noreply.github.com>
Co-authored-by: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com>

Author: 3 people

packages/react/src/components/Button/Button.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -88,8 +88,7 @@ export interface ButtonBaseProps
   rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
 
   /**
-   * Optional prop to allow overriding the icon rendering.
-   * Can be a React component class
+   * A component used to render an icon.
    */
   renderIcon?: React.ElementType;
 
@@ -359,8 +358,7 @@ const Button: ButtonComponent = React.forwardRef(
   rel: PropTypes.string,
 
   /**
-   * Optional prop to allow overriding the icon rendering.
-   * Can be a React component class
+   * A component used to render an icon.
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 

packages/react/src/components/ChatButton/ChatButton.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2024
+ * Copyright IBM Corp. 2024, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -45,9 +45,9 @@ export interface ChatButtonProps
    * Specify the kind of `ChatButton` you want to create
    */
   kind?: ChatButtonKind;
+
   /**
-   * Optional prop to specify an icon to be rendered.
-   * Can be a React component class
+   * A component used to render an icon.
    */
   renderIcon?: ComponentType | FunctionComponent;
   /**
@@ -142,8 +142,7 @@ ChatButton.propTypes = {
   ]),
 
   /**
-   * Optional prop to specify an icon to be rendered.
-   * Can be a React component class
+   * A component used to render an icon.
    */
   // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),

packages/react/src/components/ContainedList/ContainedListItem/ContainedListItem.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -42,7 +42,7 @@ interface ContainedListItemProps {
   onClick?: () => void;
 
   /**
-   * Provide an optional icon to render in front of the item's content.
+   * A component used to render an icon.
    */
   renderIcon?: ComponentType | FunctionComponent;
 }
@@ -130,7 +130,7 @@ ContainedListItem.propTypes = {
   onClick: PropTypes.func,
 
   /**
-   * Provide an optional icon to render in front of the item's content.
+   * A component used to render an icon.
    */
   // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),

packages/react/src/components/DataTable/TableBatchAction.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -24,7 +24,7 @@ export interface TableBatchActionProps
   iconDescription?: string;
 
   /**
-   * Optional function to render your own icon in the underlying button
+   * A component used to render an icon.
    */
   renderIcon?: React.ElementType;
 }
@@ -61,7 +61,7 @@ TableBatchAction.propTypes = {
   },
 
   /**
-   * Optional function to render your own icon in the underlying button
+   * A component used to render an icon.
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 };

packages/react/src/components/DataTable/TableToolbarMenu.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -34,7 +34,7 @@ export interface TableToolbarMenuProps
   menuOptionsClass?: string;
 
   /**
-   * Optional prop to allow overriding the default menu icon
+   * A component used to render an icon.
    */
   renderIcon?: any;
 }
@@ -90,7 +90,7 @@ TableToolbarMenu.propTypes = {
   menuOptionsClass: PropTypes.string,
 
   /**
-   * Optional prop to allow overriding the default menu icon
+   * A component used to render an icon.
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 };

packages/react/src/components/Link/Link.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -51,8 +51,7 @@ export interface LinkBaseProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   inline?: boolean;
 
   /**
-   * @description Optional prop to render an icon next to the link.
-   *   Can be a React component class
+   * A component used to render an icon.
    */
   renderIcon?: ComponentType;
 
@@ -168,8 +167,7 @@ const Link: LinkComponent = React.forwardRef(
   inline: PropTypes.bool,
 
   /**
-   * Optional prop to render an icon next to the link.
-   * Can be a React component class
+   * A component used to render an icon.
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 

packages/react/src/components/Menu/MenuItem.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023
+ * Copyright IBM Corp. 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -77,7 +77,7 @@ export interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
   ) => void;
 
   /**
-   * Sets the menu item's icon.
+   * A component used to render an icon.
    */
   renderIcon?: FC;
 
@@ -320,7 +320,7 @@ MenuItem.propTypes = {
   onClick: PropTypes.func,
 
   /**
-   * Sets the menu item's icon.
+   * A component used to render an icon.
    */
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),

packages/react/src/components/Notification/Notification.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -9,8 +9,6 @@ import PropTypes from 'prop-types';
 import React, {
   type ReactNode,
   type MouseEvent,
-  type ComponentType,
-  type FunctionComponent,
   type ButtonHTMLAttributes,
   type HTMLAttributes,
   useEffect,
@@ -171,12 +169,9 @@ export interface NotificationButtonProps
   notificationType?: 'toast' | 'inline' | 'actionable';
 
   /**
-   * Optional prop to allow overriding the icon rendering.
-   * Can be a React component class
+   * A component used to render an icon.
    */
-  renderIcon?:
-    | ComponentType<{ className?: string; name?: string }>
-    | FunctionComponent<{ className?: string; name?: string }>;
+  renderIcon?: React.ElementType;
 }
 
 export function NotificationButton({
@@ -244,8 +239,7 @@ NotificationButton.propTypes = {
   notificationType: PropTypes.oneOf(['toast', 'inline', 'actionable']),
 
   /**
-   * Optional prop to allow overriding the icon rendering.
-   * Can be a React component class
+   * A component used to render an icon.
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 

packages/react/src/components/OverflowMenu/OverflowMenu.tsx

@@ -12,7 +12,7 @@ import {
   type MenuDirection,
   type MenuOffset,
 } from '../../internal/FloatingMenu';
-import React, { ComponentType } from 'react';
+import React from 'react';
 import { matches as keyCodeMatches, keys } from '../../internal/keyboard';
 
 import ClickListener from '../../internal/ClickListener';
@@ -89,11 +89,6 @@ export const getMenuOffset: MenuOffset = (
   }
 };
 
-type IconProps = {
-  className?: string;
-  'aria-label'?: string;
-};
-
 export interface OverflowMenuProps {
   /**
    * Specify a label to be read by screen readers on the container node
@@ -189,9 +184,9 @@ export interface OverflowMenuProps {
   open?: boolean;
 
   /**
-   * Function called to override icon rendering.
+   * A component used to render an icon.
    */
-  renderIcon?: ComponentType<IconProps>;
+  renderIcon?: React.ElementType;
 
   /**
    * Specify a CSS selector that matches the DOM element that should
@@ -354,7 +349,7 @@ class OverflowMenu extends React.Component<
     open: PropTypes.bool,
 
     /**
-     * Function called to override icon rendering.
+     * A component used to render an icon.
      */
     renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 

packages/react/src/components/OverflowMenu/next/index.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -69,7 +69,7 @@ interface OverflowMenuProps {
   menuAlignment?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
 
   /**
-   * Optionally provide a custom icon to be rendered on the trigger button.
+   * A component used to render an icon.
    */
   renderIcon?: ComponentType | FunctionComponent;
 
@@ -276,7 +276,7 @@ OverflowMenu.propTypes = {
   ]),
 
   /**
-   * Optionally provide a custom icon to be rendered on the trigger button.
+   * A component used to render an icon.
    */
   // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),