Skip to content

Commit 3789644

Browse files
DominikGuzeiDominikGuzei
authored
Merge pull request #73 from input-output-hk/fix/lw-12306-truncate-wallet-option-title
fix: truncate wallet option title [LW-12306]
2 parents 7d7e493 + 8b789cb commit 3789644

5 files changed

+94
-56
lines changed

‎src/design-system/profile-dropdown/profile-dropdown-wallet-card.component.tsx

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -67,16 +67,24 @@ export const WalletCard = ({
6767

6868
return (
6969
<Flex>
70-
{profile ? (
71-
getProfileImage(profile, testId)
72-
) : (
73-
<WalletIcon type={type} testId={makeTestId(testId, '-icon')} />
74-
)}
70+
<Box className={cx.profileBox}>
71+
{profile ? (
72+
getProfileImage(profile, testId)
73+
) : (
74+
<WalletIcon type={type} testId={makeTestId(testId, '-icon')} />
75+
)}
76+
</Box>
7577
{subtitle ? (
76-
<Flex flexDirection="column" ml="$10" h="$32" alignItems="flex-start">
77-
<Title color="secondary" data-testid={makeTestId(testId, '-title')}>
78-
{title.text}
79-
</Title>
78+
<Flex className={cx.titleBox} flexDirection="column" ml="$10" h="$32">
79+
<Box w="$fill">
80+
<Title
81+
className={cx.title}
82+
color="secondary"
83+
data-testid={makeTestId(testId, '-title')}
84+
>
85+
{title.text}
86+
</Title>
87+
</Box>
8088
<Box
8189
className={cn(cx.subtitleBox, {
8290
[cx.subtitleButtonOffset]: title.type === 'button',
@@ -92,8 +100,9 @@ export const WalletCard = ({
92100
</Box>
93101
</Flex>
94102
) : (
95-
<Flex ml="$10" h="$32" alignItems="center">
103+
<Flex className={cx.titleBox} ml="$10" h="$32" alignItems="center">
96104
<Text.Body.Small
105+
className={cx.title}
97106
weight="$semibold"
98107
color="secondary"
99108
data-testid={makeTestId(testId, '-title')}

‎src/design-system/profile-dropdown/profile-dropdown-wallet-card.css.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,22 @@
11
import { style } from '../../design-tokens';
22

3+
export const profileBox = style({
4+
flexShrink: 0, // ensure it doesn't shrink
5+
});
6+
7+
export const titleBox = style({
8+
minWidth: 0, // ensure it doesn't overflow parent container width
9+
});
10+
11+
// Truncate title with ellipsis when it would overflow parent container
12+
// https://css-tricks.com/using-flexbox-and-text-ellipsis-together/
13+
export const title = style({
14+
display: 'block',
15+
whiteSpace: 'nowrap',
16+
textOverflow: 'ellipsis',
17+
overflow: 'hidden',
18+
});
19+
320
export const subtitleBox = style({
421
position: 'relative',
522
});

‎src/design-system/profile-dropdown/profile-dropdown-wallet-option.component.tsx

Lines changed: 46 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import ChevronRight from '@icons/ChevronRightThinComponent';
55
import EditComponent from '@icons/EditComponent';
66
import classNames from 'classnames';
77

8+
import { Box } from '../box';
89
import { Icon as IconButton } from '../control-buttons';
910
import { Flex } from '../flex';
1011

@@ -44,47 +45,51 @@ export const WalletOption = ({
4445
className={classNames(cx.button, cx.container, className)}
4546
data-testid="wallet-option-item"
4647
>
47-
<Flex alignItems="center" justifyContent="space-between" w="$fill">
48-
<WalletCard
49-
profile={profile}
50-
title={{
51-
text: title,
52-
type: 'content',
53-
}}
54-
subtitle={subtitle}
55-
type={type}
56-
testId="wallet-option"
57-
/>
58-
<Flex ml="$10" gap="$4">
59-
{onOpenEditWallet && (
60-
<Flex w="$24" h="$24" alignItems="center" justifyContent="center">
61-
<IconButton
62-
onClick={(event): void => {
63-
onOpenEditWallet?.();
64-
event.stopPropagation();
65-
}}
66-
icon={<EditComponent />}
67-
size="extraSmall"
68-
as="div"
69-
testId="wallet-option-edit-wallet-button"
70-
/>
71-
</Flex>
72-
)}
73-
{type !== 'shared' && onOpenAccountsMenu && (
74-
<Flex w="$24" h="$24" alignItems="center" justifyContent="center">
75-
<IconButton
76-
onClick={(event): void => {
77-
onOpenAccountsMenu?.();
78-
event.stopPropagation();
79-
}}
80-
icon={<ChevronRight />}
81-
size="extraSmall"
82-
as="div"
83-
testId="wallet-option-accounts-menu-button"
84-
/>
85-
</Flex>
86-
)}
87-
</Flex>
48+
<Flex alignItems="center" w="$fill">
49+
<Box className={cx.walletCard}>
50+
<WalletCard
51+
profile={profile}
52+
title={{
53+
text: title,
54+
type: 'content',
55+
}}
56+
subtitle={subtitle}
57+
type={type}
58+
testId="wallet-option"
59+
/>
60+
</Box>
61+
<Box className={cx.walletActions}>
62+
<Flex ml="$10" gap="$4">
63+
{onOpenEditWallet && (
64+
<Flex w="$24" h="$24" alignItems="center" justifyContent="center">
65+
<IconButton
66+
onClick={(event): void => {
67+
onOpenEditWallet?.();
68+
event.stopPropagation();
69+
}}
70+
icon={<EditComponent />}
71+
size="extraSmall"
72+
as="div"
73+
testId="wallet-option-edit-wallet-button"
74+
/>
75+
</Flex>
76+
)}
77+
{type !== 'shared' && onOpenAccountsMenu && (
78+
<Flex w="$24" h="$24" alignItems="center" justifyContent="center">
79+
<IconButton
80+
onClick={(event): void => {
81+
onOpenAccountsMenu?.();
82+
event.stopPropagation();
83+
}}
84+
icon={<ChevronRight />}
85+
size="extraSmall"
86+
as="div"
87+
testId="wallet-option-accounts-menu-button"
88+
/>
89+
</Flex>
90+
)}
91+
</Flex>
92+
</Box>
8893
</Flex>
8994
</button>
9095
);

‎src/design-system/profile-dropdown/profile-dropdown-wallet-option.css.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,15 @@ import { sx, style, vars } from '../../design-tokens';
22

33
export const button = style({});
44

5+
export const walletCard = style({
6+
flex: '1', // make sure the title etc uses all available space
7+
minWidth: 0, // make sure it doesn't overflow width
8+
});
9+
10+
export const walletActions = style({
11+
flex: '0', // wallet action buttons should take up as little space as possible
12+
});
13+
514
export const container = style([
615
sx({
716
height: '$48',

‎src/design-system/profile-dropdown/profile-dropdown-wallet-option.stories.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -66,15 +66,14 @@ export const Overview = (): JSX.Element => (
6666
<Variants.Row>
6767
<Variants.Cell>
6868
<WalletOption
69-
title="Alice's wallet"
69+
title="WALLET WITH REALLY LONG NAME THAT WILL BE TRUNCATED"
7070
subtitle="Account #0"
7171
type="hot"
7272
/>
7373
</Variants.Cell>
7474
<Variants.Cell>
7575
<WalletOption
76-
title="Alice's wallet"
77-
subtitle="Account #0"
76+
title="WALLET WITH REALLY LONG NAME THAT WILL BE TRUNCATED"
7877
type="cold"
7978
/>
8079
</Variants.Cell>
@@ -109,8 +108,7 @@ export const Overview = (): JSX.Element => (
109108
</Variants.Cell>
110109
<Variants.Cell>
111110
<WalletOption
112-
title="Alice's wallet"
113-
subtitle="Account #0"
111+
title="WALLET WITH REALLY LONG NAME THAT WILL BE TRUNCATED"
114112
type="cold"
115113
onOpenAccountsMenu={action('onOpenAccountsMenu')}
116114
onOpenEditWallet={action('onOpenEditWallet')}

0 commit comments

Comments
 (0)