fix(ui5-dialog): Fixed scrollbars styling (#3067)

Fixes: #2887

Author: TeodorTaushanov

packages/main/src/Dialog.js

@@ -8,6 +8,7 @@ import Icon from "./Icon.js";
 // 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";
 
@@ -180,7 +181,7 @@ class Dialog extends Popup {
 	}
 
 	static get styles() {
-		return [PopupsCommonCss, dialogCSS];
+		return [browserScrollbarCSS, PopupsCommonCss, dialogCSS];
 	}
 
 	/**

packages/main/src/Popover.js

@@ -11,6 +11,7 @@ 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";
 
@@ -263,7 +264,7 @@ class Popover extends Popup {
 	}
 
 	static get styles() {
-		return [PopupsCommonCss, PopoverCss];
+		return [browserScrollbarCSS, PopupsCommonCss, PopoverCss];
 	}
 
 	static get template() {

packages/main/src/themes/BrowserScrollbar.css

@@ -0,0 +1,23 @@
+::-webkit-scrollbar:horizontal {
+	height: var(--sapScrollBar_Dimension);
+}
+
+::-webkit-scrollbar:vertical {
+	width: var(--sapScrollBar_Dimension);
+}
+
+::-webkit-scrollbar {
+	background-color: var(--sapScrollBar_TrackColor);
+}
+
+::-webkit-scrollbar-thumb {
+	background-color: var(--sapScrollBar_FaceColor);
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background-color: var(--sapScrollBar_Hover_FaceColor);
+}
+
+::-webkit-scrollbar-corner {
+	background-color: var(--sapScrollBar_TrackColor);
+}

packages/main/test/pages/Dialog.html

@@ -56,7 +56,7 @@
 
 	<ui5-block-layer></ui5-block-layer>
 
-	<ui5-dialog id="msg-dialog" header-text="Message dialog">
+	<ui5-dialog id="msg-dialog" header-text="Message dialog" style="--sapScrollBar_Dimension: 20px">
 		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
 			That´s OpenUI5.</p>
 		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.