diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap index 85cdfea5033..8cb57beb81a 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/packages/dnb-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 index 0dff13967c3..e60c658bc8f 100644 --- 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 index af26dc0b783..b0bd7c7bb94 100644 --- 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 index ba275a14d16..210220807c7 100644 --- 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; + } + } +}