update disabled styling. Fix sbanken item height

dnbexperience · Oct 25, 2024 · 9f924ee · 9f924ee
1 parent dc19eea
commit 9f924ee
Show file tree

Hide file tree

Showing 32 changed files with 43 additions and 28 deletions.
diff --git a/...hots__/autocomplete-for-sbanken-have-to-match-autocomplete-opened-list.snap.png b/...hots__/autocomplete-for-sbanken-have-to-match-autocomplete-opened-list.snap.png
diff --git a/...autocomplete-for-sbanken-have-to-match-autocomplete-with-search-result.snap.png b/...autocomplete-for-sbanken-have-to-match-autocomplete-with-search-result.snap.png
diff --git a/.../autocomplete-for-sbanken-have-to-match-autocomplete-with-suffix-value.snap.png b/.../autocomplete-for-sbanken-have-to-match-autocomplete-with-suffix-value.snap.png
diff --git a/...ge_snapshots__/autocomplete-for-sbanken-have-to-match-disabled-options.snap.png b/...ge_snapshots__/autocomplete-for-sbanken-have-to-match-disabled-options.snap.png
diff --git a/...snapshots__/autocomplete-for-ui-have-to-match-autocomplete-opened-list.snap.png b/...snapshots__/autocomplete-for-ui-have-to-match-autocomplete-opened-list.snap.png
diff --git a/...ts__/autocomplete-for-ui-have-to-match-autocomplete-with-search-result.snap.png b/...ts__/autocomplete-for-ui-have-to-match-autocomplete-with-search-result.snap.png
diff --git a/...ots__/autocomplete-for-ui-have-to-match-autocomplete-with-suffix-value.snap.png b/...ots__/autocomplete-for-ui-have-to-match-autocomplete-with-suffix-value.snap.png
diff --git a/...__image_snapshots__/autocomplete-for-ui-have-to-match-disabled-options.snap.png b/...__image_snapshots__/autocomplete-for-ui-have-to-match-disabled-options.snap.png
diff --git a/...apshots__/dropdown-for-sbanken-have-to-match-different-item-directions.snap.png b/...apshots__/dropdown-for-sbanken-have-to-match-different-item-directions.snap.png
diff --git a/..._image_snapshots__/dropdown-for-sbanken-have-to-match-disabled-options.snap.png b/..._image_snapshots__/dropdown-for-sbanken-have-to-match-disabled-options.snap.png
diff --git a/...down-for-sbanken-have-to-match-the-dropdown-action-menu-in-mobile-view.snap.png b/...down-for-sbanken-have-to-match-the-dropdown-action-menu-in-mobile-view.snap.png
diff --git a/...n-for-sbanken-have-to-match-the-dropdown-action-menu-with-custom-items.snap.png b/...n-for-sbanken-have-to-match-the-dropdown-action-menu-with-custom-items.snap.png
diff --git a/...or-sbanken-have-to-match-the-dropdown-as-more-menu-opened-on-left-side.snap.png b/...or-sbanken-have-to-match-the-dropdown-as-more-menu-opened-on-left-side.snap.png
diff --git a/...r-sbanken-have-to-match-the-dropdown-as-more-menu-opened-on-right-side.snap.png b/...r-sbanken-have-to-match-the-dropdown-as-more-menu-opened-on-right-side.snap.png
diff --git a/...mage_snapshots__/dropdown-for-sbanken-have-to-match-the-dropdown-items.snap.png b/...mage_snapshots__/dropdown-for-sbanken-have-to-match-the-dropdown-items.snap.png
diff --git a/...own-for-sbanken-have-to-match-the-tertiary-variant-opened-on-left-side.snap.png b/...own-for-sbanken-have-to-match-the-tertiary-variant-opened-on-left-side.snap.png
diff --git a/...wn-for-sbanken-have-to-match-the-tertiary-variant-opened-on-right-side.snap.png b/...wn-for-sbanken-have-to-match-the-tertiary-variant-opened-on-right-side.snap.png
diff --git a/...ge_snapshots__/dropdown-for-ui-have-to-match-different-item-directions.snap.png b/...ge_snapshots__/dropdown-for-ui-have-to-match-different-item-directions.snap.png
diff --git a/...s__/__image_snapshots__/dropdown-for-ui-have-to-match-disabled-options.snap.png b/...s__/__image_snapshots__/dropdown-for-ui-have-to-match-disabled-options.snap.png
diff --git a/.../dropdown-for-ui-have-to-match-the-dropdown-action-menu-in-mobile-view.snap.png b/.../dropdown-for-ui-have-to-match-the-dropdown-action-menu-in-mobile-view.snap.png
diff --git a/...opdown-for-ui-have-to-match-the-dropdown-action-menu-with-custom-items.snap.png b/...opdown-for-ui-have-to-match-the-dropdown-action-menu-with-custom-items.snap.png
diff --git a/...own-for-ui-have-to-match-the-dropdown-as-more-menu-opened-on-left-side.snap.png b/...own-for-ui-have-to-match-the-dropdown-as-more-menu-opened-on-left-side.snap.png
diff --git a/...wn-for-ui-have-to-match-the-dropdown-as-more-menu-opened-on-right-side.snap.png b/...wn-for-ui-have-to-match-the-dropdown-as-more-menu-opened-on-right-side.snap.png
diff --git a/...dropdown-for-ui-have-to-match-the-tertiary-variant-opened-on-left-side.snap.png b/...dropdown-for-ui-have-to-match-the-tertiary-variant-opened-on-left-side.snap.png
diff --git a/...ropdown-for-ui-have-to-match-the-tertiary-variant-opened-on-right-side.snap.png b/...ropdown-for-ui-have-to-match-the-tertiary-variant-opened-on-right-side.snap.png
diff --git a/...apshots__/drawerlist-for-sbanken-have-to-match-the-default-drawer-list.snap.png b/...apshots__/drawerlist-for-sbanken-have-to-match-the-default-drawer-list.snap.png
diff --git a/...e_snapshots__/drawerlist-for-sbanken-have-to-match-the-disabled-option.snap.png b/...e_snapshots__/drawerlist-for-sbanken-have-to-match-the-disabled-option.snap.png
diff --git a/..._image_snapshots__/drawerlist-for-ui-have-to-match-the-disabled-option.snap.png b/..._image_snapshots__/drawerlist-for-ui-have-to-match-the-disabled-option.snap.png
diff --git a/...es/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.tsx.snap b/...es/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`DrawerList scss has to match style dependencies css 1`] = `
   --drawer-list-list-background: var(--color-white);
   --drawer-list-list-line-height: var(--line-height-basis);
   --drawer-bg-disabled: var(--color-black-8);
-  --drawer-color-disabled: var(--color-black-80);
+  --drawer-color-disabled: var(--color-black-55);
   display: block;
   position: relative;
   width: inherit;
@@ -459,10 +459,10 @@ html[data-whatinput=mouse] .dnb-drawer-list__options--focusring {
   content: "";
   position: absolute;
   z-index: 2;
-  top: auto;
+  top: 0;
   left: 0;
   right: 0;
-  bottom: 0;
+  bottom: auto;
   height: var(--drawer-list-option-border-width);
   background-color: var(--color-mint-green-25);
 }
@@ -561,7 +561,7 @@ html[data-whatinput=keyboard] .dnb-drawer-list__option--selected.dnb-drawer-list
 .dnb-drawer-list__option.last-of-type, .dnb-drawer-list__option--focus.last-of-type .dnb-drawer-list__option__inner, .dnb-drawer-list__option--focus.last-of-type .dnb-drawer-list__option__inner::before {
   border-radius: 0 0 var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius);
 }
-.dnb-drawer-list__option.last-of-type:not(.dnb-drawer-list__option--focus) .dnb-drawer-list__option__inner::before {
+.dnb-drawer-list__option.first-of-type:not(.dnb-drawer-list__option--focus) .dnb-drawer-list__option__inner::before {
   content: none;
 }
 .dnb-drawer-list__option--selected .dnb-drawer-list__option__item .dnb-anchor:focus {
@@ -589,6 +589,9 @@ html[data-whatinput=keyboard] .dnb-drawer-list__option--selected .dnb-drawer-lis
 .dnb-drawer-list--top .dnb-drawer-list__option--focus.closest-to-top .dnb-drawer-list__option__inner::before {
   border-radius: var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius) 0 0;
 }
+.dnb-drawer-list__option[disabled] + .dnb-drawer-list__option[disabled]:not(.dnb-drawer-list__option--focus) .dnb-drawer-list__option__inner::before {
+  background-color: var(--color-black-20);
+}
 .dnb-drawer-list__status--error:not(.dnb-drawer-list--opened) .dnb-drawer-list__icon {
   color: var(--color-fire-red);
 }

diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/style/dnb-drawer-list.scss b/packages/dnb-eufemia/src/fragments/drawer-list/style/dnb-drawer-list.scss
@@ -58,7 +58,7 @@
   --drawer-list-list-background: var(--color-white);
   --drawer-list-list-line-height: var(--line-height-basis);
   --drawer-bg-disabled: var(--color-black-8);
-  --drawer-color-disabled: var(--color-black-80);
+  --drawer-color-disabled: var(--color-black-55);
 
   display: block; // has to be block element so we can se the content
   position: relative;

diff --git a/...ges/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-sbanken.scss b/...ges/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-sbanken.scss
@@ -13,9 +13,13 @@
   --drawer-list-options-border-radius: 0 0 0.5rem 0.5rem;
   --drawer-list-options-border-radius-reversed: 0.5rem 0.5rem 0 0;
   --drawer-list-option-border-width: 0.125rem;
+  --drawer-list-option-border-color: transparent;
   --drawer-list-option-inner-border-display: none;
   --drawer-list-option-inner-background: transparent;
   --drawer-list-list-background: var(--sb-color-white);
+  --drawer-list-list-option-background: transparent;
+  --drawer-bg-disabled: var(--sb-color-gray-light);
+  --drawer-color-disabled: var(--sb-color-gray-dark-2);
 
   &__list {
     margin-top: calc(
@@ -31,14 +35,14 @@
 
   &__option__inner {
     overflow: visible;
-    background-color: inherit;
     padding: 1rem 0.75rem;
+    margin: 0 var(--drawer-list-option-border-width);
 
     &::before {
       content: '';
       display: block;
       position: absolute;
-      bottom: -3px;
+      top: -1px;
       left: 0.5rem;
       width: calc(100% - 1rem);
       height: 1px;
@@ -56,20 +60,17 @@
   }
 
   &__option {
-    border: var(--drawer-list-option-border-width) solid
-      var(--sb-color-gray-dark-2);
-    border-bottom-color: transparent;
-    border-top-color: transparent;
-    border-right-color: transparent; // Fix ugly border with scrollbar
-    background-color: transparent;
+    box-shadow: inset 0 0 0 var(--drawer-list-option-border-width)
+      var(--drawer-list-option-border-color);
+    background: var(--drawer-list-list-option-background);
     z-index: 0;
 
     &__item.item-nr-1 {
       font-weight: var(--font-weight-medium);
     }
 
     @include hover() {
-      border-color: var(--sb-color-violet);
+      --drawer-list-option-border-color: var(--sb-color-violet);
       z-index: 1;
 
       .dnb-drawer-list__option__inner::before {
@@ -78,7 +79,7 @@
     }
 
     @include active() {
-      border-color: var(--sb-color-violet);
+      --drawer-list-option-border-color: var(--sb-color-violet);
       z-index: 1;
 
       .dnb-drawer-list__option__inner::before {
@@ -87,7 +88,7 @@
     }
 
     &--selected {
-      background-color: var(--sb-color-violet);
+      --drawer-list-list-option-background: var(--sb-color-violet);
       color: var(--sb-color-white);
       border-right-color: var(
         --sb-color-gray-dark-2
@@ -122,28 +123,33 @@
     @include allAbove(small) {
       &--selected &__suffix {
         z-index: 2; // over check icon
-        background-color: inherit; // to "hide" the check icon
+        background-color: var(
+          --drawer-list-list-option-background
+        ); // to "hide" the check icon
       }
     }
 
+    &.first-of-type &__inner::before {
+      content: none;
+    }
+
     &.last-of-type {
       border-radius: var(--drawer-list-options-border-radius);
-
-      .dnb-drawer-list__option__inner::before {
-        display: none;
-      }
     }
 
     &:focus-visible,
     &--focus {
-      border-color: var(--sb-color-blue-dark);
-      outline: 0.0625rem solid var(--sb-color-blue-dark);
-      background-color: var(--sb-color-blue-light-3);
+      --drawer-list-option-border-color: var(--sb-color-blue-dark);
+      --drawer-list-list-option-background: var(--sb-color-blue-light-3);
       color: var(--sb-color-blue-dark);
       font-weight: var(--sb-font-weight-medium);
       z-index: 1;
 
       /* stylelint-disable no-descending-specificity */
+      .dnb-drawer-list__option__inner {
+        --drawer-list-option-inner-background: transparent;
+      }
+
       .dnb-drawer-list__option__inner::before {
         display: var(--drawer-list-option-inner-border-display);
       }

diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss b/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss
@@ -54,17 +54,16 @@
       content: '';
       position: absolute;
       z-index: 2;
-      top: auto;
+      top: 0;
       left: 0;
       right: 0;
-      bottom: 0;
+      bottom: auto;
 
       // width: 100%; // 100% width would result in no margin right
       height: var(--drawer-list-option-border-width);
 
       background-color: var(--color-mint-green-25);
     }
-
     &__item.item-nr-1 {
       font-weight: var(--font-weight-medium);
     }
@@ -197,7 +196,7 @@
     }
 
     // remove last bottom border
-    &.last-of-type:not(#{&}--focus) &__inner::before {
+    &.first-of-type:not(#{&}--focus) &__inner::before {
       content: none;
     }
 
@@ -234,6 +233,13 @@
       var(--drawer-list-options-border-radius) 0 0;
   }
 
+  // disabled
+  &__option[disabled]
+    + &__option[disabled]:not(#{&}__option--focus)
+    &__option__inner::before {
+    background-color: var(--color-black-20);
+  }
+
   // error status
   &__status--error:not(#{&}--opened) &__icon {
     color: var(--color-fire-red);