feat: themeable scrollbar (#2886)

SAP · Nov 9, 2021 · 8c3bf35 · 8c3bf35
1 parent b6a3215
commit 8c3bf35
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 0 deletions.
diff --git a/src/styles/scrollbar.scss b/src/styles/scrollbar.scss
@@ -0,0 +1,36 @@
+@import "mixins/mixins";
+
+$block: fd-scrollbar;
+
+.#{$block} {
+  @include fd-reset();
+
+  overflow: auto;
+
+  /** Firefox
+    * Currently Firefox doesn't support changing scrollbar color on hover & width but it's allowed by Fiori.
+    */
+  scrollbar-color: var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color);
+
+  /** Chrome, WebKit */
+  &::-webkit-scrollbar {
+    width: var(--fdScrollbar_Dimension);
+    height: var(--fdScrollbar_Dimension);
+  }
+
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-corner {
+    background-color: var(--fdScrollbar_Track_Color);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--fdScrollbar_Thumb_Color);
+
+    &:hover,
+    &:active {
+      background-color: var(--fdScrollbar_Thumb_Hover_Color);
+    }
+  }
+
+  /** For any other browser native scrollbar is used. */
+}
diff --git a/src/styles/theming/sap_fiori_3.scss b/src/styles/theming/sap_fiori_3.scss
@@ -263,4 +263,10 @@
 
   /* Micro Process Flow */
   --fdMicro_Process_Flow_Icon_Color: var(--sapContent_ContrastIconColor);
+
+  /* Scrollbar */
+  --fdScrollbar_Track_Color: var(--sapScrollBar_TrackColor);
+  --fdScrollbar_Thumb_Color: var(--sapScrollBar_FaceColor);
+  --fdScrollbar_Thumb_Hover_Color: var(--sapScrollBar_Hover_FaceColor);
+  --fdScrollbar_Dimension: var(--sapScrollBar_Dimension);
 }
diff --git a/src/styles/theming/sap_fiori_3_dark.scss b/src/styles/theming/sap_fiori_3_dark.scss
@@ -262,4 +262,10 @@
 
   /* Micro Process Flow */
   --fdMicro_Process_Flow_Icon_Color: var(--sapContent_ContrastIconColor);
+
+  /* Scrollbar */
+  --fdScrollbar_Track_Color: var(--sapScrollBar_TrackColor);
+  --fdScrollbar_Thumb_Color: var(--sapScrollBar_FaceColor);
+  --fdScrollbar_Thumb_Hover_Color: var(--sapScrollBar_Hover_FaceColor);
+  --fdScrollbar_Dimension: var(--sapScrollBar_Dimension);
 }
diff --git a/src/styles/theming/sap_fiori_3_hcb.scss b/src/styles/theming/sap_fiori_3_hcb.scss
@@ -262,4 +262,10 @@
 
   /* Micro Process Flow */
   --fdMicro_Process_Flow_Icon_Color: var(--sapContent_ForegroundColor);
+
+  /* Scrollbar */
+  --fdScrollbar_Track_Color: var(--sapScrollBar_TrackColor);
+  --fdScrollbar_Thumb_Color: var(--sapScrollBar_FaceColor);
+  --fdScrollbar_Thumb_Hover_Color: var(--sapScrollBar_Hover_FaceColor);
+  --fdScrollbar_Dimension: var(--sapScrollBar_Dimension);
 }
diff --git a/src/styles/theming/sap_fiori_3_hcw.scss b/src/styles/theming/sap_fiori_3_hcw.scss
@@ -262,4 +262,10 @@
 
   /* Micro Process Flow */
   --fdMicro_Process_Flow_Icon_Color: var(--sapContent_ForegroundColor);
+
+  /* Scrollbar */
+  --fdScrollbar_Track_Color: var(--sapScrollBar_TrackColor);
+  --fdScrollbar_Thumb_Color: var(--sapScrollBar_FaceColor);
+  --fdScrollbar_Thumb_Hover_Color: var(--sapScrollBar_Hover_FaceColor);
+  --fdScrollbar_Dimension: var(--sapScrollBar_Dimension);
 }
diff --git a/src/styles/theming/sap_fiori_3_light_dark.scss b/src/styles/theming/sap_fiori_3_light_dark.scss
@@ -262,4 +262,10 @@
 
   /* Micro Process Flow */
   --fdMicro_Process_Flow_Icon_Color: var(--sapContent_ContrastIconColor);
+
+  /* Scrollbar */
+  --fdScrollbar_Track_Color: var(--sapScrollBar_TrackColor);
+  --fdScrollbar_Thumb_Color: var(--sapScrollBar_FaceColor);
+  --fdScrollbar_Thumb_Hover_Color: var(--sapScrollBar_Hover_FaceColor);
+  --fdScrollbar_Dimension: var(--sapScrollBar_Dimension);
 }
diff --git a/stories/scrollbar/__snapshots__/scrollbar.stories.storyshot b/stories/scrollbar/__snapshots__/scrollbar.stories.storyshot
@@ -0,0 +1,6 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Components/Scrollbar Default 1`] = `
+
+
+`;
diff --git a/stories/scrollbar/scrollbar.stories.js b/stories/scrollbar/scrollbar.stories.js
@@ -0,0 +1,29 @@
+export default {
+    title: 'Components/Scrollbar',
+    parameters: {
+        description: `
+Themeable scrollbar is the scrollbar component made accordingly to the Fiori 3 design guidelines. 
+Using the themeable scrollbar is preferred over the browser's default in the components that support having scrollbars and made accordingly to the Fiori 3 design guidelines.
+Themeable scrollbar works in Chrome, Safari, and other WebKit-based browsers and partially works in Firefox (no hover effects).
+Component not working in the IE, default scrollbar is shown instead.
+            `,
+        docs: { iframeHeight: 400 },
+        tags: ['f3', 'theme', 'development'],
+        components: ['scrollbar']
+    }
+};
+
+export const defaultExample = () => `
+    <div style="width: 300px; height: 100px" class="fd-scrollbar">
+        <div style="width: 9000px; height: 9000px;"></div>
+    </div>
+`;
+
+defaultExample.storyName = 'Default';
+defaultExample.parameters = {
+    docs: {
+        iframeHeight: 950,
+        storyDescription: `To use themeable scrollbar use \`fd-scrollbar\` class on scrollable element.
+`
+    }
+};