From 8bd10cea837de190791aee32ea4e9be433008f4a Mon Sep 17 00:00:00 2001 From: Ed Leeks Date: Tue, 30 Mar 2021 15:31:39 +0100 Subject: [PATCH] fix(flat-table-cell, flat-table-header): raise specificity of spacing styles Raises specificity of the `space` styles applied to div container within `FlatTableCell` and `FlatTableHeader` so any values passed via `styled-system` props take precedence of the cell-sizes configs fix #3846 --- .../__snapshots__/flat-table.spec.js.snap | 6 +++--- .../flat-table-cell/flat-table-cell.style.js | 8 +++++--- .../flat-table-header.spec.js | 2 +- .../flat-table-header.style.js | 17 ++++++++++------- .../flat-table-row-header.spec.js | 4 ++-- .../flat-table-row-header.style.js | 19 +++++++++---------- .../__snapshots__/flat-table-row.spec.js.snap | 2 +- 7 files changed, 31 insertions(+), 27 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 9ad2075818..8a9a5a86a2 100644 --- a/src/components/flat-table/__snapshots__/flat-table.spec.js.snap +++ b/src/components/flat-table/__snapshots__/flat-table.spec.js.snap @@ -24,7 +24,7 @@ exports[`FlatTable when rendered with proper table data should have expected str padding-left: 1px; } -.c10 > div { +.c9.c9.c9 > div { box-sizing: border-box; } @@ -39,7 +39,7 @@ exports[`FlatTable when rendered with proper table data should have expected str padding: 0; } -.c12 > div { +.c11.c11.c11 > div { box-sizing: border-box; } @@ -62,7 +62,7 @@ exports[`FlatTable when rendered with proper table data should have expected str padding: 0; } -.c13 > div { +.c12.c12.c12 > div { box-sizing: border-box; } 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 2947896bc9..ad92c67489 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 @@ -14,9 +14,11 @@ const StyledFlatTableCell = styled.td` white-space: nowrap; padding: 0; - > div { - box-sizing: border-box; - ${space} + &&& { + > div { + box-sizing: border-box; + ${space} + } } &:first-of-type { diff --git a/src/components/flat-table/flat-table-header/flat-table-header.spec.js b/src/components/flat-table/flat-table-header/flat-table-header.spec.js index 39c3a50b31..ff4d6cf316 100644 --- a/src/components/flat-table/flat-table-header/flat-table-header.spec.js +++ b/src/components/flat-table/flat-table-header/flat-table-header.spec.js @@ -19,7 +19,7 @@ describe("FlatTableHeader", () => { width: "40px", }, wrapper.find(StyledFlatTableHeader), - { modifier: " > div" } + { modifier: "&&& > div" } ); }); }); 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 34cf371d98..54d24fcf98 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 @@ -28,13 +28,16 @@ const StyledFlatTableHeader = styled.th` padding-left: 1px; } - > div { - box-sizing: border-box; - ${space} - ${colWidth && - css` - width: ${colWidth}px; - `} + &&& { + > div { + box-sizing: border-box; + ${space} + + ${colWidth && + css` + width: ${colWidth}px; + `} + } } ${makeCellSticky && 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 e290bb8550..fa6c424e41 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 @@ -14,7 +14,7 @@ describe("FlatTableRowHeader", () => { (props) => , { py: "10px", px: 3 }, null, - { modifier: " > div" } + { modifier: "&&& > div" } ); it("renders with proper width style rule when width prop is passed", () => { @@ -31,7 +31,7 @@ describe("FlatTableRowHeader", () => { width: "40px", }, wrapper.find(StyledFlatTableRowHeader), - { modifier: " > div" } + { modifier: "&&& > div" } ); }); 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 b1473ba620..6337f8c082 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 @@ -22,17 +22,16 @@ const StyledFlatTableRowHeader = styled.th` width: ${colWidth}px; `} - > div { - box-sizing: border-box; - ${colWidth && - css` - width: ${colWidth}px; - `} - ${space} - } - &&& { - left: ${leftPosition}px; + > div { + box-sizing: border-box; + + ${colWidth && + css` + width: ${colWidth}px; + `} + ${space} + } } `} `; diff --git a/src/components/flat-table/flat-table-row/__snapshots__/flat-table-row.spec.js.snap b/src/components/flat-table/flat-table-row/__snapshots__/flat-table-row.spec.js.snap index beb5a32050..2e6ee9c254 100644 --- a/src/components/flat-table/flat-table-row/__snapshots__/flat-table-row.spec.js.snap +++ b/src/components/flat-table/flat-table-row/__snapshots__/flat-table-row.spec.js.snap @@ -12,7 +12,7 @@ exports[`FlatTableRow should have expected styles 1`] = ` padding: 0; } -.c1 > div { +.c1.c1.c1 > div { box-sizing: border-box; }