feat(flat-table): add vertical border color control

src/components/flat-table/__snapshots__/flat-table.spec.js.snap

@@ -90,6 +90,10 @@ exports[`FlatTable when rendered with proper table data should have expected str
   z-index: 1000;
 }
 
+.c9.c9.c9 {
+  left: 0px;
+}
+
 .c9.c9.c9 > div {
   box-sizing: border-box;
   padding-top: 10px;
@@ -98,10 +102,6 @@ exports[`FlatTable when rendered with proper table data should have expected str
   padding-right: 24px;
 }
 
-.c9.c9.c9 {
-  left: 0px;
-}
-
 .c7 {
   border-collapse: separate;
   border-radius: 0px;

src/components/flat-table/flat-table-cell/flat-table-cell.component.js

@@ -122,6 +122,8 @@ FlatTableCell.propTypes = {
   reportCellWidth: PropTypes.func,
   /** Sets a custom vertical right border */
   verticalBorder: PropTypes.oneOf(["small", "medium", "large"]),
+  /** Sets a custom vertical right border */
+  verticalBorderColor: PropTypes.string,
 };
 
 export default FlatTableCell;

src/components/flat-table/flat-table-cell/flat-table-cell.d.ts

@@ -19,6 +19,8 @@ export interface FlatTableCellProps extends PaddingProps {
   title?: string;
   /** Sets a custom vertical right border */
   verticalBorder?: TableBorderSize;
+  /** Sets the color of the right border */
+  verticalBorderColor?: string;
 }
 
 declare function FlatTableCell(props: FlatTableCellProps): JSX.Element;

src/components/flat-table/flat-table-cell/flat-table-cell.spec.js

@@ -101,4 +101,27 @@ describe("FlatTableRowCell", () => {
       });
     }
   );
+
+  describe.each([
+    ["goldTint10", "#FFBC1A"],
+    ["#000", "#000"],
+  ])(
+    "when the verticalBorderColor prop is set to %s",
+    (verticalBorderColor, expectedValue) => {
+      let wrapper;
+
+      it("it overrides the cell border-right-color", () => {
+        wrapper = mount(
+          <FlatTableRowCell verticalBorderColor={verticalBorderColor} />
+        );
+        assertStyleMatch(
+          {
+            borderRightColor: expectedValue,
+          },
+          wrapper,
+          { modifier: "&&&" }
+        );
+      });
+    }
+  );
 });

src/components/flat-table/flat-table-cell/flat-table-cell.style.js

@@ -2,6 +2,7 @@ import styled, { css } from "styled-components";
 import { padding } from "styled-system";
 
 import baseTheme from "../../../style/themes/base";
+import { toColor } from "../../../style/utils/color";
 
 const verticalBorderSizes = {
   small: "1px",
@@ -20,6 +21,7 @@ const StyledFlatTableCell = styled.td`
     isTruncated,
     expandable,
     verticalBorder,
+    verticalBorderColor,
   }) => css`
     background-color: #fff;
     border-width: 0;
@@ -57,6 +59,11 @@ const StyledFlatTableCell = styled.td`
         border-right: ${verticalBorderSizes[verticalBorder]} solid
           ${theme.table.secondary};
       `}
+
+      ${verticalBorderColor &&
+      css`
+        border-right-color: ${toColor(theme, verticalBorderColor)};
+      `}
     }
 
     &:first-of-type {

src/components/flat-table/flat-table-header/flat-table-header.style.js

@@ -83,13 +83,14 @@ const StyledFlatTableHeader = styled.th`
     `
     }
 
-    ${
-      verticalBorder &&
-      css`
-        &&& {
+    &&& {
+      ${
+        verticalBorder &&
+        css`
           border-right-width: ${verticalBorderSizes[verticalBorder]};
-        }
-      `
+        `
+      }
+      }
     }
   `}
 `;

src/components/flat-table/flat-table-row-header/flat-table-row-header.component.js

@@ -84,6 +84,8 @@ FlatTableRowHeader.propTypes = {
   onKeyDown: PropTypes.func,
   /** Sets a custom vertical right border */
   verticalBorder: PropTypes.oneOf(["small", "medium", "large"]),
+  /** Sets a custom vertical right border */
+  verticalBorderColor: PropTypes.string,
 };
 
 export default FlatTableRowHeader;

src/components/flat-table/flat-table-row-header/flat-table-row-header.d.ts

@@ -14,6 +14,8 @@ export interface FlatTableRowHeaderProps extends PaddingProps {
   title?: string;
   /** Sets a custom vertical right border */
   verticalBorder?: TableBorderSize;
+  /** Sets the color of the right border */
+  verticalBorderColor?: string;
 }
 
 declare function FlatTableRowHeader(props: FlatTableRowHeaderProps): JSX.Element;

src/components/flat-table/flat-table-row-header/flat-table-row-header.spec.js

@@ -174,4 +174,27 @@ describe("FlatTableRowHeader", () => {
       });
     }
   );
+
+  describe.each([
+    ["goldTint10", "#FFBC1A"],
+    ["#000", "#000"],
+  ])(
+    "when the verticalBorderColor prop is set to %s",
+    (verticalBorderColor, expectedValue) => {
+      let wrapper;
+
+      it("it overrides the row header border-right-color", () => {
+        wrapper = mount(
+          <FlatTableRowHeader verticalBorderColor={verticalBorderColor} />
+        );
+        assertStyleMatch(
+          {
+            borderRightColor: expectedValue,
+          },
+          wrapper,
+          { modifier: "&&&" }
+        );
+      });
+    }
+  );
 });

src/components/flat-table/flat-table-row-header/flat-table-row-header.style.js

@@ -2,6 +2,7 @@ import styled, { css } from "styled-components";
 import { padding } from "styled-system";
 
 import baseTheme from "../../../style/themes/base";
+import { toColor } from "../../../style/utils/color";
 
 const verticalBorderSizes = {
   small: "1px",
@@ -18,6 +19,7 @@ const StyledFlatTableRowHeader = styled.th`
     isTruncated,
     expandable,
     verticalBorder,
+    verticalBorderColor,
   }) => css`
     background-color: #fff;
     border: 1px solid ${theme.table.secondary};
@@ -55,23 +57,24 @@ const StyledFlatTableRowHeader = styled.th`
  
         ${padding}
       }
-    }
 
-    &&& {
       left: ${leftPosition}px;
+
+      ${verticalBorder &&
+      css`
+        border-right-width: ${verticalBorderSizes[verticalBorder]};
+      `}
+
+      ${verticalBorderColor &&
+      css`
+        border-right-color: ${toColor(theme, verticalBorderColor)};
+      `}
     }
 
     ${expandable &&
     css`
       white-space: nowrap;
     `}
-
-    ${verticalBorder &&
-    css`
-      &&& {
-        border-right-width: ${verticalBorderSizes[verticalBorder]};
-      }
-    `}
   `}
 `;
 

src/components/flat-table/flat-table.stories.mdx

@@ -377,34 +377,34 @@ Setting a custom background color will also override hover, highlight and row se
     <FlatTable>
       <FlatTableHead>
         <FlatTableRow>
-          <FlatTableHeader verticalBorder="small">Name</FlatTableHeader>
-          <FlatTableHeader verticalBorder="medium">Location</FlatTableHeader>
+          <FlatTableHeader verticalBorder="small" verticalBorderColor="#335CDC">Name</FlatTableHeader>
+          <FlatTableHeader verticalBorder="medium" verticalBorderColor="goldTint10">Location</FlatTableHeader>
           <FlatTableHeader verticalBorder="large">Relationship Status</FlatTableHeader>
           <FlatTableHeader>Dependents</FlatTableHeader>
         </FlatTableRow>
       </FlatTableHead>
       <FlatTableBody>
         <FlatTableRow>
-          <FlatTableCell verticalBorder="small">John Doe</FlatTableCell>
-          <FlatTableCell verticalBorder="medium">London</FlatTableCell>
+          <FlatTableCell verticalBorder="small" verticalBorderColor="#335CDC">John Doe</FlatTableCell>
+          <FlatTableCell verticalBorder="medium" verticalBorderColor="goldTint10">London</FlatTableCell>
           <FlatTableCell verticalBorder="large">Single</FlatTableCell>
           <FlatTableCell>0</FlatTableCell>
         </FlatTableRow>
         <FlatTableRow>
-          <FlatTableCell verticalBorder="small">Jane Doe</FlatTableCell>
-          <FlatTableCell verticalBorder="medium">York</FlatTableCell>
+          <FlatTableCell verticalBorder="small" verticalBorderColor="#335CDC">Jane Doe</FlatTableCell>
+          <FlatTableCell verticalBorder="medium" verticalBorderColor="goldTint10">York</FlatTableCell>
           <FlatTableCell verticalBorder="large">Married</FlatTableCell>
           <FlatTableCell>2</FlatTableCell>
         </FlatTableRow>
         <FlatTableRow>
-          <FlatTableCell verticalBorder="small">John Smith</FlatTableCell>
-          <FlatTableCell verticalBorder="medium">Edinburgh</FlatTableCell>
+          <FlatTableCell verticalBorder="small" verticalBorderColor="#335CDC">John Smith</FlatTableCell>
+          <FlatTableCell verticalBorder="medium" verticalBorderColor="goldTint10">Edinburgh</FlatTableCell>
           <FlatTableCell verticalBorder="large">Single</FlatTableCell>
           <FlatTableCell>1</FlatTableCell>
         </FlatTableRow>
         <FlatTableRow>
-          <FlatTableCell verticalBorder="small">Jane Smith</FlatTableCell>
-          <FlatTableCell verticalBorder="medium">Newcastle</FlatTableCell>
+          <FlatTableCell verticalBorder="small" verticalBorderColor="#335CDC">Jane Smith</FlatTableCell>
+          <FlatTableCell verticalBorder="medium" verticalBorderColor="goldTint10">Newcastle</FlatTableCell>
           <FlatTableCell verticalBorder="large">Married</FlatTableCell>
           <FlatTableCell>5</FlatTableCell>
         </FlatTableRow>