fix(ui5-*): make ui5-content-native-scrollbar to take effect (#9790)

Fixes: #9720 Fixes: #9695
SAP · Sep 3, 2024 · f70cc11 · f70cc11
1 parent ee465de
commit f70cc11
Show file tree

Hide file tree

Showing 23 changed files with 48 additions and 65 deletions.
diff --git a/packages/base/src/util/getEffectiveScrollbarStyle.ts b/packages/base/src/util/getEffectiveScrollbarStyle.ts
@@ -1,5 +1,36 @@
 const NO_SCROLLBAR_STYLE_CLASS = "ui5-content-native-scrollbars";
+const isSSR = typeof document === "undefined";
 
-const getEffectiveScrollbarStyle = () => document.body.classList.contains(NO_SCROLLBAR_STYLE_CLASS);
+const getEffectiveScrollbarStyle = () => {
+	if (isSSR || document.body.classList.contains(NO_SCROLLBAR_STYLE_CLASS)) {
+		return "";
+	}
+
+	return `::-webkit-scrollbar:horizontal {
+	height: var(--sapScrollBar_Dimension);
+}
+
+::-webkit-scrollbar:vertical {
+	width: var(--sapScrollBar_Dimension);
+}
+
+::-webkit-scrollbar {
+	background-color: var(--sapScrollBar_TrackColor);
+	border-left: var(--browser_scrollbar_border, none);
+}
+
+::-webkit-scrollbar-thumb {
+	border-radius: var(--browser_scrollbar_border_radius, var(--sapElement_BorderCornerRadius));
+	background-color: var(--sapScrollBar_FaceColor);
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background-color: var(--sapScrollBar_Hover_FaceColor);
+}
+
+::-webkit-scrollbar-corner {
+	background-color: var(--sapScrollBar_TrackColor);
+}`;
+};
 
 export default getEffectiveScrollbarStyle;
diff --git a/packages/fiori/src/Page.ts b/packages/fiori/src/Page.ts
@@ -5,8 +5,8 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
-import browserScrollbarCSS from "@ui5/webcomponents/dist/generated/themes/BrowserScrollbar.css.js";
 import PageBackgroundDesign from "./types/PageBackgroundDesign.js";
 
 // Template
@@ -50,7 +50,7 @@ import PageCss from "./generated/themes/Page.css.js";
 	languageAware: true,
 	renderer: litRender,
 	styles: [
-		browserScrollbarCSS,
+		getEffectiveScrollbarStyle(),
 		PageCss,
 	],
 	template: PageTemplate,

diff --git a/packages/fiori/src/Wizard.ts b/packages/fiori/src/Wizard.ts
@@ -18,7 +18,6 @@ import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
 import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
 import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
-import browserScrollbarCSS from "@ui5/webcomponents/dist/generated/themes/BrowserScrollbar.css.js";
 import WizardContentLayout from "./types/WizardContentLayout.js";
 
 // Texts
@@ -190,7 +189,7 @@ type StepInfo = {
 	fastNavigation: true,
 	renderer: litRender,
 	styles: [
-		browserScrollbarCSS,
+		getEffectiveScrollbarStyle(),
 		WizardCss,
 	],
 	staticAreaStyles: WizardPopoverCss,
@@ -345,7 +344,6 @@ class Wizard extends UI5Element {
 		return {
 			root: {
 				"ui5-wiz-root": true,
-				"ui5-content-native-scrollbars": getEffectiveScrollbarStyle(),
 			},
 			popover: {
 				"ui5-wizard-responsive-popover": true,

diff --git a/packages/main/src/Dialog.ts b/packages/main/src/Dialog.ts
@@ -9,6 +9,7 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Popup from "./Popup.js";
 import type { PopupBeforeCloseEventDetail as DialogBeforeCloseEventDetail } from "./Popup.js";
@@ -29,7 +30,6 @@ import {
 // Template
 import DialogTemplate from "./generated/templates/DialogTemplate.lit.js";
 // Styles
-import browserScrollbarCSS from "./generated/themes/BrowserScrollbar.css.js";
 import PopupsCommonCss from "./generated/themes/PopupsCommon.css.js";
 import dialogCSS from "./generated/themes/Dialog.css.js";
 import PopupAccessibleRole from "./types/PopupAccessibleRole.js";
@@ -116,7 +116,7 @@ const ICON_PER_STATE: Record<ValueStateWithIcon, string> = {
 	tag: "ui5-dialog",
 	template: DialogTemplate,
 	styles: [
-		browserScrollbarCSS,
+		getEffectiveScrollbarStyle(),
 		PopupsCommonCss,
 		dialogCSS,
 	],

diff --git a/packages/main/src/List.ts b/packages/main/src/List.ts
@@ -45,7 +45,6 @@ import ListTemplate from "./generated/templates/ListTemplate.lit.js";
 
 // Styles
 import listCss from "./generated/themes/List.css.js";
-import browserScrollbarCSS from "./generated/themes/BrowserScrollbar.css.js";
 
 // Texts
 import {
@@ -160,7 +159,7 @@ type ListItemClickEventDetail = {
 	fastNavigation: true,
 	renderer: litRender,
 	template: ListTemplate,
-	styles: [browserScrollbarCSS, listCss],
+	styles: [getEffectiveScrollbarStyle(), listCss],
 	dependencies: [BusyIndicator, DropIndicator],
 })
 /**
@@ -645,7 +644,6 @@ class List extends UI5Element {
 		return {
 			root: {
 				"ui5-list-root": true,
-				"ui5-content-native-scrollbars": getEffectiveScrollbarStyle(),
 			},
 		};
 	}

diff --git a/packages/main/src/Popover.ts b/packages/main/src/Popover.ts
@@ -6,6 +6,7 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { isIOS } from "@ui5/webcomponents-base/dist/Device.js";
 import DOMReference from "@ui5/webcomponents-base/dist/types/DOMReference.js";
 import { getClosedPopupParent } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import clamp from "@ui5/webcomponents-base/dist/util/clamp.js";
 import isElementContainingBlock from "@ui5/webcomponents-base/dist/util/isElementContainingBlock.js";
 import getParentElement from "@ui5/webcomponents-base/dist/util/getParentElement.js";
@@ -19,7 +20,6 @@ import { addOpenedPopover, removeOpenedPopover } from "./popup-utils/PopoverRegi
 // Template
 import PopoverTemplate from "./generated/templates/PopoverTemplate.lit.js";
 // Styles
-import browserScrollbarCSS from "./generated/themes/BrowserScrollbar.css.js";
 import PopupsCommonCss from "./generated/themes/PopupsCommon.css.js";
 import PopoverCss from "./generated/themes/Popover.css.js";
 
@@ -86,7 +86,7 @@ type CalculatedPlacement = {
 @customElement({
 	tag: "ui5-popover",
 	styles: [
-		browserScrollbarCSS,
+		getEffectiveScrollbarStyle(),
 		PopupsCommonCss,
 		PopoverCss,
 	],

diff --git a/packages/main/src/Popup.ts b/packages/main/src/Popup.ts
@@ -9,7 +9,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { isChrome, isSafari } 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";
@@ -603,7 +602,6 @@ abstract 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.ts b/packages/main/src/TextArea.ts
@@ -42,7 +42,6 @@ import {
 // Styles
 import styles from "./generated/themes/TextArea.css.js";
 import valueStateMessageStyles from "./generated/themes/ValueStateMessage.css.js";
-import browserScrollbarCSS from "./generated/themes/BrowserScrollbar.css.js";
 
 type TokenizedText = Array<string>;
 type IndexedTokenizedText = Array<{
@@ -77,7 +76,7 @@ type ExceededText = {
 @customElement({
 	tag: "ui5-textarea",
 	languageAware: true,
-	styles: [browserScrollbarCSS, styles],
+	styles: [getEffectiveScrollbarStyle(), styles],
 	renderer: litRender,
 	template: TextAreaTemplate,
 	staticAreaTemplate: TextAreaPopoverTemplate,
@@ -529,7 +528,7 @@ class TextArea extends UI5Element implements IFormElement {
 		return {
 			root: {
 				"ui5-textarea-root": true,
-				"ui5-content-native-scrollbars": getEffectiveScrollbarStyle(),
+				"ui5-content-custom-scrollbars": !!getEffectiveScrollbarStyle(),
 			},
 			valueStateMsg: {
 				"ui5-valuestatemessage-header": true,

diff --git a/packages/main/src/themes/BrowserScrollbar.css b/packages/main/src/themes/BrowserScrollbar.css
diff --git a/packages/main/src/themes/TextArea.css b/packages/main/src/themes/TextArea.css
@@ -430,27 +430,27 @@
 	display: none;
 }
 
-:host :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
+:host .ui5-content-custom-scrollbars ::-webkit-scrollbar {
 	border-top-right-radius: var(--sapField_BorderCornerRadius);
 	border-bottom-right-radius: var(--sapField_BorderCornerRadius);
 }
 
-:host([value-state="Error"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
+:host([value-state="Error"]) .ui5-content-custom-scrollbars ::-webkit-scrollbar {
 	background-color: var(--sapScrollBar_TrackColor);
 }
 
-:host([value-state="Warning"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
+:host([value-state="Warning"]) .ui5-content-custom-scrollbars ::-webkit-scrollbar {
 	background-color: var(--sapScrollBar_TrackColor);
 }
 
-:host([value-state="Information"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
+:host([value-state="Information"]) .ui5-content-custom-scrollbars ::-webkit-scrollbar {
 	background-color: var(--sapScrollBar_TrackColor);
 }
 
-:host([value-state="Success"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
+:host([value-state="Success"]) .ui5-content-custom-scrollbars ::-webkit-scrollbar {
 	background-color: var(--sapScrollBar_TrackColor);
 }
 
-:host([focused]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
+:host([focused]) .ui5-content-custom-scrollbars ::-webkit-scrollbar {
 	background-image: none;
 }
diff --git a/packages/main/src/themes/base/BrowserScrollbar-parameters.css b/packages/main/src/themes/base/BrowserScrollbar-parameters.css
diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
@@ -1,7 +1,6 @@
 @import "./Avatar-parameters.css";
 @import "../base/AvatarGroup-parameters.css";
 @import "../base/Badge-parameters.css";
-@import "../base/BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/Card-parameters.css";

diff --git a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
@@ -1,7 +1,6 @@
 @import "./Avatar-parameters.css";
 @import "../base/AvatarGroup-parameters.css";
 @import "./Badge-parameters.css";
-@import "../base/BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/CalendarLegend-parameters.css";

diff --git a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -1,7 +1,6 @@
 @import "./Avatar-parameters.css";
 @import "../base/AvatarGroup-parameters.css";
 @import "./Badge-parameters.css";
-@import "../base/BrowserScrollbar-parameters.css";
 @import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/CalendarLegend-parameters.css";

diff --git a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
@@ -1,7 +1,6 @@
 @import "./Avatar-parameters.css";
 @import "../base/AvatarGroup-parameters.css";
 @import "./Badge-parameters.css";
-@import "../base/BrowserScrollbar-parameters.css";
 @import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/CalendarLegend-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon/parameters-bundle.css b/packages/main/src/themes/sap_horizon/parameters-bundle.css
@@ -2,7 +2,6 @@
 @import "./AvatarGroup-parameters.css";
 @import "./Badge-parameters.css";
 @import "./Breadcrumbs-parameters.css";
-@import "../base/BrowserScrollbar-parameters.css";
 @import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/CalendarLegend-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css
@@ -2,7 +2,6 @@
 @import "../sap_horizon/AvatarGroup-parameters.css";
 @import "./Badge-parameters.css";
 @import "./Breadcrumbs-parameters.css";
-@import "../base/BrowserScrollbar-parameters.css";
 @import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/CalendarLegend-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_dark_exp/parameters-bundle.css b/packages/main/src/themes/sap_horizon_dark_exp/parameters-bundle.css
@@ -2,7 +2,6 @@
 @import "../sap_horizon/AvatarGroup-parameters.css";
 @import "./Badge-parameters.css";
 @import "./Breadcrumbs-parameters.css";
-@import "../base/BrowserScrollbar-parameters.css";
 @import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/CalendarLegend-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_exp/parameters-bundle.css b/packages/main/src/themes/sap_horizon_exp/parameters-bundle.css
@@ -2,7 +2,6 @@
 @import "./AvatarGroup-parameters.css";
 @import "./Badge-parameters.css";
 @import "./Breadcrumbs-parameters.css";
-@import "../base/BrowserScrollbar-parameters.css";
 @import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/CalendarLegend-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css
@@ -1,7 +1,6 @@
 @import "./Avatar-parameters.css";
 @import "../base/AvatarGroup-parameters.css";
 @import "./Badge-parameters.css";
-@import "../base/BrowserScrollbar-parameters.css";
 @import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/CalendarLegend-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcb_exp/parameters-bundle.css
@@ -1,7 +1,6 @@
 @import "./Avatar-parameters.css";
 @import "../base/AvatarGroup-parameters.css";
 @import "./Badge-parameters.css";
-@import "../base/BrowserScrollbar-parameters.css";
 @import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/CalendarLegend-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css
@@ -1,7 +1,6 @@
 @import "./Avatar-parameters.css";
 @import "../base/AvatarGroup-parameters.css";
 @import "./Badge-parameters.css";
-@import "../base/BrowserScrollbar-parameters.css";
 @import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/CalendarLegend-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_hcw_exp/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcw_exp/parameters-bundle.css
@@ -1,7 +1,6 @@
 @import "./Avatar-parameters.css";
 @import "../base/AvatarGroup-parameters.css";
 @import "./Badge-parameters.css";
-@import "../base/BrowserScrollbar-parameters.css";
 @import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/CalendarLegend-parameters.css";