Add Tooltip component (#2393)

.changeset/beige-bottles-act.md

@@ -0,0 +1,5 @@
+---
+"@sumup/circuit-ui": minor
+---
+
+Added an experimental Tooltip component.

.storybook/components/Icons.tsx

@@ -18,6 +18,7 @@ import {
   type SetStateAction,
   useState,
   ChangeEvent,
+  forwardRef,
 } from 'react';
 import { Unstyled } from '@storybook/addon-docs';
 import * as iconComponents from '@sumup/icons';
@@ -33,17 +34,21 @@ import {
   clsx,
   utilClasses,
 } from '../../packages/circuit-ui/index.js';
+import { Tooltip } from '../../packages/circuit-ui/experimental.js';
 import { slugify } from '../slugify.js';
 import classes from './Icons.module.css';
 
 function groupBy(
   icons: IconsManifest['icons'],
   key: 'name' | 'category' | 'size',
 ) {
-  return icons.reduce((groups, icon) => {
-    (groups[icon[key]] = groups[icon[key]] || []).push(icon);
-    return groups;
-  }, {});
+  return icons.reduce(
+    (groups, icon) => {
+      (groups[icon[key]] = groups[icon[key]] || []).push(icon);
+      return groups;
+    },
+    {} as Record<string, IconsManifest['icons']>,
+  );
 }
 
 function sortBy(
@@ -172,20 +177,28 @@ const Icons = () => {
                         }}
                       />
                     </div>
-                    <span id={id} className={classes.label} title={icon.name}>
-                      {icon.name}
+                    <span id={id} className={classes.label}>
+                      {componentName}
                       {size === 'all' && (
                         <span className={classes.size}>{icon.size}</span>
                       )}
                     </span>
                     {icon.deprecation && (
-                      <Badge
-                        title={icon.deprecation}
-                        variant="warning"
-                        className={classes.badge}
-                      >
-                        Deprecated
-                      </Badge>
+                      <Tooltip
+                        type="description"
+                        label={icon.deprecation}
+                        component={forwardRef((props, ref) => (
+                          <Badge
+                            {...props}
+                            ref={ref}
+                            tabIndex={0}
+                            variant="danger"
+                            className={classes.badge}
+                          >
+                            Deprecated
+                          </Badge>
+                        ))}
+                      />
                     )}
                   </div>
                 );

.storybook/components/Stack.module.css

@@ -1,4 +1,5 @@
 .base {
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 2rem;

packages/circuit-ui/components/Button/IconButton.module.css

@@ -1,17 +1,3 @@
-/* Visually hide the label */
-.base > span:last-child > span:last-child {
-  /* .hide-visually */
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 /* Sizes */
 .s {
   padding: calc(var(--cui-spacings-bit) - var(--cui-border-width-kilo));

packages/circuit-ui/components/Button/IconButton.tsx

@@ -13,9 +13,12 @@
  * limitations under the License.
  */
 
+'use client';
+
 import {
   Children,
   cloneElement,
+  forwardRef,
   type ForwardRefExoticComponent,
   type PropsWithoutRef,
   type ReactElement,
@@ -27,9 +30,12 @@ import { clsx } from '../../styles/clsx.js';
 import { CircuitError } from '../../util/errors.js';
 import { deprecate } from '../../util/logger.js';
 import { isString } from '../../util/type-check.js';
+import Tooltip from '../Tooltip/index.js';
+import { applyMultipleRefs } from '../../util/refs.js';
 
 import {
   createButtonComponent,
+  CreateButtonComponentProps,
   legacyButtonSizeMap,
   type SharedButtonProps,
 } from './base.js';
@@ -56,22 +62,30 @@ export type IconButtonProps = SharedButtonProps & {
   icon?: IconComponentType;
 };
 
+// TODO: This factory function doesn't make much sense for the IconButton anymore. Refactor?
+const InnerIconButton = createButtonComponent<CreateButtonComponentProps>(
+  'IconButton',
+  (props) => props,
+);
+
 /**
  * The IconButton component enables the user to perform an action or navigate
  * to a different screen.
  */
 export const IconButton: ForwardRefExoticComponent<
   PropsWithoutRef<IconButtonProps> & RefAttributes<any>
-> = createButtonComponent<IconButtonProps>(
-  'IconButton',
-  ({
-    className,
-    icon: Icon,
-    label,
-    children,
-    size: legacySize = 'm',
-    ...props
-  }) => {
+> = forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      className,
+      icon: Icon,
+      size: legacySize = 'm',
+      label,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
     const size = legacyButtonSizeMap[legacySize] || legacySize;
 
     if (
@@ -96,33 +110,36 @@ export const IconButton: ForwardRefExoticComponent<
       );
     }
 
-    if (
-      process.env.NODE_ENV !== 'production' &&
-      legacyButtonSizeMap[legacySize]
-    ) {
-      deprecate(
-        'IconButton',
-        `The \`${legacySize}\` size has been deprecated. Use the \`${legacyButtonSizeMap[legacySize]}\` size instead.`,
-      );
-    }
-
-    return {
-      className: clsx(classes.base, classes[size], className),
-      icon: (iconProps) => {
-        if (Icon) {
-          return <Icon {...iconProps} />;
-        }
-        const child = Children.only(children)!;
-        // TODO: Remove with the next major
-        if (isString(child)) {
-          return null;
-        }
-        return cloneElement(child, iconProps);
-      },
-      size,
-      children: isString(children) ? children : label,
-      title: isString(children) ? children : label,
-      ...props,
-    };
+    return (
+      <Tooltip
+        type="label"
+        label={isString(children) ? children : (label as string)}
+        component={forwardRef((tooltipProps, tooltipRef) => (
+          <InnerIconButton
+            {...props}
+            {...tooltipProps}
+            size={size}
+            className={clsx(
+              classes.base,
+              classes[size],
+              tooltipProps.className,
+              className,
+            )}
+            icon={(iconProps) => {
+              if (Icon) {
+                return <Icon {...iconProps} />;
+              }
+              const child = Children.only(children)!;
+              // TODO: Remove with the next major
+              if (isString(child)) {
+                return null;
+              }
+              return cloneElement(child, iconProps);
+            }}
+            ref={applyMultipleRefs(ref, tooltipRef)}
+          />
+        ))}
+      />
+    );
   },
 );

packages/circuit-ui/components/Button/base.tsx

@@ -97,7 +97,7 @@ export type CreateButtonComponentProps = SharedButtonProps & {
    * with the button. Use one strong, clear imperative verb and follow with a
    * one-word object if needed to clarify.
    */
-  children: ReactNode;
+  children?: ReactNode;
   /**
    * Choose from 2 sizes. Default: 'm'.
    */
@@ -124,7 +124,7 @@ export const legacyButtonSizeMap: Record<string, 's' | 'm'> = {
 
 export function createButtonComponent<Props>(
   componentName: string,
-  // TODO: Refactor to `mapClassName` once the deprecations have been removed.
+  // TODO: Refactor to `mapClassName` once the deprecations have been removed?
   mapProps: (props: Props) => CreateButtonComponentProps,
 ) {
   const Button = forwardRef<any, Props>((props, ref) => {
@@ -222,7 +222,7 @@ export function createButtonComponent<Props>(
               height={leadingIconSize}
             />
           )}
-          <span className={classes.label}>{children}</span>
+          {children && <span className={classes.label}>{children}</span>}
           {TrailingIcon && (
             <TrailingIcon
               aria-hidden="true"

packages/circuit-ui/components/ImageInput/ImageInput.tsx

@@ -283,7 +283,9 @@ export const ImageInput = ({
             disabled={isLoading || disabled}
             className={clsx(classes.button, classes.add)}
             icon={Plus}
-          />
+          >
+            +
+          </IconButton>
         )}
         <Spinner
           className={clsx(classes.spinner, isLoading && classes.loading)}

packages/circuit-ui/components/NotificationToast/NotificationToast.spec.tsx

@@ -93,7 +93,7 @@ describe('NotificationToast', () => {
       expect(screen.getByText('This is a toast message')).toBeVisible();
     });
 
-    const closeButton = screen.getByText('Close');
+    const closeButton = screen.getByLabelText('Close');
 
     await userEvent.click(closeButton);