From a590b5081fae29140846e054d4a2d4bbebf2eccd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Thu, 15 Dec 2022 11:10:27 +0100 Subject: [PATCH] feat(Scrollbar): add new look to scrollbars (#1815) --- .../__tests__/__snapshots__/Tabs.test.js.snap | 14 ++++- .../__snapshots__/Textarea.test.js.snap | 28 +++++++++- .../__snapshots__/DrawerList.test.js.snap | 14 ++++- .../dnb-eufemia/src/style/core/scopes.scss | 2 + .../dnb-eufemia/src/style/core/utilities.scss | 53 ++++++++++++------- 5 files changed, 87 insertions(+), 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 index 8ad50f13896..9d32e0b1f19 100644 --- 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 index 3c6fa4df792..da93497dece 100644 --- 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/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap index 396f01302ed..7162f2c71b2 100644 --- a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap +++ b/packages/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 index 8fa96d7cdc4..f661a5f9d4a 100644 --- 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 index 0c693e2ceb9..e6d63bb74b9 100644 --- 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() {