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
Sage · Apr 13, 2021 · 8bd10ce · 8bd10ce
1 parent 60a5748
commit 8bd10ce
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -14,7 +14,7 @@ describe("FlatTableRowHeader", () => {
     (props) => <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
@@ -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
@@ -12,7 +12,7 @@ exports[`FlatTableRow should have expected styles 1`] = `
   padding: 0;
 }
 
-.c1 > div {
+.c1.c1.c1 > div {
   box-sizing: border-box;
 }