feat: adding an experimental tooltip component based on react-aria

jest.config.js

@@ -2,7 +2,8 @@ module.exports = {
     roots: ['<rootDir>/src'],
     transform: {
         '^.+\\.tsx?$': 'ts-jest',
-        '^.+\\.svg$': '<rootDir>/svgTransform.js'
+        '^.+\\.svg$': '<rootDir>/svgTransform.js',
+        '.+\\.(css|styl|less|sass|scss)$': 'jest-css-modules-transform'
     },
     testRegex: '(test|spec)\\.tsx?$',
     moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'svg'],

package.json

@@ -132,6 +132,7 @@
         "husky": "^4.2.3",
         "jest": "^26.6.3",
         "jest-axe": "^3.4.0",
+        "jest-css-modules-transform": "^4.4.2",
         "jest-date-mock": "^1.0.8",
         "jest-styled-components": "^7.0.2",
         "jscodeshift": "^0.15.0",
@@ -166,8 +167,8 @@
         "@types/react-select": "^4.0.18",
         "@types/styled-system": "^5.1.9",
         "date-fns": "^2.11.1",
-        "react-aria": "^3.35.1",
-        "react-aria-components": "^1.4.1",
+        "react-aria": "3.38.1",
+        "react-aria-components": "1.7.1",
         "react-popper": "^2.3.0",
         "react-transition-group": "^4.3.0",
         "styled-system": "^5.1.5",

src/components/experimental/IconButton/IconButton.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react';
 import styled from 'styled-components';
 import { ButtonProps, Button } from 'react-aria-components';
-import { VisuallyHidden } from 'react-aria';
+import { useVisuallyHidden } from 'react-aria';
 import { IconProps } from '../../../icons';
 import { getSemanticValue } from '../../../essentials/experimental';
 import { InlineSpinner } from '../InlineSpinner/InlineSpinner';
@@ -115,6 +115,7 @@ export const IconButton = ({
     ...restProps
 }: IconButtonProps): ReactElement => {
     const Container = variant === 'standard' ? StandardIconContainer : TonalIconContainer;
+    const { visuallyHiddenProps } = useVisuallyHidden();
 
     return (
         <Container
@@ -136,7 +137,7 @@ export const IconButton = ({
                 ) : (
                     <Icon data-testid="iconbutton-icon" />
                 )}
-                <VisuallyHidden>{label}</VisuallyHidden>
+                <div {...visuallyHiddenProps}>{label}</div>
             </>
         </Container>
     );

src/components/experimental/Tooltip/Tooltip.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { Chip } from '../Chip/Chip';
+
+import { Tooltip } from './Tooltip';
+
+describe('Experimental: Tooltip', () => {
+    it('should render the tooltip', () => {
+        const utils = render(
+            // isOpen is provided as true to avoid hovering troubles with userEvent
+            <Tooltip content="I am a tooltip" triggerProps={{ isOpen: true }}>
+                <Chip>Hover me</Chip>
+            </Tooltip>
+        );
+        expect(utils.queryByRole('tooltip')).toBeInTheDocument();
+        expect(utils.queryByText('I am a tooltip')).toBeInTheDocument();
+    });
+});

src/components/experimental/Tooltip/Tooltip.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { OverlayArrow, Tooltip as AriaTooltip, TooltipTrigger, Focusable } from 'react-aria-components';
+
+import type { TooltipProps as AriaTooltipProps, TooltipTriggerComponentProps } from 'react-aria-components';
+
+import './tooltip.css';
+
+interface TooltipProps {
+    children: any;
+    content: string;
+    hideArrow?: boolean;
+    customTrigger?: boolean;
+    tooltipProps?: Omit<AriaTooltipProps, 'children'>;
+    triggerProps?: Omit<TooltipTriggerComponentProps, 'children'>;
+}
+
+const Tooltip = ({
+    children,
+    content,
+    triggerProps,
+    tooltipProps,
+    hideArrow = false,
+    customTrigger = false
+}: TooltipProps) => (
+    <TooltipTrigger {...triggerProps}>
+        {customTrigger ? <Focusable>{children}</Focusable> : children}
+        <AriaTooltip {...tooltipProps}>
+            {!hideArrow && (
+                <OverlayArrow>
+                    <svg width={8} height={8} viewBox="0 0 8 8">
+                        <path d="M0 0 L4 4 L8 0" />
+                    </svg>
+                </OverlayArrow>
+            )}
+            {content}
+        </AriaTooltip>
+    </TooltipTrigger>
+);
+
+export { Tooltip, TooltipProps };

src/components/experimental/Tooltip/docs/Tooltip.stories.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { StoryObj, Meta } from '@storybook/react';
+import { Tooltip } from '../Tooltip';
+import { Chip } from '../../Chip/Chip';
+
+const meta: Meta = {
+    title: 'Experimental/Components/Tooltip',
+    component: Tooltip,
+    decorators: [
+        (Story: React.FC): JSX.Element => (
+            <div style={{ width: '150px' }}>
+                <Story />
+            </div>
+        )
+    ],
+    args: {
+        content: 'I am a tooltip',
+        children: <Chip>Hover me</Chip>
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {};
+
+export const TooltipWithDelay: Story = {
+    args: {
+        triggerProps: {
+            delay: 2000
+        },
+        content: 'I show up after 2 seconds'
+    }
+};
+
+export const TooltipWithCustomTrigger: Story = {
+    args: {
+        customTrigger: true,
+        children: <p>Hover over me, a non focusable element!</p>,
+        content: "I don't need a focusable element"
+    }
+};
+
+export const TooltipWithBottomPlacement: Story = {
+    args: {
+        tooltipProps: {
+            placement: 'bottom'
+        },
+        content: 'I am a bottom tooltip'
+    }
+};
+
+export const TooltipWithoutArrow: Story = {
+    args: {
+        hideArrow: true,
+        content: 'I have no arrow'
+    }
+};
+
+export const TooltipWithOffset: Story = {
+    args: {
+        tooltipProps: {
+            crossOffset: 50
+        },
+        content: 'I have an offset of 50px'
+    }
+};

src/components/experimental/Tooltip/tooltip.css

@@ -0,0 +1,53 @@
+.react-aria-Tooltip {
+    box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
+    border-radius: 4px;
+    background: var(--wave-exp-color-inverse-surface);
+    color: var(--wave-exp-color-inverse-on-surface);
+    forced-color-adjust: none;
+    outline: none;
+    padding: 2px 8px;
+    max-width: 150px;
+    /* fixes FF gap */
+    transform: translate3d(0, 0, 0);
+    transition: transform 200ms, opacity 200ms;
+
+    &[data-entering],
+    &[data-exiting] {
+        transform: var(--origin);
+        opacity: 0;
+    }
+
+    &[data-placement='top'] {
+        margin-bottom: 8px;
+        --origin: translateY(4px);
+    }
+
+    &[data-placement='bottom'] {
+        margin-top: 8px;
+        --origin: translateY(-4px);
+        & .react-aria-OverlayArrow svg {
+            transform: rotate(180deg);
+        }
+    }
+
+    &[data-placement='right'] {
+        margin-left: 8px;
+        --origin: translateX(-4px);
+        & .react-aria-OverlayArrow svg {
+            transform: rotate(90deg);
+        }
+    }
+
+    &[data-placement='left'] {
+        margin-right: 8px;
+        --origin: translateX(4px);
+        & .react-aria-OverlayArrow svg {
+            transform: rotate(-90deg);
+        }
+    }
+
+    & .react-aria-OverlayArrow svg {
+        display: block;
+        fill: var(--wave-exp-color-inverse-surface);
+    }
+}