diff --git a/.changeset/tired-nails-fry.md b/.changeset/tired-nails-fry.md new file mode 100644 index 0000000000..4cb03a7c38 --- /dev/null +++ b/.changeset/tired-nails-fry.md @@ -0,0 +1,5 @@ +--- +'@backstage/canon': minor +--- + +We are moving our Tooltip component to use React Aria under the hood. In doing so, the structure of the component and its prop are changing to follow the new underlining structure. diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index cff0547d08..be8c1f57e7 100644 --- a/packages/canon/report.api.md +++ b/packages/canon/report.api.md @@ -13,7 +13,6 @@ import type { ComponentPropsWithRef } from 'react'; import { Context } from 'react'; import type { CSSProperties } from 'react'; import type { ElementType } from 'react'; -import { FC } from 'react'; import { FocusEvent as FocusEvent_2 } from 'react'; import { ForwardRefExoticComponent } from 'react'; import { HTMLAttributes } from 'react'; @@ -34,7 +33,8 @@ import { Tabs as Tabs_2 } from '@base-ui-components/react/tabs'; import { TdHTMLAttributes } from 'react'; import type { TextFieldProps as TextFieldProps_2 } from 'react-aria-components'; import { ThHTMLAttributes } from 'react'; -import { Tooltip as Tooltip_2 } from '@base-ui-components/react/tooltip'; +import { TooltipProps as TooltipProps_2 } from 'react-aria-components'; +import { TooltipTriggerComponentProps } from 'react-aria-components'; import type { useRender } from '@base-ui-components/react/use-render'; // @public (undocumented) @@ -533,9 +533,7 @@ export const componentDefinitions: { }; readonly Tooltip: { readonly classNames: { - readonly trigger: 'canon-TooltipTrigger'; - readonly positioner: 'canon-TooltipPositioner'; - readonly popup: 'canon-TooltipPopup'; + readonly tooltip: 'canon-Tooltip'; readonly arrow: 'canon-TooltipArrow'; }; }; @@ -1736,27 +1734,20 @@ export type TextProps = TextOwnProps & Omit, keyof TextOwnProps>; // @public (undocumented) -export const Tooltip: { - Provider: FC; - Root: FC; - Trigger: ForwardRefExoticComponent< - Omit, 'ref'> & - RefAttributes - >; - Portal: typeof Tooltip_2.Portal; - Positioner: ForwardRefExoticComponent< - Omit, 'ref'> & - RefAttributes - >; - Popup: ForwardRefExoticComponent< - Omit, 'ref'> & - RefAttributes - >; - Arrow: ForwardRefExoticComponent< - Omit, 'ref'> & - RefAttributes - >; -}; +export const Tooltip: ForwardRefExoticComponent< + TooltipProps & RefAttributes +>; + +// @public (undocumented) +export interface TooltipProps extends Omit { + // (undocumented) + children: React.ReactNode; +} + +// @public (undocumented) +export const TooltipTrigger: ( + props: TooltipTriggerComponentProps, +) => JSX_2.Element; // @public (undocumented) export const useBreakpoint: () => { diff --git a/packages/canon/src/components/Tooltip/Tooltip.tsx b/packages/canon/src/components/Tooltip/Tooltip.tsx index 47a18fd6e4..f22e068cab 100644 --- a/packages/canon/src/components/Tooltip/Tooltip.tsx +++ b/packages/canon/src/components/Tooltip/Tooltip.tsx @@ -25,6 +25,7 @@ import clsx from 'clsx'; import { TooltipProps } from './types'; import { useStyles } from '../../hooks/useStyles'; +/** @public */ export const TooltipTrigger = (props: TooltipTriggerComponentProps) => { const { delay = 600 } = props;