feat(DrawerList): animate max-height when changed during scrolling (#…

…1631)
dnbexperience · Oct 13, 2022 · cf302f7 · cf302f7
1 parent 1a90c72
commit cf302f7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/...ges/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap b/...ges/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap
@@ -1149,6 +1149,7 @@ exports[`DrawerList scss have to match snapshot 1`] = `
   .dnb-drawer-list--scroll .dnb-drawer-list__options {
     min-height: 2rem;
     max-height: 70vh;
+    transition: max-height 300ms var(--easing-default);
     overflow-y: auto;
     overscroll-behavior: contain;
     scrollbar-width: thin;
@@ -1159,6 +1160,9 @@ exports[`DrawerList scss have to match snapshot 1`] = `
       scroll-behavior: smooth; }
     html[data-visual-test] .dnb-drawer-list--scroll .dnb-drawer-list__options {
       scroll-behavior: auto !important; }
+  html[data-visual-test] .dnb-drawer-list--scroll .dnb-drawer-list__options,
+  .dnb-drawer-list--scroll.dnb-drawer-list--no-animation .dnb-drawer-list__options {
+    animation-duration: 1ms !important; }
   .dnb-drawer-list--opened .dnb-drawer-list__options {
     scroll-behavior: smooth; }
   .dnb-drawer-list--no-scroll-animation .dnb-drawer-list__options {

diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/style/_drawer-list.scss b/packages/dnb-eufemia/src/fragments/drawer-list/style/_drawer-list.scss
@@ -137,9 +137,14 @@
   &--scroll &__options {
     min-height: 2rem;
     max-height: 70vh;
+    transition: max-height 300ms var(--easing-default);
 
     @include scrollY(auto);
   }
+  html[data-visual-test] &--scroll &__options,
+  &--scroll#{&}--no-animation &__options {
+    animation-duration: 1ms !important;
+  }
   &--opened &__options {
     scroll-behavior: smooth;
   }