From 2e304598d10013331c190ce10c5a0d43a30c0c9a Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 7 Jul 2025 13:20:16 +0100 Subject: [PATCH] Improve report Signed-off-by: Charles de Dreuille --- .changeset/tired-nails-fry.md | 5 +++ packages/canon/report.api.md | 43 ++++++++----------- .../canon/src/components/Tooltip/Tooltip.tsx | 1 + 3 files changed, 23 insertions(+), 26 deletions(-) create mode 100644 .changeset/tired-nails-fry.md 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;