Add docs for Tooltip

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

canon-docs/src/content/components/tooltip.mdx

@@ -0,0 +1,42 @@
+import { PropsTable } from '@/components/PropsTable';
+import { TooltipSnippet } from '@/snippets/stories-snippets';
+import { Snippet } from '@/components/Snippet';
+import { CodeBlock } from '@/components/CodeBlock';
+import {
+  tooltipDefaultSnippet,
+  tooltipUsageSnippet,
+  tooltipTriggerPropDefs,
+  tooltipPropDefs,
+} from './tooltip.props';
+import { ComponentInfos } from '@/components/ComponentInfos';
+
+# Tooltip
+
+A tooltip displays a description of an element on hover or focus.
+
+<Snippet
+  py={4}
+  preview={<TooltipSnippet story="Default" />}
+  code={tooltipDefaultSnippet}
+  align="center"
+/>
+
+<ComponentInfos
+  component="tooltip"
+  classNames={['canon-Tooltip', 'canon-ToltipArrow']}
+  usageCode={tooltipUsageSnippet}
+/>
+
+## API reference
+
+### TooltipTrigger
+
+The trigger will wrap both the trigger and the tooltip.
+
+<PropsTable data={tooltipTriggerPropDefs} />
+
+### Tooltip
+
+The tooltip will wrap the content of the tooltip.
+
+<PropsTable data={tooltipPropDefs} />

canon-docs/src/content/components/tooltip.props.ts

@@ -0,0 +1,67 @@
+import {
+  childrenPropDefs,
+  classNamePropDefs,
+  stylePropDefs,
+} from '@/utils/propDefs';
+import type { PropDef } from '@/utils/propDefs';
+
+export const tooltipTriggerPropDefs: Record<string, PropDef> = {
+  isDisabled: {
+    type: 'boolean',
+  },
+  delay: {
+    type: 'number',
+    default: '600',
+  },
+  closeDelay: {
+    type: 'number',
+    default: '500',
+  },
+  isOpen: {
+    type: 'boolean',
+  },
+  defaultOpen: {
+    type: 'boolean',
+  },
+  ...childrenPropDefs,
+};
+
+export const tooltipPropDefs: Record<string, PropDef> = {
+  triggerRef: {
+    type: 'enum',
+    values: ['RefObject<Element | null>'],
+  },
+  isEntering: {
+    type: 'boolean',
+  },
+  isExiting: {
+    type: 'boolean',
+  },
+  placement: {
+    type: 'enum',
+    values: ['top', 'right', 'bottom', 'left'],
+  },
+  containerPadding: {
+    type: 'number',
+    default: '12',
+  },
+  offset: {
+    type: 'number',
+    default: '0',
+  },
+  ...childrenPropDefs,
+  ...classNamePropDefs,
+  ...stylePropDefs,
+};
+
+export const tooltipUsageSnippet = `import { TooltipTrigger, Tooltip, Button } from '@backstage/canon';
+
+<TooltipTrigger>
+  <Button>Button</Button>
+  <Tooltip>I am a tooltip</Tooltip>
+</TooltipTrigger>`;
+
+export const tooltipDefaultSnippet = `<TooltipTrigger>
+  <Button>Button</Button>
+  <Tooltip>I am a tooltip</Tooltip>
+</TooltipTrigger>`;

canon-docs/src/snippets/stories-snippets.tsx

@@ -22,6 +22,7 @@ import * as RadioGroupStories from '../../../packages/canon/src/components/Radio
 import * as TabsStories from '../../../packages/canon/src/components/Tabs/Tabs.stories';
 import * as SwitchStories from '../../../packages/canon/src/components/Switch/Switch.stories';
 import * as SearchFieldStories from '../../../packages/canon/src/components/SearchField/SearchField.stories';
+import * as TooltipStories from '../../../packages/canon/src/components/Tooltip/Tooltip.stories';
 
 export const BoxSnippet = ({ story }: { story: keyof typeof BoxStories }) => {
   const stories = composeStories(BoxStories);
@@ -221,3 +222,14 @@ export const SearchFieldSnippet = ({
 
   return StoryComponent ? <StoryComponent /> : null;
 };
+
+export const TooltipSnippet = ({
+  story,
+}: {
+  story: keyof typeof TooltipStories;
+}) => {
+  const stories = composeStories(TooltipStories);
+  const StoryComponent = stories[story as keyof typeof stories];
+
+  return StoryComponent ? <StoryComponent /> : null;
+};

canon-docs/src/utils/data.ts

@@ -156,6 +156,11 @@ export const components: Page[] = [
     slug: 'text-field',
     status: 'alpha',
   },
+  {
+    title: 'Tooltip',
+    slug: 'tooltip',
+    status: 'alpha',
+  },
 ];
 
 export type ScreenSize = {

packages/canon/src/components/Tooltip/Tooltip.stories.tsx

@@ -27,62 +27,83 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  args: {
-    children: (
-      <>
-        <Button>Button</Button>
-        <Tooltip>I am a tooltip</Tooltip>
-      </>
-    ),
-  },
+  args: { children: '' },
+  render: () => (
+    <TooltipTrigger>
+      <Button>Button</Button>
+      <Tooltip>I am a tooltip</Tooltip>
+    </TooltipTrigger>
+  ),
 };
 
 export const IsOpen: Story = {
   args: {
     ...Default.args,
-    isOpen: true,
   },
+  render: () => (
+    <TooltipTrigger isOpen>
+      <Button>Button</Button>
+      <Tooltip>I am a tooltip</Tooltip>
+    </TooltipTrigger>
+  ),
 };
 
 export const IsDisabled: Story = {
   args: {
     ...Default.args,
-    isDisabled: true,
   },
+  render: () => (
+    <TooltipTrigger isDisabled>
+      <Button>Button</Button>
+      <Tooltip>I am a tooltip</Tooltip>
+    </TooltipTrigger>
+  ),
 };
 
 export const PlacementTop: Story = {
   args: {
     ...Default.args,
-    children: (
-      <>
-        <Button>Tooltip on top</Button>
-        <Tooltip placement="top">I'm a tooltip</Tooltip>
-      </>
-    ),
   },
+  render: () => (
+    <TooltipTrigger>
+      <Button>Button</Button>
+      <Tooltip placement="top">I am a tooltip</Tooltip>
+    </TooltipTrigger>
+  ),
 };
 
 export const PlacementRight: Story = {
   args: {
     ...Default.args,
-    children: (
-      <>
-        <Button>Tooltip on top</Button>
-        <Tooltip placement="right">I'm a tooltip</Tooltip>
-      </>
-    ),
   },
+  render: () => (
+    <TooltipTrigger>
+      <Button>Button</Button>
+      <Tooltip placement="right">I am a tooltip</Tooltip>
+    </TooltipTrigger>
+  ),
 };
 
 export const PlacementLeft: Story = {
   args: {
     ...Default.args,
-    children: (
-      <>
-        <Button>Tooltip on top</Button>
-        <Tooltip placement="left">I'm a tooltip</Tooltip>
-      </>
-    ),
   },
+  render: () => (
+    <TooltipTrigger>
+      <Button>Button</Button>
+      <Tooltip placement="left">I am a tooltip</Tooltip>
+    </TooltipTrigger>
+  ),
+};
+
+export const PlacementBottom: Story = {
+  args: {
+    ...Default.args,
+  },
+  render: () => (
+    <TooltipTrigger>
+      <Button>Button</Button>
+      <Tooltip placement="bottom">I am a tooltip</Tooltip>
+    </TooltipTrigger>
+  ),
 };