From 0a25e765849b2d7ee9bcd004c6d927bb8ba34c7b Mon Sep 17 00:00:00 2001 From: grabkowski Date: Fri, 28 May 2021 10:58:53 +0200 Subject: [PATCH] feat(flat-table): add vertical border color control --- .../__snapshots__/flat-table.spec.js.snap | 8 +++---- .../flat-table-cell.component.js | 2 ++ .../flat-table-cell/flat-table-cell.d.ts | 2 ++ .../flat-table-cell/flat-table-cell.spec.js | 23 +++++++++++++++++++ .../flat-table-cell/flat-table-cell.style.js | 7 ++++++ .../flat-table-header.style.js | 13 ++++++----- .../flat-table-row-header.component.js | 2 ++ .../flat-table-row-header.d.ts | 2 ++ .../flat-table-row-header.spec.js | 23 +++++++++++++++++++ .../flat-table-row-header.style.js | 21 +++++++++-------- .../flat-table/flat-table.stories.mdx | 20 ++++++++-------- 11 files changed, 94 insertions(+), 29 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 index 24fd19748a..ba81e6c8e1 100644 --- a/src/components/flat-table/__snapshots__/flat-table.spec.js.snap +++ b/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; 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 index e7cb574f02..8d0c0c66a3 100644 --- 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 @@ -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; 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 index 378ba3d5d2..4b5581f15a 100644 --- 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 @@ -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; 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 index fb99e1d1bc..f074dc05e9 100644 --- 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 @@ -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( + + ); + assertStyleMatch( + { + borderRightColor: expectedValue, + }, + wrapper, + { modifier: "&&&" } + ); + }); + } + ); }); 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 index 68af060f85..f3914804e7 100644 --- 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 @@ -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 { diff --git a/src/components/flat-table/flat-table-header/flat-table-header.style.js b/src/components/flat-table/flat-table-header/flat-table-header.style.js index 16db2dc80d..01afbc6ab2 100644 --- a/src/components/flat-table/flat-table-header/flat-table-header.style.js +++ b/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]}; - } - ` + ` + } + } } `} `; diff --git a/src/components/flat-table/flat-table-row-header/flat-table-row-header.component.js b/src/components/flat-table/flat-table-row-header/flat-table-row-header.component.js index 1e5ca1a377..928c79165a 100644 --- a/src/components/flat-table/flat-table-row-header/flat-table-row-header.component.js +++ b/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; diff --git a/src/components/flat-table/flat-table-row-header/flat-table-row-header.d.ts b/src/components/flat-table/flat-table-row-header/flat-table-row-header.d.ts index 389c7520f6..2f5264619e 100644 --- a/src/components/flat-table/flat-table-row-header/flat-table-row-header.d.ts +++ b/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; diff --git a/src/components/flat-table/flat-table-row-header/flat-table-row-header.spec.js b/src/components/flat-table/flat-table-row-header/flat-table-row-header.spec.js index ed808705b4..845081b554 100644 --- a/src/components/flat-table/flat-table-row-header/flat-table-row-header.spec.js +++ b/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( + + ); + assertStyleMatch( + { + borderRightColor: expectedValue, + }, + wrapper, + { modifier: "&&&" } + ); + }); + } + ); }); diff --git a/src/components/flat-table/flat-table-row-header/flat-table-row-header.style.js b/src/components/flat-table/flat-table-row-header/flat-table-row-header.style.js index 759df74aeb..eec047eedf 100644 --- a/src/components/flat-table/flat-table-row-header/flat-table-row-header.style.js +++ b/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]}; - } - `} `} `; diff --git a/src/components/flat-table/flat-table.stories.mdx b/src/components/flat-table/flat-table.stories.mdx index e43876dc51..fadcfd9fe8 100644 --- a/src/components/flat-table/flat-table.stories.mdx +++ b/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 - Name - Location + Name + Location Relationship Status Dependents - John Doe - London + John Doe + London Single 0 - Jane Doe - York + Jane Doe + York Married 2 - John Smith - Edinburgh + John Smith + Edinburgh Single 1 - Jane Smith - Newcastle + Jane Smith + Newcastle Married 5