Revert "chore(Table): remove deprecated selectors (#1902)" (#1968)

This reverts commit 92bb52e. + Resolve table conflicts during a rebase
dnbexperience · May 31, 2023 · 684e222 · 684e222
1 parent a870ed0
commit 684e222
Show file tree

Hide file tree

Showing 30 changed files with 106 additions and 40 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
@@ -609,6 +609,43 @@ export const TableClassHelpers = () => (
   </ComponentBox>
 )
 
+export const TableWithoutClasses = () => (
+  <ComponentBox hideCode data-visual-test="table-no-classes">
+    <Table.ScrollView>
+      <table className="dnb-table">
+        <thead>
+          <tr>
+            <th>Header</th>
+            <th className="dnb-table--sortable dnb-table--reversed">
+              <Th.SortButton text="Sortable" />
+            </th>
+            <th className="dnb-table--sortable dnb-table--active">
+              <Th.SortButton text="Active" />
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Row 1</td>
+            <td>Row 1</td>
+            <td>Row 1</td>
+          </tr>
+          <tr>
+            <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>
+    </Table.ScrollView>
+  </ComponentBox>
+)
+
 export const TableLongHeader = () => (
   <ComponentBox hideCode data-visual-test="table-header">
     <Table.ScrollView>

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/table/demos.md b/packages/dnb-design-system-portal/src/docs/uilib/components/table/demos.md
@@ -10,6 +10,7 @@ TableVariantFixed,
 TableStackedContainer,
 TableContainerEmptyHeaderFooter,
 TableClassHelpers,
+TableWithoutClasses,
 TableLongHeader,
 TableSticky,
 TableStickyMaxHeight,
@@ -112,6 +113,7 @@ With no (empty) `head` and `foot` content.
 
 <PaginationTable />
 
-### Example usage of class helpers
+### Example usage without and with classes
 
+<TableWithoutClasses />
 <TableClassHelpers />
diff --git a/packages/dnb-eufemia/src/components/table/__tests__/Table.screenshot.test.ts b/packages/dnb-eufemia/src/components/table/__tests__/Table.screenshot.test.ts
@@ -32,7 +32,7 @@ describe('Table', () => {
   })
 
   it('have to match a row scope only table layout', async () => {
-    const screenshot = await testPageScreenshot({
+    const screenshot = await makeScreenshot({
       selector: '[data-visual-test="table-row-scope-only"] .dnb-table',
     })
     expect(screenshot).toMatchImageSnapshot()
@@ -53,7 +53,7 @@ describe('Table', () => {
   })
 
   it('have to match table empty container head and foot', async () => {
-    const screenshot = await testPageScreenshot({
+    const screenshot = await makeScreenshot({
       selector: '[data-visual-test="table-container-empty"]',
     })
     expect(screenshot).toMatchImageSnapshot()
@@ -156,6 +156,14 @@ describe('Table', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match table without inner classes', async () => {
+    const selector = '[data-visual-test="table-no-classes"]'
+    const screenshot = await makeScreenshot({
+      selector,
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })
 
 describe('Table with skeleton', () => {

diff --git a/...tests__/__image_snapshots__/table-have-to-match-a-complex-table-layout.snap.png b/...tests__/__image_snapshots__/table-have-to-match-a-complex-table-layout.snap.png
diff --git a/.../__image_snapshots__/table-have-to-match-a-row-scope-only-table-layout.snap.png b/.../__image_snapshots__/table-have-to-match-a-row-scope-only-table-layout.snap.png
diff --git a/...able/__tests__/__image_snapshots__/table-have-to-match-table-container.snap.png b/...able/__tests__/__image_snapshots__/table-have-to-match-table-container.snap.png
diff --git a/...ge_snapshots__/table-have-to-match-table-empty-container-head-and-foot.snap.png b/...ge_snapshots__/table-have-to-match-table-empty-container-head-and-foot.snap.png
diff --git a/.../__tests__/__image_snapshots__/table-have-to-match-table-in-small-size.snap.png b/.../__tests__/__image_snapshots__/table-have-to-match-table-in-small-size.snap.png
diff --git a/...__/__image_snapshots__/table-have-to-match-table-without-inner-classes.snap.png b/...__/__image_snapshots__/table-have-to-match-table-without-inner-classes.snap.png
diff --git a/...shots__/table-with-accordion-have-to-match-expanded-state-on-first-row.snap.png b/...shots__/table-with-accordion-have-to-match-expanded-state-on-first-row.snap.png
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
@@ -5,13 +5,18 @@ exports[`Table scss have to match default theme snapshot 1`] = `
 * Table theme
 *
 */
+/*
+ * Utilities
+ */
 /*
  * Utilities
  */
 .dnb-table {
   text-align: left;
+  /* stylelint-disable */
+  /* stylelint-enable */
 }
-.dnb-table__th {
+.dnb-table__th, .dnb-table thead th {
   padding: 2rem 1rem 1rem;
   font-weight: var(--font-weight-medium);
   color: var(--theme-color-black-80, currentColor);
@@ -20,36 +25,40 @@ exports[`Table scss have to match default theme snapshot 1`] = `
   vertical-align: bottom;
   background-color: var(--color-white);
 }
-.dnb-table__td, tbody > tr > .dnb-table__th {
-  padding: 1rem;
-  color: var(--theme-color-black-80, currentColor);
-  font-size: var(--font-size-basis);
-  line-height: var(--line-height-basis);
-  vertical-align: baseline;
-}
-.dnb-table__size--medium .dnb-table__th {
+.dnb-table__size--medium .dnb-table__th, .dnb-table__size--medium .dnb-table thead th {
   padding: 1.375rem 1rem 0.875rem;
   font-size: var(--font-size-small);
   line-height: var(--line-height-small);
 }
-.dnb-table__size--medium .dnb-table__th .dnb-button__text {
+.dnb-table__size--medium .dnb-table__th .dnb-button__text, .dnb-table__size--medium .dnb-table thead th .dnb-button__text {
   line-height: inherit;
 }
-.dnb-table__size--small .dnb-table__th {
+.dnb-table__size--small .dnb-table__th, .dnb-table__size--small .dnb-table thead th {
   padding: 1.25rem 1rem 0.5rem;
   font-size: var(--font-size-small);
   line-height: var(--line-height-small);
 }
-tbody > tr > .dnb-table__th {
+.dnb-table__td, .dnb-table tbody .dnb-table__th, .dnb-table tbody td, .dnb-table tbody th {
+  padding: 1rem;
+  color: var(--theme-color-black-80, currentColor);
+  font-size: var(--font-size-basis);
+  line-height: var(--line-height-basis);
+  vertical-align: baseline;
+}
+.dnb-table tbody .dnb-table__th, .dnb-table tbody th {
   padding: 1rem;
   vertical-align: baseline;
 }
-.dnb-table__size--medium tbody > tr > .dnb-table__th, .dnb-table__size--medium tbody > tr > .dnb-table__td {
+.dnb-table__size--medium tbody .dnb-table__th, .dnb-table__size--medium tbody .dnb-table__td,
+.dnb-table__size--medium .dnb-table tbody th,
+.dnb-table__size--medium .dnb-table tbody td {
   padding: 0.875rem 1rem;
   font-size: var(--font-size-small);
   line-height: var(--line-height-small);
 }
-.dnb-table__size--small tbody > tr > .dnb-table__th, .dnb-table__size--small tbody > tr > .dnb-table__td {
+.dnb-table__size--small tbody .dnb-table__th, .dnb-table__size--small tbody .dnb-table__td,
+.dnb-table__size--small .dnb-table tbody th,
+.dnb-table__size--small .dnb-table tbody td {
   padding: 0.625rem 1rem;
   font-size: var(--font-size-small);
   line-height: var(--line-height-small);
@@ -96,6 +105,9 @@ exports[`Table scss have to match snapshot 1`] = `
 * Table component
 *
 */
+/*
+ * Utilities
+ */
 /*
 * Button mixins
 *
@@ -449,7 +461,7 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 * Table component
 *
 */
-.dnb-table__th, .dnb-table__td {
+.dnb-table thead th, .dnb-table tbody td, .dnb-table__th, .dnb-table__td {
   position: relative;
   border-spacing: 0;
   word-break: keep-all;

diff --git a/...test-tsx-table-screenshot-have-to-match-a-complex-table-layout-1-c8007.snap.png b/...test-tsx-table-screenshot-have-to-match-a-complex-table-layout-1-c8007.snap.png
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/...x-table-screenshot-have-to-match-a-row-scope-only-table-layout-1-d0bac.snap.png b/...x-table-screenshot-have-to-match-a-row-scope-only-table-layout-1-d0bac.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/...e-screenshot-have-to-match-table-empty-container-head-and-foot-1-3dbc0.snap.png b/...e-screenshot-have-to-match-table-empty-container-head-and-foot-1-3dbc0.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/...th-accordion-screenshot-have-to-match-active-state-on-last-row-1-e0614.snap.png b/...th-accordion-screenshot-have-to-match-active-state-on-last-row-1-e0614.snap.png
diff --git a/...sx-table-with-accordion-screenshot-have-to-match-default-state-1-0d45e.snap.png b/...sx-table-with-accordion-screenshot-have-to-match-default-state-1-0d45e.snap.png
diff --git a/...accordion-screenshot-have-to-match-expanded-state-on-first-row-1-4133b.snap.png b/...accordion-screenshot-have-to-match-expanded-state-on-first-row-1-4133b.snap.png
diff --git a/...ith-accordion-screenshot-have-to-match-focus-state-on-last-row-1-86251.snap.png b/...ith-accordion-screenshot-have-to-match-focus-state-on-last-row-1-86251.snap.png
diff --git a/...th-accordion-screenshot-have-to-match-hover-state-on-first-row-1-0a3aa.snap.png b/...th-accordion-screenshot-have-to-match-hover-state-on-first-row-1-0a3aa.snap.png
diff --git a/...ith-accordion-screenshot-have-to-match-hover-state-on-last-row-1-51bef.snap.png b/...ith-accordion-screenshot-have-to-match-hover-state-on-last-row-1-51bef.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-cell.scss b/packages/dnb-eufemia/src/components/table/style/table-cell.scss
@@ -4,6 +4,8 @@
 */
 
 .dnb-table {
+  & thead th,
+  & tbody td,
   &__th,
   &__td {
     position: relative;

diff --git a/packages/dnb-eufemia/src/components/table/style/table-mixins.scss b/packages/dnb-eufemia/src/components/table/style/table-mixins.scss
@@ -1,3 +1,5 @@
+@import '../../../style/core/utilities.scss';
+
 @mixin tableBorder {
   content: '';
   position: absolute;

diff --git a/packages/dnb-eufemia/src/components/table/style/themes/dnb-table-theme-ui.scss b/packages/dnb-eufemia/src/components/table/style/themes/dnb-table-theme-ui.scss
@@ -10,7 +10,8 @@
   text-align: left;
 
   // head
-  &__th {
+  &__th,
+  & thead th {
     // spacing
     padding: 2rem 1rem 1rem;
 
@@ -22,23 +23,7 @@
     vertical-align: bottom;
 
     background-color: var(--color-white);
-  }
-
-  // body data
-  &__td,
-  tbody > tr > &__th {
-    // spacing
-    padding: 1rem;
-
-    // typography
-    color: var(--theme-color-black-80, currentColor);
-    font-size: var(--font-size-basis);
-    line-height: var(--line-height-basis);
-    vertical-align: baseline;
-  }
 
-  // stylelint-disable-next-line
-  &__th {
     .dnb-table__size--medium & {
       // spacing
       padding: 1.375rem 1rem 0.875rem;
@@ -62,18 +47,35 @@
     }
   }
 
-  // stylelint-disable-next-line
-  tbody > tr > &__th {
+  // body data
+  /* stylelint-disable */
+  &__td,
+  & tbody &__th,
+  & tbody td,
+  & tbody th {
+    // spacing
+    padding: 1rem;
+
+    // typography
+    color: var(--theme-color-black-80, currentColor);
+    font-size: var(--font-size-basis);
+    line-height: var(--line-height-basis);
+    vertical-align: baseline;
+  }
+
+  & tbody &__th,
+  & tbody th {
     // spacing
     padding: 1rem;
 
     // typography
     vertical-align: baseline;
   }
 
-  // stylelint-disable-next-line
-  tbody > tr > &__th,
-  tbody > tr > &__td {
+  tbody &__th,
+  tbody &__td,
+  tbody th,
+  tbody td {
     .dnb-table__size--medium & {
       // spacing
       padding: 0.875rem 1rem;
@@ -92,6 +94,7 @@
       line-height: var(--line-height-small);
     }
   }
+  /* stylelint-enable */
 
   // border
   &:not(&--outline) > tbody > &__tr:last-of-type > &__td::after,