@navikt/ds-css 8.5.0 → 8.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "8.5.0",
+  "version": "8.5.2",
   "description": "CSS for Nav Designsystem",
   "author": "Aksel | Nav designsystem team",
   "keywords": [
@@ -30,7 +30,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^8.5.0",
+    "@navikt/ds-tokens": "^8.5.2",
     "browserslist": "^4.25.0",
     "esbuild": "^0.27.2",
     "fast-glob": "3.3.3",

package/src/data-table.css

@@ -1,23 +1,18 @@
+/* stylelint-disable no-duplicate-selectors */
+
 .aksel-data-table__border-wrapper {
-  border: 1px solid var(--ax-border-neutral-subtle);
-  border-radius: var(--ax-radius-12);
-  overflow: hidden;
-  flex-grow: 1;
+  /* display:flex and max-height:100% is needed for a "no page scroll" layout */
+  display: flex;
+  max-height: 100%;
 }
 
 .aksel-data-table__scroll-wrapper {
   overflow: auto;
   width: 100%;
-  height: 100%;
   position: relative;
 }
 
 .aksel-data-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  table-layout: fixed;
-  width: 1px; /* This is for some reason needed to make the browser respect the column width. TODO: Test in all browsers */
-
   /*
   We should NOT set min-width:100% b.c. it will cause inconsistencies in column resizing.
   We could discuss whether it matters, though. But it feels buggy.
@@ -26,28 +21,37 @@
   We could have a toggle for the resize feature, and let the consumer decide which downside they prefer. Might need that anyways.
   */
 
+  &[data-layout="fixed"] {
+    table-layout: fixed;
+    width: 1px; /* This is for some reason needed to make the browser respect the column width. TODO: Test in all browsers */
+  }
+
+  &[data-layout="auto"] {
+    min-width: 100%;
+  }
+
   --__axc-data-table-density: var(--ax-space-16) 0;
 
   &[data-density="condensed"] {
-    --__axc-data-table-density: 0 0;
+    --__axc-data-table-density: var(--ax-space-8) 0;
   }
 
   &[data-density="spacious"] {
     --__axc-data-table-density: var(--ax-space-32) 0;
   }
-}
 
-.aksel-data-table--zebra-stripes {
-  & .aksel-data-table__tbody :where(.aksel-data-table__tr:nth-child(odd)) {
-    background-color: var(--ax-bg-neutral-softA);
+  &[data-zebra-stripes="true"] {
+    & .aksel-data-table__tbody :where(.aksel-data-table__tr:nth-child(odd)) {
+      background-color: var(--ax-bg-neutral-softA);
+    }
   }
-}
 
-.aksel-data-table--truncate-content {
-  .aksel-data-table__td > div:not(:has(> .aksel-checkbox)) {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+  &[data-truncate-content="true"] {
+    .aksel-data-table__td > div {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
   }
 }
 
@@ -55,17 +59,12 @@
   background-color: var(--ax-bg-raised);
   position: sticky;
   top: 0;
-  box-shadow: 0 1px 0 0 var(--ax-border-neutral-subtle);
 }
 
 .aksel-data-table__tbody {
   background-color: var(--ax-bg-raised);
 }
 
-.aksel-data-table__tr {
-  border: none;
-}
-
 .aksel-data-table__tr--selected {
   background-color: var(--ax-bg-softA);
   box-shadow:
@@ -84,20 +83,51 @@
   }
 }
 
+/* BORDER STYLING START */
+
+.aksel-data-table__border-wrapper {
+  border-radius: var(--ax-radius-12);
+  overflow: hidden;
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border: 1px solid var(--ax-border-neutral-subtle);
+    border-radius: var(--ax-radius-12);
+  }
+}
+
+.aksel-data-table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  border-right: 1px solid var(--ax-border-neutral-subtle);
+  border-bottom: 1px solid var(--ax-border-neutral-subtle);
+}
+
+.aksel-data-table__thead {
+  box-shadow: 0 1px 0 0 var(--ax-border-neutral-subtle);
+}
+
+.aksel-data-table__th,
+.aksel-data-table__td {
+  /* border doesn't work on sticky thead when we have collapsed borders, so using box-shadow instead */
+  box-shadow: inset 1px 1px 0 0 var(--ax-border-neutral-subtle);
+}
+
+/* BORDER STYLING END */
+
 .aksel-data-table__th {
   position: relative;
   background-color: var(--ax-bg-neutral-soft);
   color: var(--ax-text-neutral);
   padding: var(--ax-space-8) var(--ax-space-16);
   text-align: start;
-  border-block-end: 1px solid var(--ax-border-neutral-subtle);
-
-  &:not(:first-child) {
-    border-inline-start: 1px solid var(--ax-border-neutral-subtle);
-  }
 }
 
-.aksel-data-table__th-content:not(:has(> .aksel-checkbox)) {
+.aksel-data-table__th-content {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -132,6 +162,15 @@
   &:active::after {
     background: var(--ax-bg-strong-pressed);
   }
+
+  .aksel-data-table__th:last-child & {
+    inset-inline-end: 0;
+    width: 15px;
+
+    &::after {
+      inset-inline-end: 0;
+    }
+  }
 }
 
 .aksel-data-table__th-action-button {
@@ -157,22 +196,11 @@
 .aksel-data-table__td {
   text-align: start;
   vertical-align: middle;
-  border-block-end: 1px solid var(--ax-border-neutral-subtle);
-  border-block-start: 1px solid var(--ax-bg-raised);
   color: var(--ax-text-neutral-subtle);
-  padding: var(--__axc-data-table-density);
-  padding-inline: 1rem;
-
-  &:not(:first-child) {
-    border-inline-start: 1px solid var(--ax-border-neutral-subtle);
-  }
-
-  .aksel-data-table__tfoot .aksel-data-table__tr:last-child & {
-    border-block-end: none;
-  }
 
-  .aksel-data-table:not(:has(.aksel-data-table__tfoot)) .aksel-data-table__tr:not(.aksel-data-table__tr--selected):last-child & {
-    border-block-end: none;
+  > div {
+    padding: var(--__axc-data-table-density);
+    padding-inline: 1rem;
   }
 }
 

package/src/timeline.css

@@ -177,7 +177,7 @@
 .aksel-timeline__pin-wrapper::before {
   content: "";
   top: 0.9rem;
-  height: calc(100% - 0.9rem * 2);
+  height: calc(100% - 2rem);
   width: 1px;
   margin: 0 auto;
   background: var(--ax-border-neutral-strong);