feat(Scrollbar): add new look to scrollbars (#1815)

dnbexperience · Dec 15, 2022 · a590b50 · a590b50
1 parent bbf94a8
commit a590b50
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 24 deletions.
diff --git a/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap b/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
@@ -1459,7 +1459,7 @@ exports[`Tabs scss have to match snapshot 1`] = `
       scrollbar-width: thin;
       -webkit-overflow-scrolling: touch;
       -ms-overflow-style: auto;
-      scrollbar-color: var(--color-emerald-green) transparent;
+      scrollbar-color: var(--color-sea-green) transparent;
       /* Hide scrollbar for Chrome, Safari */
       /* stylelint-disable-next-line */
       -ms-overflow-style: none;
@@ -1475,6 +1475,18 @@ exports[`Tabs scss have to match snapshot 1`] = `
           @media screen and (-ms-high-contrast: none) {
             html[data-whatinput='keyboard'] .dnb-tabs__tabs__tablist:focus {
               box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+      @supports not (scrollbar-color: auto) {
+        .dnb-tabs__tabs__tablist::-webkit-scrollbar {
+          background-color: var(--color-black-8); }
+          .dnb-tabs__tabs__tablist::-webkit-scrollbar:vertical {
+            width: 0.5rem; }
+          .dnb-tabs__tabs__tablist::-webkit-scrollbar:horizontal {
+            height: 0.5rem; }
+        .dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb {
+          background-color: var(--color-sea-green);
+          border-radius: 0.5rem; }
+          .dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb:hover {
+            background-color: var(--color-emerald-green); } }
       html:not([data-visual-test]) .dnb-tabs__tabs__tablist {
         scroll-behavior: smooth; }
       html[data-visual-test] .dnb-tabs__tabs__tablist {

diff --git a/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap b/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap
@@ -171,11 +171,23 @@ exports[`Textarea scss have to match default theme snapshot 1`] = `
   scrollbar-width: thin;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: auto;
-  scrollbar-color: var(--color-emerald-green) transparent; }
+  scrollbar-color: var(--color-sea-green) transparent; }
   .dnb-textarea__textarea ::selection {
     background-color: var(--color-mint-green);
     color: var(--color-black);
     text-shadow: none; }
+  @supports not (scrollbar-color: auto) {
+    .dnb-textarea__textarea::-webkit-scrollbar {
+      background-color: var(--color-black-8); }
+      .dnb-textarea__textarea::-webkit-scrollbar:vertical {
+        width: 0.5rem; }
+      .dnb-textarea__textarea::-webkit-scrollbar:horizontal {
+        height: 0.5rem; }
+    .dnb-textarea__textarea::-webkit-scrollbar-thumb {
+      background-color: var(--color-sea-green);
+      border-radius: 0.5rem; }
+      .dnb-textarea__textarea::-webkit-scrollbar-thumb:hover {
+        background-color: var(--color-emerald-green); } }
   html:not([data-visual-test]) .dnb-textarea__textarea {
     scroll-behavior: smooth; }
   html[data-visual-test] .dnb-textarea__textarea {
@@ -511,11 +523,23 @@ legend.dnb-form-label {
   scrollbar-width: thin;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: auto;
-  scrollbar-color: var(--color-emerald-green) transparent; }
+  scrollbar-color: var(--color-sea-green) transparent; }
   .dnb-textarea__textarea ::selection {
     background-color: var(--color-mint-green);
     color: var(--color-black);
     text-shadow: none; }
+  @supports not (scrollbar-color: auto) {
+    .dnb-textarea__textarea::-webkit-scrollbar {
+      background-color: var(--color-black-8); }
+      .dnb-textarea__textarea::-webkit-scrollbar:vertical {
+        width: 0.5rem; }
+      .dnb-textarea__textarea::-webkit-scrollbar:horizontal {
+        height: 0.5rem; }
+    .dnb-textarea__textarea::-webkit-scrollbar-thumb {
+      background-color: var(--color-sea-green);
+      border-radius: 0.5rem; }
+      .dnb-textarea__textarea::-webkit-scrollbar-thumb:hover {
+        background-color: var(--color-emerald-green); } }
   html:not([data-visual-test]) .dnb-textarea__textarea {
     scroll-behavior: smooth; }
   html[data-visual-test] .dnb-textarea__textarea {

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
@@ -1158,7 +1158,19 @@ exports[`DrawerList scss have to match snapshot 1`] = `
     scrollbar-width: thin;
     -webkit-overflow-scrolling: touch;
     -ms-overflow-style: auto;
-    scrollbar-color: var(--color-emerald-green) transparent; }
+    scrollbar-color: var(--color-sea-green) transparent; }
+    @supports not (scrollbar-color: auto) {
+      .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar {
+        background-color: var(--color-black-8); }
+        .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar:vertical {
+          width: 0.5rem; }
+        .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar:horizontal {
+          height: 0.5rem; }
+      .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar-thumb {
+        background-color: var(--color-sea-green);
+        border-radius: 0.5rem; }
+        .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar-thumb:hover {
+          background-color: var(--color-emerald-green); } }
     html:not([data-visual-test]) .dnb-drawer-list--scroll .dnb-drawer-list__options {
       scroll-behavior: smooth; }
     html[data-visual-test] .dnb-drawer-list--scroll .dnb-drawer-list__options {

diff --git a/packages/dnb-eufemia/src/style/core/scopes.scss b/packages/dnb-eufemia/src/style/core/scopes.scss
@@ -56,6 +56,8 @@
         font: -apple-system-body; /* stylelint-disable-line */
       }
     }
+
+    // @include scrollbarAppearance();
   }
 
   // reset ePlatform css

diff --git a/packages/dnb-eufemia/src/style/core/utilities.scss b/packages/dnb-eufemia/src/style/core/utilities.scss
@@ -163,7 +163,6 @@ $focusRingColor: var(--color-emerald-green);
 }
 
 @mixin scrollbarAppearance() {
-  overscroll-behavior: contain;
   scrollbar-width: thin;
 
   // older iOS safari
@@ -172,45 +171,59 @@ $focusRingColor: var(--color-emerald-green);
   // show scrollbar on IE
   -ms-overflow-style: auto;
 
-  scrollbar-color: var(--color-emerald-green) transparent;
-
-  // This is too buggy and the UX is bad
-  // We have to rather wait until "scrollbar-color" is supported on webkit
-  // The scrollbar gets hidden in certain scenarios (e.g. portal-sidebar-menu)
-  // Safari/Chrome
-  // @supports not (scrollbar-color: auto) {
-  //   &::-webkit-scrollbar {
-  //     width: 0.5rem;
-  //     background-color: transparent;
-  //   }
-  //   &::-webkit-scrollbar-thumb {
-  //     cursor: pointer;
-  //     background-color: var(--color-emerald-green);
-  //     border-radius: 0.5rem;
-  //   }
-  // }
+  scrollbar-color: var(--color-sea-green) transparent;
+
+  @supports not (scrollbar-color: auto) {
+    // stylelint-disable
+    &::-webkit-scrollbar {
+      &:vertical {
+        width: 0.5rem;
+      }
+      &:horizontal {
+        height: 0.5rem;
+      }
+
+      background-color: var(--color-black-8);
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--color-sea-green);
+
+      &:hover {
+        background-color: var(--color-emerald-green);
+      }
+
+      border-radius: 0.5rem;
+    }
+    // stylelint-enable
+  }
 }
 
 @mixin scrollY($mode: scroll) {
   overflow-y: $mode;
+  overscroll-behavior: contain;
+
+  @include scrollbarAppearance();
+
   html:not([data-visual-test]) & {
     scroll-behavior: smooth;
   }
   html[data-visual-test] & {
     scroll-behavior: auto !important;
   }
-  @include scrollbarAppearance();
 }
 
 @mixin scrollX($mode: scroll) {
   overflow-x: $mode;
+  overscroll-behavior: contain;
+
+  @include scrollbarAppearance();
+
   html:not([data-visual-test]) & {
     scroll-behavior: smooth;
   }
   html[data-visual-test] & {
     scroll-behavior: auto !important;
   }
-  @include scrollbarAppearance();
 }
 
 @mixin hideScrollbar() {
-Original file line number
+Diff line change
@@ Expand Up / @@ -56,6 +56,8 @@ @@
             font: -apple-system-body; /* stylelint-disable-line */
           }
         }
+        // @include scrollbarAppearance();
       }
       // reset ePlatform css
@@ Expand Down @@