feat(flat-table-cell, flat-table-row-header): add width prop to table…

… cell and new truncate styling Adds `width` prop for `FlatTableCell`. Adds `truncate` and `title` props to support styling content that overflows the width of the column and overriding the text displayed when the mouse hovers over a cell.
Sage · Apr 13, 2021 · 86b42b8 · 86b42b8
1 parent 8bd10ce
commit 86b42b8
Show file tree

Hide file tree

Showing 12 changed files with 302 additions and 40 deletions.
diff --git a/src/components/flat-table/__snapshots__/flat-table.spec.js.snap b/src/components/flat-table/__snapshots__/flat-table.spec.js.snap
@@ -24,22 +24,20 @@ exports[`FlatTable when rendered with proper table data should have expected str
   padding-left: 1px;
 }
 
-.c9.c9.c9 > div {
+.c10.c10.c10 > div {
   box-sizing: border-box;
 }
 
 .c12 {
   background-color: #fff;
   border-width: 0;
   border-bottom: 1px solid #CCD6DB;
-  text-overflow: ellipsis;
   text-align: left;
   vertical-align: middle;
-  white-space: nowrap;
   padding: 0;
 }
 
-.c11.c11.c11 > div {
+.c12.c12.c12 > div {
   box-sizing: border-box;
 }
 
@@ -55,14 +53,12 @@ exports[`FlatTable when rendered with proper table data should have expected str
   background-color: #fff;
   border-width: 0;
   border-bottom: 1px solid #CCD6DB;
-  text-overflow: ellipsis;
   text-align: left;
   vertical-align: middle;
-  white-space: nowrap;
   padding: 0;
 }
 
-.c12.c12.c12 > div {
+.c13.c13.c13 > div {
   box-sizing: border-box;
 }
 
@@ -90,11 +86,10 @@ exports[`FlatTable when rendered with proper table data should have expected str
   text-align: left;
   top: auto;
   vertical-align: middle;
-  white-space: nowrap;
   padding: 0;
 }
 
-.c8 > div {
+.c8.c8.c8 > div {
   box-sizing: border-box;
   padding-top: 10px;
   padding-bottom: 10px;

diff --git a/src/components/flat-table/flat-table-cell/flat-table-cell.component.js b/src/components/flat-table/flat-table-cell/flat-table-cell.component.js
@@ -9,7 +9,7 @@ import {
 import Icon from "../../icon";
 
 const FlatTableCell = ({
-  align,
+  align = "left",
   children,
   colspan,
   rowspan,
@@ -21,6 +21,9 @@ const FlatTableCell = ({
   reportCellWidth,
   cellIndex,
   leftPosition,
+  width,
+  truncate = false,
+  title,
   ...rest
 }) => {
   const ref = useRef(null);
@@ -45,9 +48,17 @@ const FlatTableCell = ({
       onClick={expandable && onClick ? onClick : undefined}
       tabIndex={expandable && onClick ? 0 : undefined}
       onKeyDown={expandable && onKeyDown ? onKeyDown : undefined}
+      colWidth={width}
+      isTruncated={truncate}
+      expandable={expandable}
       {...rest}
     >
-      <StyledCellContent expandable={expandable}>
+      <StyledCellContent
+        title={
+          truncate && !title && typeof children === "string" ? children : title
+        }
+        expandable={expandable}
+      >
         {expandable && <Icon type="chevron_down_thick" />}
         {children}
       </StyledCellContent>
@@ -65,6 +76,12 @@ FlatTableCell.propTypes = {
   colspan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** Number of rows that a cell should span */
   rowspan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /** Column width, pass a number to set a fixed width in pixels */
+  width: PropTypes.number,
+  /** Truncate cell content and add ellipsis to any text that overflows */
+  truncate: PropTypes.bool,
+  /** Title text to display if cell content truncates */
+  title: PropTypes.string,
   /**
    * @private
    * @ignore
@@ -100,8 +117,4 @@ FlatTableCell.propTypes = {
   reportCellWidth: PropTypes.func,
 };
 
-FlatTableCell.defaultProps = {
-  align: "left",
-};
-
 export default FlatTableCell;
diff --git a/src/components/flat-table/flat-table-cell/flat-table-cell.d.ts b/src/components/flat-table/flat-table-cell/flat-table-cell.d.ts
@@ -9,6 +9,12 @@ export interface FlatTableCellProps extends SpacingProps {
   colspan?: number | string;
   /** Number of rows that a cell should span */
   rowspan?: number | string;
+  /** Column width, pass a number to set a fixed width in pixels */
+  width?: number;
+  /** Truncate cell content and add ellipsis to any text that overflows */
+  truncate?: boolean;
+  /** Title text to display if cell content truncates */
+  title?: string;
 }
 
 declare const FlatTableCell: React.FunctionComponent<FlatTableCellProps>;

diff --git a/src/components/flat-table/flat-table-cell/flat-table-cell.spec.js b/src/components/flat-table/flat-table-cell/flat-table-cell.spec.js
@@ -0,0 +1,60 @@
+import React from "react";
+import { mount } from "enzyme";
+
+import { StyledFlatTableCell } from "./flat-table-cell.style";
+import FlatTableRowCell from "./flat-table-cell.component";
+import { assertStyleMatch } from "../../../__spec_helper__/test-utils";
+
+describe("FlatTableRowCell", () => {
+  it("renders with proper width style rule when width prop is passed", () => {
+    const wrapper = mount(<FlatTableRowCell width={40} />);
+    assertStyleMatch(
+      {
+        width: "40px",
+      },
+      wrapper.find(StyledFlatTableCell)
+    );
+
+    assertStyleMatch(
+      {
+        width: "40px",
+      },
+      wrapper.find(StyledFlatTableCell),
+      { modifier: "&&& > div" }
+    );
+  });
+
+  describe("when truncate prop is true", () => {
+    let wrapper;
+    beforeEach(() => {
+      wrapper = mount(<FlatTableRowCell truncate>Foo</FlatTableRowCell>);
+    });
+
+    it("should apply expected styling", () => {
+      assertStyleMatch(
+        {
+          textOverflow: "ellipsis",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+        },
+        wrapper.find(StyledFlatTableCell),
+        { modifier: "&&& > div" }
+      );
+    });
+
+    it("should set the title if children is string", () => {
+      expect(wrapper.find("div").props().title).toEqual("Foo");
+    });
+
+    describe("and title prop is set", () => {
+      it("should override the default behaviour", () => {
+        wrapper = mount(
+          <FlatTableRowCell truncate title="Bar">
+            Foo
+          </FlatTableRowCell>
+        );
+        expect(wrapper.find("div").props().title).toEqual("Bar");
+      });
+    });
+  });
+});
diff --git a/src/components/flat-table/flat-table-cell/flat-table-cell.style.js b/src/components/flat-table/flat-table-cell/flat-table-cell.style.js
@@ -4,19 +4,44 @@ import { space } from "styled-system";
 import baseTheme from "../../../style/themes/base";
 
 const StyledFlatTableCell = styled.td`
-  ${({ align, theme, rowSpan, leftPosition, makeCellSticky }) => css`
+  ${({
+    align,
+    theme,
+    rowSpan,
+    leftPosition,
+    makeCellSticky,
+    colWidth,
+    isTruncated,
+    expandable,
+  }) => css`
     background-color: #fff;
     border-width: 0;
     border-bottom: 1px solid ${theme.table.secondary};
-    text-overflow: ellipsis;
     text-align: ${align};
     vertical-align: middle;
-    white-space: nowrap;
     padding: 0;
 
+    ${colWidth &&
+    css`
+      width: ${colWidth}px;
+    `}
+
     &&& {
       > div {
         box-sizing: border-box;
+
+        ${isTruncated &&
+        css`
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        `}
+
+        ${colWidth &&
+        css`
+          width: ${colWidth}px;
+        `}
+ 
         ${space}
       }
     }
@@ -42,19 +67,21 @@ const StyledFlatTableCell = styled.td`
       left: ${leftPosition}px;
       position: sticky;
     `}
+
+    ${expandable &&
+    css`
+      white-space: nowrap;
+    `}
   `}
 `;
 
 const StyledCellContent = styled.div`
-  ${({ expandable }) => css`
-     {
-      ${expandable &&
-      css`
-        display: flex;
-        align-items: center;
-      `}
-    }
-  `}
+  ${({ expandable }) =>
+    expandable &&
+    css`
+      display: flex;
+      align-items: center;
+    `}
 `;
 
 StyledFlatTableCell.defaultProps = {

diff --git a/src/components/flat-table/flat-table-expandable.stories.mdx b/src/components/flat-table/flat-table-expandable.stories.mdx
@@ -1,5 +1,6 @@
 import { Meta, Props, Preview, Story } from "@storybook/addon-docs/blocks";
 import { useState } from "react";
+import styled from "styled-components";
 import {
   FlatTable,
   FlatTableHead,
@@ -969,6 +970,76 @@ By writing your own selectable logic, the child rows only can be made selectable
   </Story>
 </Preview>
 
+### Truncated cell content
+In order to achieve the content truncation when using the `expandable` feature you will need to pass in a node with the 
+truncated styling applied, this is because of the caret icon that is rendered within the cell.
+
+<Preview>
+  <Story name="truncated cell content">
+    {() => {
+      const SubRows = [
+        <FlatTableRow>
+          <FlatTableCell width={60} pr={0} truncate>Child one</FlatTableCell>
+          <FlatTableCell>York</FlatTableCell>
+          <FlatTableCell>Single</FlatTableCell>
+          <FlatTableCell>2</FlatTableCell>
+        </FlatTableRow>,
+        <FlatTableRow>
+          <FlatTableCell width={60} pr={0} truncate>Child two</FlatTableCell>
+          <FlatTableCell>Edinburgh</FlatTableCell>
+          <FlatTableCell>Single</FlatTableCell>
+          <FlatTableCell>1</FlatTableCell>
+        </FlatTableRow>,
+      ];
+      const Truncate = styled.span`
+        box-sizing: border-box;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        width: 48px;
+      `;
+      return (
+        <FlatTable>
+          <FlatTableHead>
+            <FlatTableRow>
+              <FlatTableHeader width="60">Name</FlatTableHeader>
+              <FlatTableHeader>Location</FlatTableHeader>
+              <FlatTableHeader>Relationship Status</FlatTableHeader>
+              <FlatTableHeader>Dependents</FlatTableHeader>
+            </FlatTableRow>
+          </FlatTableHead>
+          <FlatTableBody>
+            <FlatTableRow expandable subRows={SubRows}>
+              <FlatTableCell><Truncate title="John Doe">John Doe</Truncate></FlatTableCell>
+              <FlatTableCell>London</FlatTableCell>
+              <FlatTableCell>Single</FlatTableCell>
+              <FlatTableCell>0</FlatTableCell>
+            </FlatTableRow>
+            <FlatTableRow expandable subRows={SubRows}>
+              <FlatTableCell><Truncate title="Jane Doe">Jane Doe</Truncate></FlatTableCell>
+              <FlatTableCell>York</FlatTableCell>
+              <FlatTableCell>Married</FlatTableCell>
+              <FlatTableCell>2</FlatTableCell>
+            </FlatTableRow>
+            <FlatTableRow expandable subRows={SubRows}>
+              <FlatTableCell><Truncate title="John Smith">John Smith</Truncate></FlatTableCell>
+              <FlatTableCell>Edinburgh</FlatTableCell>
+              <FlatTableCell>Single</FlatTableCell>
+              <FlatTableCell>1</FlatTableCell>
+            </FlatTableRow>
+            <FlatTableRow expandable subRows={SubRows}>
+              <FlatTableCell><Truncate title="Jane Smith">Jane Smith</Truncate></FlatTableCell>
+              <FlatTableCell>Newcastle</FlatTableCell>
+              <FlatTableCell>Married</FlatTableCell>
+              <FlatTableCell>5</FlatTableCell>
+            </FlatTableRow>
+          </FlatTableBody>
+        </FlatTable>
+      );
+    }}
+  </Story>
+</Preview>
+
 ## Props
 
 ### FlatTableRow