fix(Dropdown): align tertiary dropdown triangle icon with button (#4023)

dnbexperience · Sep 30, 2024 · 1527d70 · 1527d70
1 parent 8434de9
commit 1527d70
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 30 deletions.
diff --git a/...nb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/...nb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -2142,12 +2142,6 @@ button .dnb-form-status__text {
 .dnb-dropdown__row {
   display: inline-flex;
 }
-.dnb-dropdown--large .dnb-drawer-list__triangle {
-  margin-left: calc(var(--dropdown-padding-horizontal) - 0.25rem);
-}
-.dnb-dropdown--icon-position-left.dnb-dropdown--large .dnb-drawer-list__triangle {
-  margin-left: calc(var(--dropdown-padding-horizontal) + 0.25rem);
-}
 .dnb-dropdown__icon {
   position: relative;
   order: 2;
@@ -2389,6 +2383,13 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
   }
 }
 
+.dnb-drawer-list--triangle-position-left .dnb-dropdown__list--tertiary .dnb-drawer-list__triangle {
+  margin-left: 0.5rem;
+}
+.dnb-drawer-list--triangle-position-right .dnb-dropdown__list--tertiary .dnb-drawer-list__triangle {
+  margin-right: 0.5rem;
+}
+
 /*
 * Used for snapshot testing
 *

diff --git a/packages/dnb-eufemia/src/components/dropdown/Dropdown.js b/packages/dnb-eufemia/src/components/dropdown/Dropdown.js
@@ -646,7 +646,10 @@ class DropdownInstance extends React.PureComponent {
                 id={id}
                 role={handleAsMenu ? 'menu' : 'listbox'}
                 portal_class={portal_class}
-                list_class="dnb-dropdown__list"
+                list_class={classnames(
+                  'dnb-dropdown__list',
+                  variant === 'tertiary' && 'dnb-dropdown__list--tertiary'
+                )}
                 value={selected_item}
                 default_value={default_value}
                 scrollable={scrollable}

diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap b/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
@@ -819,12 +819,6 @@ button .dnb-form-status__text {
 .dnb-dropdown__row {
   display: inline-flex;
 }
-.dnb-dropdown--large .dnb-drawer-list__triangle {
-  margin-left: calc(var(--dropdown-padding-horizontal) - 0.25rem);
-}
-.dnb-dropdown--icon-position-left.dnb-dropdown--large .dnb-drawer-list__triangle {
-  margin-left: calc(var(--dropdown-padding-horizontal) + 0.25rem);
-}
 .dnb-dropdown__icon {
   position: relative;
   order: 2;
@@ -1064,6 +1058,13 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
   .dnb-responsive-component .dnb-dropdown__helper {
     display: none;
   }
+}
+
+.dnb-drawer-list--triangle-position-left .dnb-dropdown__list--tertiary .dnb-drawer-list__triangle {
+  margin-left: 0.5rem;
+}
+.dnb-drawer-list--triangle-position-right .dnb-dropdown__list--tertiary .dnb-drawer-list__triangle {
+  margin-right: 0.5rem;
 }"
 `;
 

diff --git a/packages/dnb-eufemia/src/components/dropdown/style/dnb-dropdown.scss b/packages/dnb-eufemia/src/components/dropdown/style/dnb-dropdown.scss
@@ -56,23 +56,6 @@
     display: inline-flex;
   }
 
-  // NB: looks like we don't need this anymore!
-  // &--default .dnb-drawer-list__list {
-  //   top: var(--dropdown-height);
-  //   bottom: auto;
-  // }
-  // &--default#{&}--top .dnb-drawer-list__list {
-  //   bottom: var(--dropdown-height);
-  //   top: auto;
-  // }
-
-  &--large .dnb-drawer-list__triangle {
-    margin-left: calc(var(--dropdown-padding-horizontal) - 0.25rem);
-  }
-  &--icon-position-left#{&}--large .dnb-drawer-list__triangle {
-    margin-left: calc(var(--dropdown-padding-horizontal) + 0.25rem);
-  }
-
   &__icon {
     position: relative;
     order: 2;
@@ -391,3 +374,20 @@
     }
   }
 }
+
+.dnb-drawer-list--triangle-position {
+  // Cant access --dropdown-padding-horizontal, as the drawer list is outside of the dropdown scope
+  &-left {
+    .dnb-dropdown__list--tertiary .dnb-drawer-list__triangle {
+      // --dropdown-padding-horizontal divided by two
+      margin-left: 0.5rem;
+    }
+  }
+
+  &-right {
+    .dnb-dropdown__list--tertiary .dnb-drawer-list__triangle {
+      // --dropdown-padding-horizontal divided by two
+      margin-right: 0.5rem;
+    }
+  }
+}