fix(Table): fix fist border on rowSpan={2} is used in first column (#…

…1956)
dnbexperience · Jan 29, 2023 · 48ff543 · 48ff543
1 parent ac4f254
commit 48ff543
Show file tree

Hide file tree

Showing 10 changed files with 13 additions and 12 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/table/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/table/Examples.tsx
@@ -461,16 +461,20 @@ export const TableStackedContainer = () => {
                 </thead>
                 <tbody>
                   <Tr>
-                    <Td>Row 1</Td>
+                    <Td rowSpan={2}>Row 1</Td>
                     <Td>Row 1</Td>
                     <Td>Row 1</Td>
                     <Td>Row 1</Td>
                   </Tr>
                   <Tr>
+                    <Td rowSpan={2}>Row 2</Td>
                     <Td>Row 2</Td>
                     <Td>Row 2</Td>
-                    <Td>Row 2</Td>
-                    <Td>Row 2</Td>
+                  </Tr>
+                  <Tr>
+                    <Td>Row 3</Td>
+                    <Td>Row 3</Td>
+                    <Td>Row 3</Td>
                   </Tr>
                 </tbody>
               </Table>

diff --git a/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/Table.test.tsx.snap b/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/Table.test.tsx.snap
@@ -499,10 +499,9 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
   border-right: none;
   border-bottom: none; }
 
-.dnb-table--border tbody .dnb-table__td:first-of-type::after {
-  border-left: none; }
-
-.dnb-table:not(.dnb-table--outline) tbody .dnb-table__tr:last-of-type .dnb-table__td::after {
+.dnb-table:not(.dnb-table--outline) tbody .dnb-table__tr:last-of-type .dnb-table__td::after,
+.dnb-table:not(.dnb-table--outline) tbody .dnb-table__tr .dnb-table__td[rowspan]::after {
+  bottom: -0.0625rem;
   border-bottom: var(--border); }
 
 .dnb-table--outline tbody .dnb-table__td {

diff --git a/...t-test-tsx-table-screenshot-have-to-match-a-fixed-table-layout-1-3ee82.snap.png b/...t-test-tsx-table-screenshot-have-to-match-a-fixed-table-layout-1-3ee82.snap.png
diff --git a/...st-tsx-table-screenshot-have-to-match-header-with-wrapped-text-1-c094e.snap.png b/...st-tsx-table-screenshot-have-to-match-header-with-wrapped-text-1-c094e.snap.png
diff --git a/...enshot-test-tsx-table-screenshot-have-to-match-table-container-1-805c6.snap.png b/...enshot-test-tsx-table-screenshot-have-to-match-table-container-1-805c6.snap.png
diff --git a/...t-test-tsx-table-screenshot-have-to-match-table-in-medium-size-1-77103.snap.png b/...t-test-tsx-table-screenshot-have-to-match-table-in-medium-size-1-77103.snap.png
diff --git a/...ot-test-tsx-table-screenshot-have-to-match-table-in-small-size-1-f0036.snap.png b/...ot-test-tsx-table-screenshot-have-to-match-table-in-small-size-1-f0036.snap.png
diff --git a/...le-screenshot-have-to-match-the-default-choice-of-table-styles-1-82372.snap.png b/...le-screenshot-have-to-match-the-default-choice-of-table-styles-1-82372.snap.png
diff --git a/...tsx-table-with-skeleton-screenshot-have-to-match-default-table-1-c0fc9.snap.png b/...tsx-table-with-skeleton-screenshot-have-to-match-default-table-1-c0fc9.snap.png
diff --git a/packages/dnb-eufemia/src/components/table/style/_table-td.scss b/packages/dnb-eufemia/src/components/table/style/_table-td.scss
@@ -15,12 +15,10 @@
       border-right: none;
       border-bottom: none;
     }
-
-    &:first-of-type::after {
-      border-left: none;
-    }
   }
-  &:not(#{&}--outline) tbody &__tr:last-of-type &__td::after {
+  &:not(#{&}--outline) tbody &__tr:last-of-type &__td::after,
+  &:not(#{&}--outline) tbody &__tr &__td[rowspan]::after {
+    bottom: -0.0625rem;
     border-bottom: var(--border);
   }