Skip to content

Commit 474779a

Browse files
authored
Add tooltip to button dropdown (#277)
feat(dropwdown): add tooltip support to dropdown + fix * Don't show tooltip if mainText is undefined don't show tooltip if mainText is undefined or empty * fix(list item): fix disabling action for onClick when disabled
1 parent 963838f commit 474779a

File tree

5 files changed

+43
-26
lines changed

5 files changed

+43
-26
lines changed

src/components/dropdown/dropdown.stories.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ Default.args = {
2323
value: 'project_1',
2424
metadata: {},
2525
onClick: action('onClick'),
26+
tooltipProps: { mainText: 'tooltip', secondaryText: 'tooltip' },
2627
},
2728
{
2829
value: 'project_2',

src/components/dropdown/index.tsx

+37-25
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import { DropdownItem } from './types';
1010
import { GetIcon } from '../icon';
1111
import Spinner from '../spinner';
1212
import { Flex } from 'rebass';
13+
import Tooltip from '../tooltip';
14+
import TooltipPositions from '../tooltip/positions';
1315

1416
export interface DropdownProps extends Omit<ListProps, 'css' | 'children'> {
1517
items: DropdownItem[];
@@ -33,36 +35,46 @@ const Dropdown: FC<DropdownProps> = ({
3335
return (
3436
<List {...props} ref={containerRef}>
3537
{items?.map((item) => {
36-
const { value, id, icon, hasDivider, onClick, isLoading, disabled } =
37-
item;
38+
const {
39+
value,
40+
id,
41+
icon,
42+
hasDivider,
43+
onClick,
44+
isLoading,
45+
disabled,
46+
tooltipProps,
47+
} = item;
3848

3949
return (
40-
<ListItem
41-
hasDivider={hasDivider}
42-
key={id || value}
43-
onClick={() => onClick(item)}
44-
disabled={disabled}
45-
>
46-
<Flex width="100%">
47-
<Flex flexGrow={1}>
48-
{icon && (
49-
<GetIcon
50-
color={disabled ? 'gray' : 'black'}
51-
icon={icon}
52-
size="sm"
50+
<Tooltip position={TooltipPositions.right} {...tooltipProps}>
51+
<ListItem
52+
hasDivider={hasDivider}
53+
key={id || value}
54+
onClick={() => onClick(item)}
55+
disabled={disabled}
56+
>
57+
<Flex width="100%">
58+
<Flex flexGrow={1}>
59+
{icon && (
60+
<GetIcon
61+
color={disabled ? 'gray' : 'black'}
62+
icon={icon}
63+
size="sm"
64+
/>
65+
)}
66+
{value}
67+
</Flex>
68+
{isLoading && (
69+
<Spinner
70+
size={16}
71+
ml="15px"
72+
color={disabled ? 'gray' : 'primary'}
5373
/>
5474
)}
55-
{value}
5675
</Flex>
57-
{isLoading && (
58-
<Spinner
59-
size={16}
60-
ml="15px"
61-
color={disabled ? 'gray' : 'primary'}
62-
/>
63-
)}
64-
</Flex>
65-
</ListItem>
76+
</ListItem>
77+
</Tooltip>
6678
);
6779
})}
6880
</List>

src/components/dropdown/types.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { IconName } from '../icon';
2+
import { TooltipProps } from '../tooltip';
23

34
export interface DropdownItem<Metadata = {}> {
45
value: string | number;
@@ -9,4 +10,5 @@ export interface DropdownItem<Metadata = {}> {
910
onClick: (item: DropdownItem) => void;
1011
isLoading?: boolean;
1112
disabled?: boolean;
13+
tooltipProps?: Omit<TooltipProps, 'children'>;
1214
}

src/components/list/item/index.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const ListItem: FC<ListItemProps> = ({
2323
isActive = false,
2424
isRightAlignment,
2525
disabled,
26+
onClick,
2627
...props
2728
}: ListItemProps) => {
2829
const [actionTitle, actionCallback] = action || [];
@@ -33,6 +34,7 @@ const ListItem: FC<ListItemProps> = ({
3334
as="li"
3435
tx="variants.list.item"
3536
variant={variant}
37+
onClick={disabled ? undefined : onClick}
3638
{...props}
3739
sx={styles(isActive, disabled)}
3840
css={!hasDivider ? withoutBorder : undefined}

src/components/tooltip/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ const Tooltip: FC<TooltipProps> = ({
135135
>
136136
{children}
137137

138-
{visible && !disabled && (
138+
{visible && !disabled && mainText && (
139139
<Portal>
140140
<Box
141141
sx={{

0 commit comments

Comments
 (0)