Skip to content

Commit 40bdf2c

Browse files
greatertomigreatertomi
authored
refactor(ui): improve tooltip component (#672)
* refactor(ui): improve tooltip component * fix: pie chart tooltip error
1 parent 8540255 commit 40bdf2c

18 files changed

+162
-151
lines changed

‎packages/staking/src/features/delegation-card/DelegationTooltip.css.ts

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎packages/staking/src/features/delegation-card/DelegationTooltip.tsx

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import { Box, Flex, RichContentInner, TooltipContentRendererProps } from '@lace/ui';
1+
import { Box, Flex, RichTooltipContent, TooltipContentRendererProps } from '@lace/ui';
22
import { ReactElement } from 'react';
33
import { useTranslation } from 'react-i18next';
4-
import * as styles from './DelegationTooltip.css';
54
import { DistributionItem } from './types';
65

76
export const DelegationTooltip = ({
@@ -14,24 +13,22 @@ export const DelegationTooltip = ({
1413
const { apy, saturation, fill } = payload;
1514

1615
return (
17-
<Box className={styles.tooltip}>
18-
<RichContentInner
19-
title={name || ''}
20-
dotColor={fill}
21-
description={
22-
<Box w="$148">
23-
<Flex justifyContent="space-between">
24-
<Box>{t('browsePools.stakePoolTableBrowser.tableHeader.ros.title')}</Box>
25-
<Box>{apy ? `${apy}%` : '-'}</Box>
26-
</Flex>
27-
<Flex justifyContent="space-between">
28-
<Box>{t('browsePools.stakePoolTableBrowser.tableHeader.saturation.title')}</Box>
29-
<Box>{saturation ? `${saturation}%` : '-'}</Box>
30-
</Flex>
31-
</Box>
32-
}
33-
/>
34-
</Box>
16+
<RichTooltipContent
17+
title={name || ''}
18+
dotColor={fill}
19+
description={
20+
<Box w="$148">
21+
<Flex justifyContent="space-between">
22+
<Box>{t('browsePools.stakePoolTableBrowser.tableHeader.ros.title')}</Box>
23+
<Box>{apy ? `${apy}%` : '-'}</Box>
24+
</Flex>
25+
<Flex justifyContent="space-between">
26+
<Box>{t('browsePools.stakePoolTableBrowser.tableHeader.saturation.title')}</Box>
27+
<Box>{saturation ? `${saturation}%` : '-'}</Box>
28+
</Flex>
29+
</Box>
30+
}
31+
/>
3532
);
3633
}
3734

‎packages/ui/src/design-system/pie-chart/pie-chart.stories.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { ThemeColorScheme, LocalThemeProvider } from '../../design-tokens';
88
import { page, Section, Variants } from '../decorators';
99
import { Divider } from '../divider';
1010
import { Cell, Grid } from '../grid';
11-
import { Content, ContentInner } from '../tooltip';
11+
import { TooltipContent } from '../tooltip';
1212

1313
import { PieChart } from './pie-chart.component';
1414
import {
@@ -47,9 +47,7 @@ const meta: Meta<typeof PieChart> = {
4747
export default meta;
4848

4949
const CustomTooltip = (): ReactElement => (
50-
<Content>
51-
<ContentInner label="This is an example tooltip" />
52-
</Content>
50+
<TooltipContent label="This is an example tooltip" />
5351
);
5452

5553
export const Overview = (): JSX.Element => (

‎packages/ui/src/design-system/tooltip/index.ts

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
export { Tooltip } from './tooltip.component';
22
export { RichTooltip } from './rich-tooltip.component';
3-
export { Content } from './tooltip-content.component';
4-
export { ContentInner } from './tooltip-content-inner.component';
5-
export { RichContentInner } from './rich-tooltip-content-inner.component';
6-
export type { ContentInnerProps } from './tooltip-content-inner.component';
7-
export type { RichContentInnerProps } from './rich-tooltip-content-inner.component';
3+
export { TooltipContent } from './tooltip-content.component';
4+
export { RichTooltipContent } from './rich-tooltip-content.component';
5+
export type { TooltipContentProps } from './tooltip-content.component';
6+
export type { RichTooltipContentProps } from './rich-tooltip-content.component';

‎packages/ui/src/design-system/tooltip/rich-tooltip-content-inner.component.tsx renamed to ‎packages/ui/src/design-system/tooltip/rich-tooltip-content.component.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,25 @@ import { Box } from '../box';
55
import { Flex } from '../flex';
66
import * as Typography from '../typography';
77

8-
import * as cx from './rich-tooltip-content-inner.css';
8+
import * as cx from './rich-tooltip-content.css';
9+
import * as cx2 from './tooltip-content.css';
910

10-
export interface RichContentInnerProps {
11+
export interface RichTooltipContentProps {
1112
title: string;
1213
description: ReactNode;
1314
dotColor?: string;
1415
}
1516

16-
export const RichContentInner = ({
17+
export const RichTooltipContent = ({
1718
title,
1819
description,
1920
dotColor,
20-
}: Readonly<RichContentInnerProps>): JSX.Element => {
21+
}: Readonly<RichTooltipContentProps>): JSX.Element => {
2122
const customDotStyle =
2223
dotColor == undefined ? {} : { backgroundColor: dotColor };
2324

2425
return (
25-
<Flex gap="$8">
26+
<Flex gap="$8" className={cx2.tooltipContent}>
2627
<Flex mt="$8">
2728
<Box className={cx.dot} style={customDotStyle} />
2829
</Flex>

‎packages/ui/src/design-system/tooltip/rich-tooltip-content-inner.css.ts renamed to ‎packages/ui/src/design-system/tooltip/rich-tooltip-content.css.ts

File renamed without changes.

‎packages/ui/src/design-system/tooltip/rich-tooltip-root.component.tsx

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import React from 'react';
21
import type { PropsWithChildren, ReactNode } from 'react';
2+
import React from 'react';
33

44
import * as Tooltip from '@radix-ui/react-tooltip';
55

6-
import { RichContentInner } from './rich-tooltip-content-inner.component';
7-
import { Content } from './tooltip-content.component';
6+
import { RichTooltipContent } from './rich-tooltip-content.component';
87

98
export type Props = PropsWithChildren<
109
typeof Tooltip.Root & {
@@ -13,7 +12,7 @@ export type Props = PropsWithChildren<
1312
}
1413
>;
1514

16-
export const Root = ({
15+
export const RichTooltipRoot = ({
1716
title,
1817
description,
1918
children,
@@ -22,9 +21,9 @@ export const Root = ({
2221
<Tooltip.Root>
2322
{children}
2423
<Tooltip.Portal>
25-
<Content>
26-
<RichContentInner title={title} description={description} />
27-
</Content>
24+
<Tooltip.Content>
25+
<RichTooltipContent title={title} description={description} />
26+
</Tooltip.Content>
2827
</Tooltip.Portal>
2928
</Tooltip.Root>
3029
);

‎packages/ui/src/design-system/tooltip/rich-tooltip.component.tsx

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
1+
import type { PropsWithChildren, ReactNode } from 'react';
12
import React from 'react';
2-
import type { ReactNode } from 'react';
33

4-
import { Root } from './rich-tooltip-root.component';
4+
import { Trigger } from '@radix-ui/react-tooltip';
5+
6+
import { RichTooltipRoot } from './rich-tooltip-root.component';
57
import { Provider } from './tooltip-provider.component';
6-
import { Trigger } from './tooltip-trigger.component';
78

8-
import type { Props as TooltipProps } from './tooltip.component';
9+
import type { Props as RootProps } from './rich-tooltip-root.component';
910

10-
type Props = Omit<TooltipProps, 'label'> & {
11-
title: string;
12-
description: ReactNode;
13-
};
11+
export type Props = PropsWithChildren<
12+
RootProps & {
13+
delayDuration?: number;
14+
skipDelayDuration?: number;
15+
children: ReactNode;
16+
}
17+
>;
1418

1519
export const RichTooltip = ({
1620
delayDuration = 0,
@@ -19,10 +23,15 @@ export const RichTooltip = ({
1923
description,
2024
children,
2125
...props
22-
}: Readonly<Props>): JSX.Element => (
23-
<Provider skipDelayDuration={skipDelayDuration} delayDuration={delayDuration}>
24-
<Root title={title} description={description} {...props}>
25-
<Trigger>{children}</Trigger>
26-
</Root>
27-
</Provider>
28-
);
26+
}: Readonly<Props>): JSX.Element => {
27+
return (
28+
<Provider
29+
skipDelayDuration={skipDelayDuration}
30+
delayDuration={delayDuration}
31+
>
32+
<RichTooltipRoot title={title} description={description} {...props}>
33+
<Trigger asChild>{children}</Trigger>
34+
</RichTooltipRoot>
35+
</Provider>
36+
);
37+
};

‎packages/ui/src/design-system/tooltip/tooltip-content-inner.component.tsx

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎packages/ui/src/design-system/tooltip/tooltip-content-inner.css.ts

Lines changed: 0 additions & 5 deletions
This file was deleted.

0 commit comments

Comments
 (0)