Fix React forwardRef warnings for TooltipAnchors (#54492)

* Forward refs for SVG and Icon components

* Address code review

* Fix unit test

* Add changelog

packages/icons/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancement
+
+-   `<Icon>` now forwards ref to the underlying child component ([#54492](https://github.com/WordPress/gutenberg/pull/54492)).
+
 ## 9.32.0 (2023-08-31)
 
 ### Bug Fix

packages/icons/src/icon/index.js

@@ -1,25 +1,27 @@
 /**
  * WordPress dependencies
  */
-import { cloneElement } from '@wordpress/element';
+import { cloneElement, forwardRef } from '@wordpress/element';
 
 /** @typedef {{icon: JSX.Element, size?: number} & import('@wordpress/primitives').SVGProps} IconProps */
 
 /**
  * Return an SVG icon.
  *
- * @param {IconProps} props icon is the SVG component to render
- *                          size is a number specifiying the icon size in pixels
- *                          Other props will be passed to wrapped SVG component
+ * @param {IconProps}                                 props icon is the SVG component to render
+ *                                                          size is a number specifiying the icon size in pixels
+ *                                                          Other props will be passed to wrapped SVG component
+ * @param {import('react').ForwardedRef<HTMLElement>} ref   The forwarded ref to the SVG element.
  *
  * @return {JSX.Element}  Icon component
  */
-function Icon( { icon, size = 24, ...props } ) {
+function Icon( { icon, size = 24, ...props }, ref ) {
 	return cloneElement( icon, {
 		width: size,
 		height: size,
 		...props,
+		ref,
 	} );
 }
 
-export default Icon;
+export default forwardRef( Icon );

packages/primitives/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancement
+
+-   `<SVG>` now forwards ref to the underlying `<svg>` element ([#54492](https://github.com/WordPress/gutenberg/pull/54492)).
+
 ## 3.39.0 (2023-08-31)
 
 ## 3.38.0 (2023-08-16)

packages/primitives/src/svg/index.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { createElement } from '@wordpress/element';
+import { createElement, forwardRef } from '@wordpress/element';
 
 /** @typedef {{isPressed?: boolean} & import('react').ComponentPropsWithoutRef<'svg'>} SVGProps */
 
@@ -82,23 +82,27 @@ export const LinearGradient = ( props ) =>
  */
 export const Stop = ( props ) => createElement( 'stop', props );
 
-/**
- *
- * @param {SVGProps} props isPressed indicates whether the SVG should appear as pressed.
- *                         Other props will be passed through to svg component.
- *
- * @return {JSX.Element} Stop component
- */
-export const SVG = ( { className, isPressed, ...props } ) => {
-	const appliedProps = {
-		...props,
-		className:
-			classnames( className, { 'is-pressed': isPressed } ) || undefined,
-		'aria-hidden': true,
-		focusable: false,
-	};
+export const SVG = forwardRef(
+	/**
+	 * @param {SVGProps}                                    props isPressed indicates whether the SVG should appear as pressed.
+	 *                                                            Other props will be passed through to svg component.
+	 * @param {import('react').ForwardedRef<SVGSVGElement>} ref   The forwarded ref to the SVG element.
+	 *
+	 * @return {JSX.Element} Stop component
+	 */
+	( { className, isPressed, ...props }, ref ) => {
+		const appliedProps = {
+			...props,
+			className:
+				classnames( className, { 'is-pressed': isPressed } ) ||
+				undefined,
+			'aria-hidden': true,
+			focusable: false,
+		};
 
-	// Disable reason: We need to have a way to render HTML tag for web.
-	// eslint-disable-next-line react/forbid-elements
-	return <svg { ...appliedProps } />;
-};
+		// Disable reason: We need to have a way to render HTML tag for web.
+		// eslint-disable-next-line react/forbid-elements
+		return <svg { ...appliedProps } ref={ ref } />;
+	}
+);
+SVG.displayName = 'SVG';