Fix(web, web-twig, web-react): Tooltip on Icon component

packages/web-react/src/components/Icon/Icon.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ForwardedRef, forwardRef } from 'react';
 import { warning } from '../../common/utilities';
 import { useIcon, useStyleProps } from '../../hooks';
 import { IconProps } from '../../types';
@@ -10,7 +10,9 @@ const defaultProps = {
   boxSize: 24,
 };
 
-export const Icon = (props: IconProps) => {
+/* We need an exception for components exported with forwardRef */
+/* eslint no-underscore-dangle: ['error', { allow: ['_Icon'] }] */
+export const _Icon = (props: IconProps, ref: ForwardedRef<SVGSVGElement>) => {
   const { boxSize, name, title, ariaHidden, ...restProps } = props;
   let icon = useIcon(name);
   const { styleProps, props: otherProps } = useStyleProps(restProps);
@@ -41,6 +43,7 @@ export const Icon = (props: IconProps) => {
         {...otherProps}
         {...styleProps}
         className={styleProps.className}
+        ref={ref}
       >
         {/* @ts-expect-error TS2349: This expression is not callable. Type 'never' has no call signatures. */}
         {htmlParser(icon)}
@@ -64,11 +67,14 @@ export const Icon = (props: IconProps) => {
         {...otherProps}
         {...styleProps}
         className={styleProps.className}
+        ref={ref}
       />
     </NoSsr>
   );
 };
 
+export const Icon = forwardRef<SVGSVGElement, IconProps>(_Icon);
+
 Icon.defaultProps = defaultProps;
 
 export default Icon;

packages/web-react/src/components/Icon/demo/index.tsx

@@ -7,7 +7,7 @@ import ReactDOM from 'react-dom/client';
 import icons from '@lmc-eu/spirit-icons/dist/icons';
 import { IconsProvider } from '../../../context';
 import DocsSection from '../../../../docs/DocsSections';
-import Icon from './Icon';
+import Icon from '../Icon';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>

packages/web-react/src/components/Tooltip/TooltipTrigger.tsx

@@ -1,11 +1,11 @@
 import React, { ElementType, ReactNode } from 'react';
 import { useStyleProps } from '../../hooks';
-import { StyleProps } from '../../types';
+import { StyleProps, TransferProps } from '../../types';
 import { useTooltipContext } from './TooltipContext';
 
-interface TooltipTriggerProps extends StyleProps {
+interface TooltipTriggerProps extends StyleProps, TransferProps {
   elementType?: ElementType | string;
-  children: string | ReactNode | ((props: { isOpen: boolean }) => React.ReactNode);
+  children?: string | ReactNode | ((props: { isOpen: boolean }) => React.ReactNode);
 }
 
 const TooltipTrigger = (props: TooltipTriggerProps) => {
@@ -25,6 +25,7 @@ const TooltipTrigger = (props: TooltipTriggerProps) => {
 
 TooltipTrigger.defaultProps = {
   elementType: 'button',
+  children: null,
 };
 
 export default TooltipTrigger;

packages/web-react/src/components/TooltipModern/demo/TooltipIcon.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { Icon } from '../../Icon';
+import { TooltipModern, TooltipPopover, TooltipTrigger } from '../../Tooltip';
+
+const TooltipIcon = () => {
+  const [openIcon, setOpenIcon] = useState(false);
+
+  return (
+    <div className="spirit-feature-tooltip-enable-data-placement">
+      <p>
+        Click on the icon on the right to view the tooltip{' '}
+        <TooltipModern
+          id="tooltip-example-with-icon"
+          isOpen={openIcon}
+          onToggle={setOpenIcon}
+          placement="right"
+          flipFallbackPlacements={['top-start', 'bottom-start', 'left']}
+          UNSAFE_className="d-inline-block"
+          isDismissible
+        >
+          <TooltipTrigger
+            elementType={Icon}
+            name="info"
+            boxSize={16}
+            UNSAFE_className="d-inline-block"
+            marginBottom="space-200"
+          />
+          <TooltipPopover>Close me</TooltipPopover>
+        </TooltipModern>
+      </p>
+    </div>
+  );
+};
+
+export default TooltipIcon;

packages/web-react/src/components/TooltipModern/demo/index.tsx

@@ -13,6 +13,7 @@ import TooltipDismissibleViaJS from './TooltipDismissibleViaJS';
 import TooltipOnHover from './TooltipOnHover';
 import TooltipPlacements from './TooltipPlacements';
 import TooltipWithFloatingUI from './TooltipWithFloatingUI';
+import TooltipIcon from './TooltipIcon';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
@@ -32,6 +33,9 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
       <DocsSection title="Dismissible Tooltip via JS API and Floating UI">
         <TooltipDismissibleViaJS />
       </DocsSection>
+      <DocsSection title="Tooltip on Icon Component">
+        <TooltipIcon />
+      </DocsSection>
       <DocsSection title="Advanced Floating Functionality" stackAlignment="stretch">
         <TooltipWithFloatingUI />
       </DocsSection>

packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig

@@ -30,6 +30,10 @@
         {% include '@components/Tooltip/stories/TooltipDismissibleViaJS.twig' %}
     </DocsSection>
 
+    <DocsSection title="Tooltip on Icon Component">
+        {% include '@components/Tooltip/stories/TooltipIcon.twig' %}
+    </DocsSection>
+
     <DocsSection title="Advanced Floating Functionality">
         {% include '@components/Tooltip/stories/TooltipFloatingUI.twig' %}
     </DocsSection>

packages/web-twig/src/Resources/components/Tooltip/stories/TooltipIcon.twig

@@ -0,0 +1,24 @@
+<span>
+  Click on the icon on the right to view the tooltip
+  <TooltipWrapper UNSAFE_className="spirit-feature-tooltip-enable-data-placement d-inline-block">
+        <Icon
+          id="button-example-with-icon"
+          name="info"
+          boxSize="16"
+          marginBottom="space-200"
+          aria-describedby="tooltip-example-with-icon"
+          data-spirit-toggle="tooltip"
+          data-spirit-target="#tooltip-example-with-icon"
+      />
+      <TooltipPopover
+          id="tooltip-example-with-icon"
+          UNSAFE_className="is-hidden"
+          enableControlledPlacement
+          placement="right"
+          flipFallbackPlacements="top-start, top-bottom, left"
+          isDismissible
+      >
+          Close me
+      </TooltipPopov>
+  </TooltipWrapper>
+</span>

packages/web/src/scss/components/Tooltip/index.html

@@ -444,6 +444,53 @@ <h2 class="docs-Heading">Dismissible Tooltip via JS API and Floating UI</h2>
 
   </section>
 
+  <section class="docs-Section spirit-feature-tooltip-enable-data-placement">
+
+    <h2 class="docs-Heading">Tooltip on Icon Component</h2>
+
+    <div class="docs-Stack docs-Stack--start">
+
+      <span>
+        Click on the icon on the right to view the tooltip
+        <div class="TooltipWrapper d-inline-block" data-spirit-element="tooltip-wrapper">
+          <svg 
+            width="16" 
+            height="16" 
+            data-spirit-toggle="tooltip"
+            data-spirit-target="#tooltip-example-with-icon">
+            <use xlink:href="/icons/svg/sprite.svg#info"/>
+          </svg>
+          <div
+            id="tooltip-example-with-icon"
+            class="Tooltip Tooltip--dismissible is-hidden"
+            data-spirit-placement="right"
+            data-spirit-flip="true"
+            data-spirit-flip-cross-axis="true"
+            data-spirit-flip-fallback-placements="top-start, bottom-start, left"
+            data-spirit-placement-controlled
+          >
+            Close me
+            <button
+              id="tooltip-example-with-icon-button"
+              type="button"
+              class="Tooltip__close"
+              aria-controls="tooltip-example-with-icon"
+              aria-expanded="true"
+            >
+              <svg width="24" height="24" aria-hidden="true">
+                <use xlink:href="/icons/svg/sprite.svg#close" />
+              </svg>
+              <span class="accessibility-hidden">Close</span>
+            </button>
+            <span class="Tooltip__arrow" data-spirit-element="arrow"></span>
+          </div>
+        </div>
+      </span>
+
+    </div>
+
+  </section>
+
   <section class="docs-Section spirit-feature-tooltip-enable-data-placement">
 
     <script type="module" src="floating-ui-example.mjs"></script>