Accordion: change: do animation similar to ExpansionCard (#3491)

* Accordion: change: do animation similar to ExpansionCard * changeset * change: comment expansioncard -> accordion * don't need changeset for unreleased code * 🚧 attempt to smooth out expansion of accordion * working animation * Update @navikt/core/css/darkside/accordion.darkside.css Co-authored-by: Ken <[email protected]> * accordion: remove border-bottom on content, add on item * Update @navikt/core/css/darkside/accordion.darkside.css Co-authored-by: Ken <[email protected]> * Accordion: only set box-shadow line for indented items --------- Co-authored-by: Ken <[email protected]>
navikt · Jan 31, 2025 · 163c1bc · 163c1bc
1 parent 8ee604e
commit 163c1bc
Showing 1 changed file with 46 additions and 53 deletions.
diff --git a/@navikt/core/css/darkside/accordion.darkside.css b/@navikt/core/css/darkside/accordion.darkside.css
@@ -57,7 +57,7 @@
 }
 
 .navds-accordion--small .navds-accordion__header {
-  padding-block: var(--a-spacing-2);
+  padding-block: var(--ax-space-8);
 }
 
 .navds-accordion__header::before,
@@ -73,10 +73,6 @@
   background-color: var(--ax-border-subtleA);
 }
 
-.navds-accordion__item:last-child > .navds-accordion__content {
-  border-bottom: 1px solid transparent;
-}
-
 .navds-accordion__header::after {
   top: initial;
   bottom: 0;
@@ -115,67 +111,64 @@
 }
 
 /* ---------------------------- Accordion content --------------------------- */
-.navds-accordion__content {
-  --__acx-accordion-content-line-width: 2px;
-
-  padding-inline: var(--ax-space-24) var(--ax-space-12);
-  display: none;
-  overflow: hidden;
-  padding-block: 0;
-  max-height: 0;
-  border-color: transparent;
-  transition: all 250ms cubic-bezier(0.2, 0, 0, 1) allow-discrete;
-  animation: navds-accordion-content-animation 250ms cubic-bezier(0.2, 0, 0, 1);
-}
-
-.navds-accordion__item--no-animation {
-  animation: none;
-}
 
-@keyframes navds-accordion-content-animation {
-  0% {
-    opacity: 0.01;
-  }
-
-  20% {
-    opacity: 0.01;
-  }
+.navds-accordion--indent > .navds-accordion__item .navds-accordion__content-inner {
+  padding-block: var(--ax-space-8);
+  padding-inline: calc(var(--ax-space-20) + 2px) var(--ax-space-20);
 
-  100% {
-    opacity: 1;
+  @media (forced-colors: active) {
+    border-left: 1px solid canvastext;
   }
 }
 
 .navds-accordion--indent > .navds-accordion__item > .navds-accordion__content {
-  padding-inline: var(--ax-space-24) var(--ax-space-12);
+  box-shadow: -2px 0 0 0 var(--ax-border-subtleA);
 }
 
-.navds-accordion--indent > .navds-accordion__item .navds-accordion__content-inner {
-  box-shadow: -2px 0 0 0 var(--ax-border-subtleA);
-  padding-block: var(--ax-space-8);
+.navds-accordion__item {
+  & > .navds-accordion__content {
+    display: grid;
+    grid-template-rows: 0fr;
+    visibility: hidden;
+    overflow: hidden;
+    margin-inline: var(--ax-space-24) var(--ax-space-12);
+    margin-block: 0;
+    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
+    transition-duration: 250ms;
+    transition-property: visibility, opacity, grid-template-rows, margin, min-height;
+    border-color: transparent;
+    opacity: 0;
 
-  /* Aligns content with heading-section */
-  padding-inline: calc(var(--ax-space-20) + 2px) var(--ax-space-20);
+    & .navds-accordion__content-inner {
+      min-height: 0;
+      padding-block: 0;
+    }
+  }
 
-  @media (forced-colors: active) {
-    border-left: 1px solid canvastext;
+  &[data-expanded="true"] {
+    & > .navds-accordion__content {
+      grid-template-rows: 1fr;
+      visibility: visible;
+      margin-block: var(--ax-space-8);
+      margin-block-end: var(--ax-space-24);
+      border-color: var(--ax-border-subtleA);
+      opacity: 1;
+
+      & .navds-accordion__content-inner {
+        min-height: fit-content;
+      }
+    }
+
+    &:last-child {
+      border-bottom: 1px solid var(--ax-border-subtleA);
+    }
   }
 }
 
-.navds-accordion__item[data-expanded="true"] > .navds-accordion__content {
-  display: block;
-  opacity: 1;
-  overflow: visible;
-  max-height: fit-content;
-  padding-block: var(--ax-space-8);
-  padding-block-end: var(--ax-space-24);
-  border-color: var(--ax-border-subtleA);
-}
+/* ---------------- Accordion No Animation (defaultOpen) ---------------- */
 
-@starting-style {
-  .navds-accordion__item[data-expanded="true"]:not(.navds-accordion__item--no-animation) > .navds-accordion__content {
-    padding-block: 0;
-    max-height: 0;
-    border-color: transparent;
+.navds-accordion__item--no-animation {
+  & > .navds-accordion__content {
+    transition: none;
   }
 }