feat(framework): reset scrollbar styles class (#5623)

SAP · Aug 22, 2022 · c3f3063 · c3f3063
1 parent 928f4fc
commit c3f3063
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 15 deletions.
diff --git a/docs/2-advanced/09-scrollbars-customization.md b/docs/2-advanced/09-scrollbars-customization.md
@@ -0,0 +1,17 @@
+# Scrollbars customization
+
+By default some of the components provide additional CSS styles, which are applied to their scrollbars, in order to achieve their target design.
+
+## Setting default scrollbar styles to components
+
+To use native scrollbar styles, you have to add the CSS style class `.ui5-content-native-scrollbars` on the body element of your application.
+
+**Note: Because of some browser restrictions this setting takes affect if it is applied before the initial rendering of the compontents, which are using it.**
+
+Example 1:
+```
+<body class="ui5-content-native-scrollbars">
+    ...
+</body>
+```
+
diff --git a/packages/base/src/util/getEffectiveScrollbarStyle.js b/packages/base/src/util/getEffectiveScrollbarStyle.js
@@ -0,0 +1,5 @@
+const NO_SCROLLBAR_STYLE_CLASS = "ui5-content-native-scrollbars";
+
+const getEffectiveScrollbarStyle = () => document.body.classList.contains(NO_SCROLLBAR_STYLE_CLASS);
+
+export default getEffectiveScrollbarStyle;
diff --git a/packages/main/src/List.hbs b/packages/main/src/List.hbs
@@ -1,5 +1,5 @@
 <div
-	class="ui5-list-root"
+	class="{{classes.root}}"
 	@focusin="{{_onfocusin}}"
 	@keydown="{{_onkeydown}}"
 >

diff --git a/packages/main/src/List.js b/packages/main/src/List.js
@@ -13,6 +13,7 @@ import {
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
 import isElementInView from "@ui5/webcomponents-base/dist/util/isElementInView.js";
@@ -625,6 +626,15 @@ class List extends UI5Element {
 		};
 	}
 
+	get classes() {
+		return {
+			root: {
+				"ui5-list-root": true,
+				"ui5-content-native-scrollbars": getEffectiveScrollbarStyle(),
+			},
+		};
+	}
+
 	initItemNavigation() {
 		this._itemNavigation = new ItemNavigation(this, {
 			skipItemsSize: PAGE_UP_DOWN_SIZE, // PAGE_UP and PAGE_DOWN will skip trough 10 items

diff --git a/packages/main/src/Popup.js b/packages/main/src/Popup.js
@@ -4,6 +4,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { isChrome } from "@ui5/webcomponents-base/dist/Device.js";
 import { getFirstFocusableElement, getLastFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import { hasStyle, createStyle } from "@ui5/webcomponents-base/dist/ManagedStyles.js";
 import { isEnter, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getNextZIndex, getFocusedElement, isFocusedElementWithinNode } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
@@ -618,6 +619,7 @@ class Popup extends UI5Element {
 		return {
 			root: {
 				"ui5-popup-root": true,
+				"ui5-content-native-scrollbars": getEffectiveScrollbarStyle(),
 			},
 			content: {
 				"ui5-popup-content": true,

diff --git a/packages/main/src/TextArea.hbs b/packages/main/src/TextArea.hbs
@@ -1,5 +1,5 @@
 <div
-	class="ui5-textarea-root"
+	class="{{classes.root}}"
 	style="{{styles.main}}"
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"

diff --git a/packages/main/src/TextArea.js b/packages/main/src/TextArea.js
@@ -3,6 +3,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -556,6 +557,10 @@ class TextArea extends UI5Element {
 
 	get classes() {
 		return {
+			root: {
+				"ui5-textarea-root": true,
+				"ui5-content-native-scrollbars": getEffectiveScrollbarStyle(),
+			},
 			valueStateMsg: {
 				"ui5-valuestatemessage--error": this.valueState === ValueState.Error,
 				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,

diff --git a/packages/main/src/themes/BrowserScrollbar.css b/packages/main/src/themes/BrowserScrollbar.css
@@ -1,25 +1,25 @@
-::-webkit-scrollbar:horizontal {
+:not(.ui5-content-native-scrollbars) ::-webkit-scrollbar:horizontal {
 	height: var(--sapScrollBar_Dimension);
 }
 
-::-webkit-scrollbar:vertical {
+:not(.ui5-content-native-scrollbars) ::-webkit-scrollbar:vertical {
 	width: var(--sapScrollBar_Dimension);
 }
 
-::-webkit-scrollbar {
+:not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
 	background-color: var(--sapScrollBar_TrackColor);
 	border-left: var(--browser_scrollbar_border);
 }
 
-::-webkit-scrollbar-thumb {
+:not(.ui5-content-native-scrollbars) ::-webkit-scrollbar-thumb {
 	border-radius: var(--browser_scrollbar_border_radius);
 	background-color: var(--sapScrollBar_FaceColor);
 }
 
-::-webkit-scrollbar-thumb:hover {
+:not(.ui5-content-native-scrollbars) ::-webkit-scrollbar-thumb:hover {
 	background-color: var(--sapScrollBar_Hover_FaceColor);
 }
 
-::-webkit-scrollbar-corner {
+:not(.ui5-content-native-scrollbars) ::-webkit-scrollbar-corner {
 	background-color: var(--sapScrollBar_TrackColor);
 }
diff --git a/packages/main/src/themes/TextArea.css b/packages/main/src/themes/TextArea.css
@@ -318,38 +318,38 @@
 	font-size: var(--sapFontSmallSize);
 }
 
-:host ::-webkit-scrollbar {
+:host :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
 	background: var(--sapField_BackgroundStyle);
 	background-color: var(--sapScrollBar_TrackColor);
 	border-top-right-radius: var(--sapField_BorderCornerRadius);
 	border-bottom-right-radius: var(--sapField_BorderCornerRadius);
 }
 
-:host([readonly]) ::-webkit-scrollbar {
+:host([readonly]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
 	background: var(--sapField_ReadOnly_BackgroundStyle);
 	background-color: var(--sapScrollBar_TrackColor);
 }
 
-:host([value-state="Error"]) ::-webkit-scrollbar {
+:host([value-state="Error"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
 	background: var(--sapField_InvalidBackgroundStyle);
 	background-color: var(--sapScrollBar_TrackColor);
 }
 
-:host([value-state="Warning"]) ::-webkit-scrollbar {
+:host([value-state="Warning"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
 	background: var(--sapField_WarningBackgroundStyle);
 	background-color: var(--sapScrollBar_TrackColor);
 }
 
-:host([value-state="Information"]) ::-webkit-scrollbar {
+:host([value-state="Information"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
 	background: var(--sapField_InformationBackgroundStyle);
 	background-color: var(--sapScrollBar_TrackColor);
 }
 
-:host([value-state="Success"]) ::-webkit-scrollbar {
+:host([value-state="Success"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
 	background: var(--sapField_SuccessBackgroundStyle);
 	background-color: var(--sapScrollBar_TrackColor);
 }
 
-:host([focused]) ::-webkit-scrollbar {
+:host([focused]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
 	background-image: none;
 }