feat: 🎸 add truncation tooltip on table expand item

Author: smithsamyan

src/Molecules/FlexTable/FlexTable.stories.tsx

@@ -981,6 +981,12 @@ export const TableWithDifferentSizeProps = () => {
 
 const expandedItemsGenerator = (renderComponent = false) =>
   [...Array(20)].reduce((acc, _, itemIndex) => {
+    // Make the first item really long
+    if (itemIndex === 0) {
+      const label = 'This is a reaaaallllyyy loooong label demonstrating truncation';
+      const value = 'This valuues is super long to also demonstrate truncation';
+      return [...acc, { label, value }];
+    }
     const keyName = `${itemIndex + 1}`;
     const labelText = `Label ${keyName}`;
     const label = renderComponent
@@ -1177,7 +1183,7 @@ export const ExpandableTableWithDifferentScenarios = () => {
     </FlexTable.Row>
   );
 
-  const ControlledExpandableTableWithOwnCellExample = () => {
+  const ControlledExpandableTableWithCustomRowExample = () => {
     const [expandedRows, setExpandedRows] = useState<string[]>(['row3']);
     const toggleExpand = (rowId: string) => {
       const isAlreadyExpanded = expandedRows.includes(rowId);
@@ -1274,8 +1280,8 @@ export const ExpandableTableWithDifferentScenarios = () => {
       <OnlyExpandableOnMobileTable />
       <Typography type="title3">Controlled Expandable Table</Typography>
       <ControlledExpandedTableExample />
-      <Typography type="title3">Controlled Expandable Table With Own Cell</Typography>
-      <ControlledExpandableTableWithOwnCellExample />
+      <Typography type="title3">Controlled Expandable Table With Custom Row</Typography>
+      <ControlledExpandableTableWithCustomRowExample />
       <Typography type="title3">Different Font Size For Expand Item On Mobile</Typography>
       <ExpandedTableDifferentFontSizeOnMobile />
     </StyledDiv>

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

@@ -10,6 +10,11 @@ import { FontSize } from '../../../shared/shared.types';
 import { useFlexTable } from '../../../shared/FlexTableProvider';
 import { RenderForSizes } from '../../../shared';
 
+const StyledOverflowItem = styled(Flexbox)<{ textAlign?: string }>`
+  overflow: hidden;
+  text-align: ${({ textAlign = 'left' }) => textAlign};
+`;
+
 const StyledFlexboxItem = styled(Flexbox)<FlexBoxProps>`
   max-width: ${p => p.theme.spacing.unit(75)}px;
   padding-bottom: ${p => p.theme.spacing.unit(5)}px;
@@ -37,14 +42,14 @@ const MobileItem: React.FC<{ item: ExpandItemProps; fontSize: FontSize }> = ({
   fontSize,
 }) => (
   <Flexbox container justifyContent="space-between" as="li">
-    <Flexbox item>
+    <StyledOverflowItem item flex="0 0 50%">
       <ExpandRenderer fontSize={fontSize} isLabel>
         {item.label}
       </ExpandRenderer>
-    </Flexbox>
-    <Flexbox item>
+    </StyledOverflowItem>
+    <StyledOverflowItem item flex="0 0 50%" textAlign="right">
       <ExpandRenderer fontSize={fontSize}>{item.value}</ExpandRenderer>
-    </Flexbox>
+    </StyledOverflowItem>
   </Flexbox>
 );
 

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

@@ -19,3 +19,5 @@ type Items = {
 export type ExpandItemComponent = React.FC<{ item: ExpandItemProps }> & Items;
 
 export type ExpandItemsComponent = React.FC<{ items: ExpandItems }>;
+
+export type TextWrapperComponent = React.FC<{ fontSize: FontSize; truncate?: boolean }>;

src/Molecules/FlexTable/Row/components/ExpandItems/TextWrapperLabel.tsx

@@ -1,19 +1,22 @@
 import React from 'react';
-import styled from 'styled-components';
 import { FontSize } from '../../../shared/shared.types';
 import { getFontSizeTypographyType } from '../../../shared/textUtils';
-import { Typography } from '../../../../..';
+import { Typography, TruncateWithTooltip } from '../../../../..';
+import { TextWrapperComponent } from './ExpandItems.types';
 
-const StyledTypography = styled(Typography)`
-  display: inline-block;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  width: 100%;
-`;
-
-export const TextWrapperLabel: React.FC<{ fontSize: FontSize }> = ({ fontSize, children }) => (
-  <StyledTypography type={getFontSizeTypographyType(fontSize)} color={t => t.color.label}>
+const Text: React.FC<{ fontSize: FontSize }> = ({ fontSize, children }) => (
+  <Typography type={getFontSizeTypographyType(fontSize)} color={t => t.color.label}>
     {children}
-  </StyledTypography>
+  </Typography>
 );
+
+export const TextWrapperLabel: TextWrapperComponent = ({ fontSize, children, truncate = true }) => {
+  if (!truncate) {
+    return <Text fontSize={fontSize}>{children}</Text>;
+  }
+  return (
+    <TruncateWithTooltip label={children}>
+      <Text fontSize={fontSize}>{children}</Text>
+    </TruncateWithTooltip>
+  );
+};

src/Molecules/FlexTable/Row/components/ExpandItems/TextWrapperValue.tsx

@@ -1,17 +1,20 @@
 import React from 'react';
-import styled from 'styled-components';
-import { Typography } from '../../../../..';
+import { Typography, TruncateWithTooltip } from '../../../../..';
 import { FontSize } from '../../../shared/shared.types';
 import { getFontSizeTypographyType } from '../../../shared/textUtils';
+import { TextWrapperComponent } from './ExpandItems.types';
 
-const StyledTypography = styled(Typography)`
-  display: inline-block;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  width: 100%;
-`;
-
-export const TextWrapperValue: React.FC<{ fontSize: FontSize }> = ({ fontSize, children }) => (
-  <StyledTypography type={getFontSizeTypographyType(fontSize)}>{children}</StyledTypography>
+const Text: React.FC<{ fontSize: FontSize }> = ({ fontSize, children }) => (
+  <Typography type={getFontSizeTypographyType(fontSize)}>{children}</Typography>
 );
+
+export const TextWrapperValue: TextWrapperComponent = ({ fontSize, children, truncate = true }) => {
+  if (!truncate) {
+    return <Text fontSize={fontSize}>{children}</Text>;
+  }
+  return (
+    <TruncateWithTooltip label={children}>
+      <Text fontSize={fontSize}>{children}</Text>
+    </TruncateWithTooltip>
+  );
+};