fix(Table): correct with on medium and small accordion chevron icon c…

…ell (#1901) This PR fixes a css specificity issue on medium and small tables.
dnbexperience · Mar 27, 2023 · 44ec215 · 44ec215
1 parent 7b72085
commit 44ec215
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
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
@@ -753,21 +753,22 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
   --accordion-border-width: 0.0625rem;
   --accordion-border: var(--accordion-border-width) solid
     var(--color-black-20); }
-  .dnb-table__th.dnb-table__th__accordion-icon {
+  .dnb-table__th.dnb-table__th__accordion-icon.dnb-table__th {
     padding: 0; }
-    .dnb-table__th.dnb-table__th__accordion-icon,
+  .dnb-table__th.dnb-table__th__accordion-icon,
+  .dnb-table__th.dnb-table__th__accordion-icon div {
+    width: 3.5rem;
+    text-indent: -300vw; }
+    .dnb-table__size--medium .dnb-table__th.dnb-table__th__accordion-icon, .dnb-table__size--medium
     .dnb-table__th.dnb-table__th__accordion-icon div {
-      width: 3.5rem;
-      text-indent: -300vw; }
-      .dnb-table__size--medium .dnb-table__th.dnb-table__th__accordion-icon, .dnb-table__size--medium
-      .dnb-table__th.dnb-table__th__accordion-icon div {
-        width: 3rem; }
-      .dnb-table__size--small .dnb-table__th.dnb-table__th__accordion-icon, .dnb-table__size--small
-      .dnb-table__th.dnb-table__th__accordion-icon div {
-        width: 2.5rem; }
+      width: 3rem; }
+    .dnb-table__size--small .dnb-table__th.dnb-table__th__accordion-icon, .dnb-table__size--small
+    .dnb-table__th.dnb-table__th__accordion-icon div {
+      width: 2.5rem; }
   .dnb-table__td.dnb-table__td__accordion-icon {
-    padding: 0;
     user-select: none; }
+    .dnb-table__td.dnb-table__td__accordion-icon.dnb-table__td {
+      padding: 0; }
   .dnb-table__tr--has-accordion-content .dnb-table__toggle-button {
     display: flex;
     justify-content: center; }

diff --git a/packages/dnb-eufemia/src/components/table/style/_table-accordion.scss b/packages/dnb-eufemia/src/components/table/style/_table-accordion.scss
@@ -21,7 +21,9 @@
     var(--color-black-20);
 
   &__th#{&}__th__accordion-icon {
-    padding: 0;
+    &.dnb-table__th {
+      padding: 0;
+    }
 
     // In case the table-layout is fixed
     &,
@@ -40,7 +42,9 @@
   }
 
   &__td#{&}__td__accordion-icon {
-    padding: 0;
+    &.dnb-table__td {
+      padding: 0;
+    }
     user-select: none; // prevent selection on double-click
   }