mirror of
https://github.com/hanzoai/o11y-components.git
synced 2026-10-30 14:54:15 +00:00
zeekay
464e1eece0
A version written into a manifest is written into every manifest that wants it, which is how eslint came to exist in a hundred and four forms across this estate and how a package came to resolve twice at run time. The catalog moves the number out of the manifest: a manifest names the package, the workspace names the version. Four are held below their latest because the newer release cannot be used, and the reason is recorded rather than the version alone: @noble/hashes 2 renamed every subpath the web3 stack imports, @splinetool/runtime 2 depends on a package that was never published, @dynamic-labs 5.4.1 the same, and react-resizable-panels 3 points its types condition at the bundle.
126 lines
3.8 KiB
TypeScript
126 lines
3.8 KiB
TypeScript
import type { TooltipContentProps } from '@signozhq/ui';
|
|
import {
|
|
Button,
|
|
ButtonColor,
|
|
ButtonVariant,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipRoot,
|
|
TooltipTrigger,
|
|
} from '@signozhq/ui';
|
|
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
|
|
const meta: Meta<typeof TooltipContent> = {
|
|
title: 'Primitive Components/Tooltip/TooltipContent',
|
|
component: TooltipContent,
|
|
argTypes: {
|
|
side: {
|
|
control: 'select',
|
|
options: ['top', 'right', 'bottom', 'left'],
|
|
description:
|
|
'The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.',
|
|
table: { category: 'Position', type: { summary: "'top' | 'right' | 'bottom' | 'left'" } },
|
|
},
|
|
sideOffset: {
|
|
control: 'number',
|
|
description: 'The distance in pixels from the trigger.',
|
|
table: { category: 'Position', type: { summary: 'number' }, defaultValue: { summary: '4' } },
|
|
},
|
|
align: {
|
|
control: 'select',
|
|
options: ['start', 'center', 'end'],
|
|
description: 'The preferred alignment against the trigger. May change when collisions occur.',
|
|
table: { category: 'Position', type: { summary: "'start' | 'center' | 'end'" } },
|
|
},
|
|
alignOffset: {
|
|
control: 'number',
|
|
description: 'An offset in pixels from the "start" or "end" alignment options.',
|
|
table: { category: 'Position', type: { summary: 'number' } },
|
|
},
|
|
arrowPadding: {
|
|
control: 'number',
|
|
description:
|
|
'The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners.',
|
|
table: { category: 'Position', type: { summary: 'number' } },
|
|
},
|
|
avoidCollisions: {
|
|
control: 'boolean',
|
|
description:
|
|
'When true, overrides the side and align preferences to prevent collisions with boundary edges.',
|
|
table: { category: 'Position', type: { summary: 'boolean' } },
|
|
},
|
|
arrow: {
|
|
control: 'boolean',
|
|
description: 'Whether to show the arrow.',
|
|
table: {
|
|
category: 'Appearance',
|
|
type: { summary: 'boolean' },
|
|
defaultValue: { summary: 'false' },
|
|
},
|
|
},
|
|
forceMount: {
|
|
control: 'boolean',
|
|
description:
|
|
'Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.',
|
|
table: { category: 'Behavior', type: { summary: 'true' } },
|
|
},
|
|
withPortal: {
|
|
control: 'boolean',
|
|
description: 'Whether to render in a portal. Set to false when inside modals/dialogs.',
|
|
table: {
|
|
category: 'Behavior',
|
|
type: { summary: 'boolean' },
|
|
defaultValue: { summary: 'true' },
|
|
},
|
|
},
|
|
testId: {
|
|
control: 'text',
|
|
description: 'The test id of the tooltip content.',
|
|
table: { category: 'Testing', type: { summary: 'string' } },
|
|
},
|
|
onEscapeKeyDown: {
|
|
control: false,
|
|
description: 'Event handler called when the escape key is down. Can be prevented.',
|
|
table: { category: 'Events' },
|
|
},
|
|
onPointerDownOutside: {
|
|
control: false,
|
|
description:
|
|
'Event handler called when a pointerdown event happens outside of the Tooltip. Can be prevented.',
|
|
table: { category: 'Events' },
|
|
},
|
|
},
|
|
parameters: {
|
|
layout: 'fullscreen',
|
|
},
|
|
tags: ['autodocs'],
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof TooltipContent>;
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
side: 'bottom',
|
|
sideOffset: 4,
|
|
align: 'center',
|
|
arrow: true,
|
|
},
|
|
render: (args: Partial<TooltipContentProps>) => (
|
|
<TooltipProvider delayDuration={0}>
|
|
<div style={{ padding: 80, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
<TooltipRoot>
|
|
<TooltipTrigger asChild>
|
|
<Button variant={ButtonVariant.Solid} color={ButtonColor.Secondary}>
|
|
Custom content
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent {...args}>
|
|
<span>Rich tooltip content with positioning controls</span>
|
|
</TooltipContent>
|
|
</TooltipRoot>
|
|
</div>
|
|
</TooltipProvider>
|
|
),
|
|
};
|