Migrate Tooltip component from useStyles to useDefinition

Signed-off-by: Johan Persson <johanopersson@gmail.com>

packages/ui/report.api.md

@@ -56,7 +56,7 @@ import type { TagProps as TagProps_2 } from 'react-aria-components';
 import type { TextFieldProps as TextFieldProps_2 } from 'react-aria-components';
 import type { ToggleButtonGroupProps as ToggleButtonGroupProps_2 } from 'react-aria-components';
 import type { ToggleButtonProps as ToggleButtonProps_2 } from 'react-aria-components';
-import { TooltipProps as TooltipProps_2 } from 'react-aria-components';
+import type { TooltipProps as TooltipProps_2 } from 'react-aria-components';
 import { TooltipTriggerComponentProps } from 'react-aria-components';
 
 // @public (undocumented)
@@ -2311,18 +2311,30 @@ export const Tooltip: ForwardRefExoticComponent<
 
 // @public
 export const TooltipDefinition: {
+  readonly styles: {
+    readonly [key: string]: string;
+  };
   readonly classNames: {
     readonly tooltip: 'bui-Tooltip';
     readonly content: 'bui-TooltipContent';
     readonly arrow: 'bui-TooltipArrow';
   };
+  readonly propDefs: {
+    readonly children: {};
+    readonly className: {};
+  };
 };
 
 // @public (undocumented)
-export interface TooltipProps extends Omit<TooltipProps_2, 'children'> {
-  // (undocumented)
+export type TooltipOwnProps = {
   children: React.ReactNode;
-}
+  className?: string;
+};
+
+// @public (undocumented)
+export interface TooltipProps
+  extends Omit<TooltipProps_2, 'children' | 'className'>,
+    TooltipOwnProps {}
 
 // @public (undocumented)
 export const TooltipTrigger: (

packages/ui/src/components/Tooltip/Tooltip.tsx

@@ -22,11 +22,9 @@ import {
   TooltipTrigger as AriaTooltipTrigger,
   TooltipTriggerComponentProps,
 } from 'react-aria-components';
-import clsx from 'clsx';
-import { TooltipProps } from './types';
-import { useStyles } from '../../hooks/useStyles';
+import type { TooltipProps } from './types';
+import { useDefinition } from '../../hooks/useDefinition';
 import { TooltipDefinition } from './definition';
-import styles from './Tooltip.module.css';
 import { Box } from '../Box';
 import { BgReset } from '../../hooks/useBg';
 
@@ -40,23 +38,13 @@ export const TooltipTrigger = (props: TooltipTriggerComponentProps) => {
 /** @public */
 export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
   (props, ref) => {
-    const { classNames, cleanedProps } = useStyles(TooltipDefinition, props);
-    const { className, children, ...rest } = cleanedProps;
+    const { ownProps, restProps } = useDefinition(TooltipDefinition, props);
+    const { classes, children } = ownProps;
     const svgPathId = useId();
 
     return (
-      <AriaTooltip
-        className={clsx(
-          classNames.tooltip,
-          styles[classNames.tooltip],
-          className,
-        )}
-        {...rest}
-        ref={ref}
-      >
-        <OverlayArrow
-          className={clsx(classNames.arrow, styles[classNames.arrow])}
-        >
+      <AriaTooltip className={classes.tooltip} {...restProps} ref={ref}>
+        <OverlayArrow className={classes.arrow}>
           <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
             <defs>
               <path
@@ -73,10 +61,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
           </svg>
         </OverlayArrow>
         <BgReset>
-          <Box
-            bg="neutral"
-            className={clsx(classNames.content, styles[classNames.content])}
-          >
+          <Box bg="neutral-1" className={classes.content}>
             {children}
           </Box>
         </BgReset>

packages/ui/src/components/Tooltip/definition.ts

@@ -14,16 +14,23 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import type { TooltipOwnProps } from './types';
+import styles from './Tooltip.module.css';
 
 /**
  * Component definition for Tooltip
  * @public
  */
-export const TooltipDefinition = {
+export const TooltipDefinition = defineComponent<TooltipOwnProps>()({
+  styles,
   classNames: {
     tooltip: 'bui-Tooltip',
     content: 'bui-TooltipContent',
     arrow: 'bui-TooltipArrow',
   },
-} as const satisfies ComponentDefinition;
+  propDefs: {
+    children: {},
+    className: {},
+  },
+});

packages/ui/src/components/Tooltip/index.ts

@@ -15,5 +15,5 @@
  */
 
 export { TooltipTrigger, Tooltip } from './Tooltip';
-export type { TooltipProps } from './types';
+export type { TooltipOwnProps, TooltipProps } from './types';
 export { TooltipDefinition } from './definition';

packages/ui/src/components/Tooltip/types.ts

@@ -14,9 +14,15 @@
  * limitations under the License.
  */
 
-import { TooltipProps as AriaTooltipProps } from 'react-aria-components';
+import type { TooltipProps as AriaTooltipProps } from 'react-aria-components';
 
 /** @public */
-export interface TooltipProps extends Omit<AriaTooltipProps, 'children'> {
+export type TooltipOwnProps = {
   children: React.ReactNode;
-}
+  className?: string;
+};
+
+/** @public */
+export interface TooltipProps
+  extends Omit<AriaTooltipProps, 'children' | 'className'>,
+    TooltipOwnProps {}