feat(ScrollView): add sbanken styling to scrollbar (#2514)

dnbexperience · Jul 4, 2023 · 5d2011e · 5d2011e · vercel · Jul 4, 2023
1 parent 23b3935
commit 5d2011e
Show file tree

Hide file tree

Showing 10 changed files with 21 additions and 27 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/Examples.tsx
@@ -16,6 +16,7 @@ export const TextareaExampleRowsCols = () => (
         rows="2"
         cols="20"
         value="Textarea value\nNewline"
+        spellCheck={false}
         on_change={({ value }) => {
           console.log('on_change', value)
         }}

diff --git a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.module.scss b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.module.scss
@@ -277,11 +277,6 @@
   z-index: 1;
 
   @include scrollY(auto);
-  :global(.eufemia-theme__sbanken) & {
-    --scrollbar-track-color: var(--sb-color-gray-light-2);
-    --scrollbar-thumb-color: var(--sb-color-gray-dark-3);
-    --scrollbar-thumb-hover-color: var(--sb-color-purple);
-  }
 
   @include allBelow(medium) {
     position: relative;

diff --git a/...nb-eufemia/scripts/prebuild/tasks/__tests__/__snapshots__/makePropertiesFile.test.ts.snap b/...nb-eufemia/scripts/prebuild/tasks/__tests__/__snapshots__/makePropertiesFile.test.ts.snap
@@ -180,7 +180,12 @@ export default {
   '--shadow-default-y': '8px',
   '--shadow-default-blur-radius': '16px',
   '--shadow-default-color': 'rgb(51 51 51 / 8%)',
-  '--easing-default': 'cubic-bezier(0.42, 0, 0, 1)'
+  '--easing-default': 'cubic-bezier(0.42, 0, 0, 1)',
+  '--scrollbar-track-width': '0.5rem',
+  '--scrollbar-thumb-width': '0.5rem',
+  '--scrollbar-track-color': 'var(--color-black-8)',
+  '--scrollbar-thumb-color': 'var(--color-sea-green)',
+  '--scrollbar-thumb-hover-color': 'var(--color-emerald-green)'
 }; // prettier-ignore
 "
 `;
diff --git a/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.tsx.snap b/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.tsx.snap
@@ -33,11 +33,6 @@ exports[`Tabs scss has to match style dependencies css 1`] = `
   flex: 0 1 auto;
   overflow-x: auto;
   overscroll-behavior: contain;
-  --scrollbar-track-width: 0.5rem;
-  --scrollbar-thumb-width: 0.5rem;
-  --scrollbar-track-color: var(--color-black-8);
-  --scrollbar-thumb-color: var(--color-sea-green);
-  --scrollbar-thumb-hover-color: var(--color-emerald-green);
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: auto;
   scrollbar-color: var(--scrollbar-thumb-color, #888) transparent;

diff --git a/...__/__image_snapshots__/textarea-have-to-match-the-focus-textarea-style.snap.png b/...__/__image_snapshots__/textarea-have-to-match-the-focus-textarea-style.snap.png
diff --git a/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.tsx.snap b/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.tsx.snap
@@ -307,11 +307,6 @@ exports[`Textarea scss have to match default theme snapshot 1`] = `
   background-color: var(--color-white);
   overflow-y: auto;
   overscroll-behavior: contain;
-  --scrollbar-track-width: 0.5rem;
-  --scrollbar-thumb-width: 0.5rem;
-  --scrollbar-track-color: var(--color-black-8);
-  --scrollbar-thumb-color: var(--color-sea-green);
-  --scrollbar-thumb-hover-color: var(--color-emerald-green);
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: auto;
   scrollbar-color: var(--scrollbar-thumb-color, #888) transparent;

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
@@ -95,11 +95,6 @@ html[data-visual-test] .dnb-drawer-list__portal__style {
   transition: max-height 300ms var(--easing-default);
   overflow-y: auto;
   overscroll-behavior: contain;
-  --scrollbar-track-width: 0.5rem;
-  --scrollbar-thumb-width: 0.5rem;
-  --scrollbar-track-color: var(--color-black-8);
-  --scrollbar-thumb-color: var(--color-sea-green);
-  --scrollbar-thumb-hover-color: var(--color-emerald-green);
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: auto;
   scrollbar-color: var(--scrollbar-thumb-color, #888) transparent;

diff --git a/packages/dnb-eufemia/src/style/core/utilities.scss b/packages/dnb-eufemia/src/style/core/utilities.scss
@@ -132,12 +132,6 @@
 }
 
 @mixin scrollbarAppearance() {
-  --scrollbar-track-width: 0.5rem;
-  --scrollbar-thumb-width: 0.5rem;
-  --scrollbar-track-color: var(--color-black-8);
-  --scrollbar-thumb-color: var(--color-sea-green);
-  --scrollbar-thumb-hover-color: var(--color-emerald-green);
-
   // older iOS safari
   -webkit-overflow-scrolling: touch;
 

diff --git a/packages/dnb-eufemia/src/style/themes/theme-sbanken/customisations.scss b/packages/dnb-eufemia/src/style/themes/theme-sbanken/customisations.scss
@@ -30,6 +30,13 @@
   --line-height-medium: var(--sb-line-height-medium);
   --line-height-large: var(--sb-line-height-large);
   --line-height-x-large: var(--sb-line-height-x-large);
+
+  // Scrollbar
+  --scrollbar-track-width: 0.5rem;
+  --scrollbar-thumb-width: 0.5rem;
+  --scrollbar-track-color: var(--sb-color-gray-light-2);
+  --scrollbar-thumb-color: var(--sb-color-gray-dark-3);
+  --scrollbar-thumb-hover-color: var(--sb-color-purple);
 }
 
 // change heading to use MaisonNeueHeadings

diff --git a/packages/dnb-eufemia/src/style/themes/theme-ui/properties.scss b/packages/dnb-eufemia/src/style/themes/theme-ui/properties.scss
@@ -111,6 +111,13 @@
   // Easing
   --easing-default: cubic-bezier(0.42, 0, 0, 1);
 
+  // Scrollbar
+  --scrollbar-track-width: 0.5rem;
+  --scrollbar-thumb-width: 0.5rem;
+  --scrollbar-track-color: var(--color-black-8);
+  --scrollbar-thumb-color: var(--color-sea-green);
+  --scrollbar-thumb-hover-color: var(--color-emerald-green);
+
   @if mixin-exists('propertiesCustomisation') {
     @include propertiesCustomisation();
   }