Table: Removed border-bottom for HeaderCell used in ExpandableRow (#3503

) * Use HeaderCell for name in expandable table example * 🐛 Removed border-bottom for HeaderCell used inside ExpandableRow --------- Co-authored-by: Ken <ken.aleksander@gmail.com>
navikt · Jan 17, 2025 · 54495a4 · 54495a4
1 parent 8b5bfb4
commit 54495a4
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 16 deletions.
diff --git a/.changeset/wise-paws-itch.md b/.changeset/wise-paws-itch.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-css": patch
+---
+
+Table: Removed border-bottom for HeaderCell used in ExpandableRow.
diff --git a/@navikt/core/css/darkside/table.darkside.css b/@navikt/core/css/darkside/table.darkside.css
@@ -149,22 +149,18 @@
   flex-shrink: 0;
 }
 
-.navds-table__expandable-row:not(.navds-table__expandable-row--open) .navds-table__data-cell {
+.navds-table__expandable-row:not(.navds-table__expandable-row--open) :where(.navds-table__data-cell, .navds-table__header-cell) {
   transition: border-bottom-color 150ms cubic-bezier(0.95, 0.05, 0.8, 0.04);
 }
 
 .navds-table__expandable-row.navds-table__expandable-row--clickable:not(.navds-table__expandable-row--expansion-disabled):hover {
   cursor: pointer;
 }
 
-.navds-table__expandable-row--open .navds-table__data-cell {
+.navds-table__expandable-row--open :where(.navds-table__data-cell, .navds-table__header-cell) {
   border-bottom-color: transparent;
 }
 
-.navds-table__expandable-row--open .navds-table__header-cell {
-  border-color: var(--ax-border-default);
-}
-
 .navds-table__expandable-row--open .navds-table__toggle-expand-cell--open {
   border-color: transparent;
 }

diff --git a/@navikt/core/css/table.css b/@navikt/core/css/table.css
@@ -156,22 +156,18 @@
   flex-shrink: 0;
 }
 
-.navds-table__expandable-row:not(.navds-table__expandable-row--open) .navds-table__data-cell {
+.navds-table__expandable-row:not(.navds-table__expandable-row--open) :where(.navds-table__data-cell, .navds-table__header-cell) {
   transition: border-bottom-color 190ms cubic-bezier(0.6, 0.04, 0.98, 0.335);
 }
 
 .navds-table__expandable-row.navds-table__expandable-row--clickable:not(.navds-table__expandable-row--expansion-disabled):hover {
   cursor: pointer;
 }
 
-.navds-table__expandable-row--open .navds-table__data-cell {
+.navds-table__expandable-row--open :where(.navds-table__data-cell, .navds-table__header-cell) {
   border-bottom-color: transparent;
 }
 
-.navds-table__expandable-row--open .navds-table__header-cell {
-  border-color: var(--ac-table-row-border, var(--a-border-default));
-}
-
 .navds-table__expandable-row--open .navds-table__toggle-expand-cell--open {
   border-color: transparent;
 }

diff --git a/@navikt/core/react/src/table/stories/table-2-expandable.stories.tsx b/@navikt/core/react/src/table/stories/table-2-expandable.stories.tsx
@@ -32,9 +32,13 @@ export const Expandable = () => {
             togglePlacement="right"
             defaultOpen
           >
-            {columns.map(({ key }) => (
-              <Table.DataCell key={key}>{row[key]}</Table.DataCell>
-            ))}
+            {columns.map(({ key }, index) =>
+              index === 0 ? (
+                <Table.HeaderCell key={key}>{row[key]}</Table.HeaderCell>
+              ) : (
+                <Table.DataCell key={key}>{row[key]}</Table.DataCell>
+              ),
+            )}
           </Table.ExpandableRow>
         ))}
       </Table.Body>

diff --git a/aksel.nav.no/website/pages/eksempler/table/expandable.tsx b/aksel.nav.no/website/pages/eksempler/table/expandable.tsx
@@ -19,7 +19,7 @@ const Example = () => {
               key={i + fnr}
               content="Innhold i ekspanderbar rad"
             >
-              <Table.DataCell scope="row">{name}</Table.DataCell>
+              <Table.HeaderCell scope="row">{name}</Table.HeaderCell>
               <Table.DataCell>{fnr}</Table.DataCell>
               <Table.DataCell>{format(new Date(start))}</Table.DataCell>
             </Table.ExpandableRow>