Skip to content

Commit 5754b9c

Browse files
committed
feat: 🎸 add truncation tooltip on table expand item
1 parent d249316 commit 5754b9c

File tree

6 files changed

+6058
-3314
lines changed

6 files changed

+6058
-3314
lines changed

‎src/Molecules/FlexTable/FlexTable.stories.tsx

+9-3
Original file line numberDiff line numberDiff line change
@@ -981,6 +981,12 @@ export const TableWithDifferentSizeProps = () => {
981981

982982
const expandedItemsGenerator = (renderComponent = false) =>
983983
[...Array(20)].reduce((acc, _, itemIndex) => {
984+
// Make the first item really long
985+
if (itemIndex === 0) {
986+
const label = 'This is a reaaaallllyyy loooong label demonstrating truncation';
987+
const value = 'This valuues is super long to also demonstrate truncation';
988+
return [...acc, { label, value }];
989+
}
984990
const keyName = `${itemIndex + 1}`;
985991
const labelText = `Label ${keyName}`;
986992
const label = renderComponent
@@ -1177,7 +1183,7 @@ export const ExpandableTableWithDifferentScenarios = () => {
11771183
</FlexTable.Row>
11781184
);
11791185

1180-
const ControlledExpandableTableWithOwnCellExample = () => {
1186+
const ControlledExpandableTableWithCustomRowExample = () => {
11811187
const [expandedRows, setExpandedRows] = useState<string[]>(['row3']);
11821188
const toggleExpand = (rowId: string) => {
11831189
const isAlreadyExpanded = expandedRows.includes(rowId);
@@ -1274,8 +1280,8 @@ export const ExpandableTableWithDifferentScenarios = () => {
12741280
<OnlyExpandableOnMobileTable />
12751281
<Typography type="title3">Controlled Expandable Table</Typography>
12761282
<ControlledExpandedTableExample />
1277-
<Typography type="title3">Controlled Expandable Table With Own Cell</Typography>
1278-
<ControlledExpandableTableWithOwnCellExample />
1283+
<Typography type="title3">Controlled Expandable Table With Custom Row</Typography>
1284+
<ControlledExpandableTableWithCustomRowExample />
12791285
<Typography type="title3">Different Font Size For Expand Item On Mobile</Typography>
12801286
<ExpandedTableDifferentFontSizeOnMobile />
12811287
</StyledDiv>

‎src/Molecules/FlexTable/Row/components/ExpandItems/ExpandItem.tsx

+9-4
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@ import { FontSize } from '../../../shared/shared.types';
1010
import { useFlexTable } from '../../../shared/FlexTableProvider';
1111
import { RenderForSizes } from '../../../shared';
1212

13+
const StyledOverflowItem = styled(Flexbox)<{ textAlign?: string }>`
14+
overflow: hidden;
15+
text-align: ${({ textAlign = 'left' }) => textAlign};
16+
`;
17+
1318
const StyledFlexboxItem = styled(Flexbox)<FlexBoxProps>`
1419
max-width: ${p => p.theme.spacing.unit(75)}px;
1520
padding-bottom: ${p => p.theme.spacing.unit(5)}px;
@@ -37,14 +42,14 @@ const MobileItem: React.FC<{ item: ExpandItemProps; fontSize: FontSize }> = ({
3742
fontSize,
3843
}) => (
3944
<Flexbox container justifyContent="space-between" as="li">
40-
<Flexbox item>
45+
<StyledOverflowItem item flex="0 0 50%">
4146
<ExpandRenderer fontSize={fontSize} isLabel>
4247
{item.label}
4348
</ExpandRenderer>
44-
</Flexbox>
45-
<Flexbox item>
49+
</StyledOverflowItem>
50+
<StyledOverflowItem item flex="0 0 50%" textAlign="right">
4651
<ExpandRenderer fontSize={fontSize}>{item.value}</ExpandRenderer>
47-
</Flexbox>
52+
</StyledOverflowItem>
4853
</Flexbox>
4954
);
5055

‎src/Molecules/FlexTable/Row/components/ExpandItems/ExpandItems.types.ts

+2
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,5 @@ type Items = {
1919
export type ExpandItemComponent = React.FC<{ item: ExpandItemProps }> & Items;
2020

2121
export type ExpandItemsComponent = React.FC<{ items: ExpandItems }>;
22+
23+
export type TextWrapperComponent = React.FC<{ fontSize: FontSize; truncate?: boolean }>;
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
11
import React from 'react';
2-
import styled from 'styled-components';
32
import { FontSize } from '../../../shared/shared.types';
43
import { getFontSizeTypographyType } from '../../../shared/textUtils';
5-
import { Typography } from '../../../../..';
4+
import { Typography, TruncateWithTooltip } from '../../../../..';
5+
import { TextWrapperComponent } from './ExpandItems.types';
66

7-
const StyledTypography = styled(Typography)`
8-
display: inline-block;
9-
text-overflow: ellipsis;
10-
white-space: nowrap;
11-
overflow: hidden;
12-
width: 100%;
13-
`;
14-
15-
export const TextWrapperLabel: React.FC<{ fontSize: FontSize }> = ({ fontSize, children }) => (
16-
<StyledTypography type={getFontSizeTypographyType(fontSize)} color={t => t.color.label}>
7+
const Text: React.FC<{ fontSize: FontSize }> = ({ fontSize, children }) => (
8+
<Typography type={getFontSizeTypographyType(fontSize)} color={t => t.color.label}>
179
{children}
18-
</StyledTypography>
10+
</Typography>
1911
);
12+
13+
export const TextWrapperLabel: TextWrapperComponent = ({ fontSize, children, truncate = true }) => {
14+
if (!truncate) {
15+
return <Text fontSize={fontSize}>{children}</Text>;
16+
}
17+
return (
18+
<TruncateWithTooltip label={children}>
19+
<Text fontSize={fontSize}>{children}</Text>
20+
</TruncateWithTooltip>
21+
);
22+
};
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
import React from 'react';
2-
import styled from 'styled-components';
3-
import { Typography } from '../../../../..';
2+
import { Typography, TruncateWithTooltip } from '../../../../..';
43
import { FontSize } from '../../../shared/shared.types';
54
import { getFontSizeTypographyType } from '../../../shared/textUtils';
5+
import { TextWrapperComponent } from './ExpandItems.types';
66

7-
const StyledTypography = styled(Typography)`
8-
display: inline-block;
9-
text-overflow: ellipsis;
10-
white-space: nowrap;
11-
overflow: hidden;
12-
width: 100%;
13-
`;
14-
15-
export const TextWrapperValue: React.FC<{ fontSize: FontSize }> = ({ fontSize, children }) => (
16-
<StyledTypography type={getFontSizeTypographyType(fontSize)}>{children}</StyledTypography>
7+
const Text: React.FC<{ fontSize: FontSize }> = ({ fontSize, children }) => (
8+
<Typography type={getFontSizeTypographyType(fontSize)}>{children}</Typography>
179
);
10+
11+
export const TextWrapperValue: TextWrapperComponent = ({ fontSize, children, truncate = true }) => {
12+
if (!truncate) {
13+
return <Text fontSize={fontSize}>{children}</Text>;
14+
}
15+
return (
16+
<TruncateWithTooltip label={children}>
17+
<Text fontSize={fontSize}>{children}</Text>
18+
</TruncateWithTooltip>
19+
);
20+
};

0 commit comments

Comments
 (0)