Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: fix tooltip component positioning and add it to storybook #1031

Merged
merged 2 commits into from
Oct 4, 2023
Merged

fix: fix tooltip component positioning and add it to storybook #1031

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bc4f57f
fix: fix tooltip component positioning and add it to storybook
Traxmaxx Oct 4, 2023
0cdffac
Merge branch 'develop' of github.com:tailwarden/komiser into fix-tooltip
Traxmaxx Oct 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dashboard/components/explorer/DependencyGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {
{data?.nodes?.length} Resources
<div className="relative">
<WarningIcon className="peer" height="16" width="16" />
<Tooltip top="sm" align="right" width="lg">
<Tooltip bottom="xs" align="left" width="lg">
Only AWS resources are currently supported on the explorer.
</Tooltip>
</div>
Expand Down
67 changes: 67 additions & 0 deletions dashboard/components/tooltip/Tooltip.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import type { Meta, StoryObj } from '@storybook/react';
import WarningIcon from '@components/icons/WarningIcon';
import Tooltip from './Tooltip';

// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
const meta: Meta<typeof Tooltip> = {
title: 'Komiser/Tooltip',
component: Tooltip,
parameters: {
docs: {
description: {
component:
// eslint-disable-next-line no-multi-str
'The tooltip component required to be wrapped inside an relative positioned container. There also need to be a trigger element which is required to have `className="peer"`!\
In this example the strigger element is the Info icon.\
The Storybook preview gives you an idea about possible parameters but might not work 100% because you should either define top **or** bottom, **not** both.\
To allow to show all possible options, we define both top, bottom and left, right in this example. Please keep this in mind!'
}
}
},
tags: ['autodocs'],
decorators: [
Story => (
<div className="flex h-96 items-center justify-center">
<div className="relative h-[16px] w-[16px]">
<WarningIcon className="peer" height="16" width="16" />
<Story />
</div>
</div>
)
],
argTypes: {
top: {
control: {
type: 'inline-radio'
}
},
bottom: {
control: {
type: 'inline-radio'
}
},
align: {
control: {
type: 'inline-radio'
}
},
width: {
control: {
type: 'inline-radio'
}
}
}
};

export default meta;
type Story = StoryObj<typeof Tooltip>;

// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
export const TopTiny: Story = {
args: {
top: 'xs',
align: 'left',
width: 'lg',
children: "That's a tooltip"
}
};
20 changes: 15 additions & 5 deletions dashboard/components/tooltip/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import { ReactNode } from 'react';

type TooltipProps = {
children: ReactNode;
top?: 'sm' | 'md' | 'lg';
top?: 'xs' | 'sm' | 'md' | 'lg';
bottom?: 'xs' | 'sm' | 'md' | 'lg';
align?: 'left' | 'center' | 'right';
width?: 'sm' | 'md' | 'lg';
};
Expand All @@ -12,15 +13,24 @@ function Tooltip({
children,
top = 'md',
align = 'left',
width = 'md'
width = 'md',
bottom
}: TooltipProps) {
return (
<div
role="tooltip"
className={classNames(
'absolute left-6 top-24 z-[1000] hidden animate-fade-in-up items-center rounded-lg bg-black-900 px-4 py-2 text-xs font-medium text-black-200 opacity-0 peer-hover:flex',
{ 'top-[3rem]': top === 'sm' },
{ 'left-auto right-0': align === 'right' },
'absolute z-[1000] hidden animate-fade-in-up items-center rounded-lg bg-black-900 px-4 py-2 text-xs font-medium text-black-200 opacity-0 peer-hover:flex',
{ 'top-0': top === 'xs' && !bottom },
{ 'top-[3rem]': top === 'sm' && !bottom },
{ 'top-24': top === 'md' && !bottom },
{ 'top-36': top === 'lg' && !bottom },
{ 'bottom-0': bottom === 'xs' },
{ 'bottom-[3rem]': bottom === 'sm' },
{ 'bottom-24': bottom === 'md' },
{ 'bottom-36': bottom === 'lg' },
{ 'left-6': align === 'left' },
{ 'right-6': align === 'right' },
{ 'w-72': width === 'lg' }
)}
>
Expand Down