fix: fix #dropdown list position to be more relatable

dnbexperience · Apr 14, 2019 · 1ab03cf · 1ab03cf
1 parent 3669229
commit 1ab03cf
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
@@ -625,18 +625,18 @@ exports[`Dropdown scss have to match snapshot 1`] = `
 @keyframes dropdownSlideDown {
   from {
     opacity: 0;
-    transform: translateY(0); }
+    transform: translateY(calc(1px - var(--dropdown-height))); }
   to {
     opacity: 1;
-    transform: translateY(calc(var(--dropdown-height) + 1px)); } }
+    transform: translateY(0); } }
 
 @keyframes dropdownSlideUp {
   from {
     opacity: 1;
-    transform: translateY(var(--dropdown-height)); }
+    transform: translateY(0); }
   to {
     opacity: 0;
-    transform: translateY(0); } }
+    transform: translateY(calc(1px - var(--dropdown-height))); } }
 
 .dnb-dropdown {
   display: inline-flex;
@@ -665,7 +665,8 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   .dnb-dropdown__list {
     position: absolute;
     z-index: 3;
-    top: 0;
+    top: calc( var(--dropdown-height) + var(--dropdown-focus-border-width) - 1px);
+    bottom: auto;
     left: 0;
     right: 0;
     width: 100%;
@@ -676,7 +677,7 @@ exports[`Dropdown scss have to match snapshot 1`] = `
     transition: transform 200ms, opacity 160ms ease-out; }
   .dnb-dropdown--direction-top .dnb-dropdown__list {
     top: auto;
-    bottom: calc( var(--dropdown-height) * 2 + var(--dropdown-focus-border-width)); }
+    bottom: calc( var(--dropdown-height) + var(--dropdown-focus-border-width) - 1px); }
   .dnb-dropdown__options {
     display: flex;
     flex-direction: column;

diff --git a/packages/dnb-ui-lib/src/components/dropdown/style/_dropdown.scss b/packages/dnb-ui-lib/src/components/dropdown/style/_dropdown.scss
@@ -41,22 +41,22 @@
 @keyframes dropdownSlideDown {
   from {
     opacity: 0;
-    transform: translateY(0);
+    transform: translateY(calc(1px - var(--dropdown-height)));
   }
   to {
     opacity: 1;
-    transform: translateY(calc(var(--dropdown-height) + 1px));
+    transform: translateY(0);
   }
 }
 
 @keyframes dropdownSlideUp {
   from {
     opacity: 1;
-    transform: translateY(var(--dropdown-height));
+    transform: translateY(0);
   }
   to {
     opacity: 0;
-    transform: translateY(0);
+    transform: translateY(calc(1px - var(--dropdown-height)));
   }
 }
 
@@ -104,7 +104,10 @@
   &__list {
     position: absolute;
     z-index: 3;
-    top: 0;
+    top: calc(
+      var(--dropdown-height) + var(--dropdown-focus-border-width) - 1px
+    );
+    bottom: auto;
     left: 0;
     right: 0;
 
@@ -121,7 +124,7 @@
   &--direction-top &__list {
     top: auto;
     bottom: calc(
-      var(--dropdown-height) * 2 + var(--dropdown-focus-border-width)
+      var(--dropdown-height) + var(--dropdown-focus-border-width) - 1px
     );
   }