fix(ui5-textarea): apply specified scrollbar stylings (SAP#4477)

eshpak · Jan 8, 2022 · 6376a2e · 6376a2e
1 parent c6b0db7
commit 6376a2e
Show file tree

Hide file tree

Showing 15 changed files with 29 additions and 1 deletion.
diff --git a/packages/main/src/TextArea.js b/packages/main/src/TextArea.js
@@ -24,6 +24,7 @@ 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";
 
 /**
  * @public
@@ -360,7 +361,7 @@ class TextArea extends UI5Element {
 	}
 
 	static get styles() {
-		return styles;
+		return [browserScrollbarCSS, styles];
 	}
 
 	static get render() {

diff --git a/packages/main/src/themes/BrowserScrollbar.css b/packages/main/src/themes/BrowserScrollbar.css
@@ -8,9 +8,11 @@
 
 ::-webkit-scrollbar {
 	background-color: var(--sapScrollBar_TrackColor);
+	border-left: var(--browser_scrollbar_border);
 }
 
 ::-webkit-scrollbar-thumb {
+	border-radius: var(--browser_scrollbar_border_radius);
 	background-color: var(--sapScrollBar_FaceColor);
 }
 

diff --git a/packages/main/src/themes/base/BrowserScrollbar-parameters.css b/packages/main/src/themes/base/BrowserScrollbar-parameters.css
@@ -0,0 +1,4 @@
+:root {
+	--browser_scrollbar_border_radius: var(--sapElement_BorderCornerRadius);
+	--browser_scrollbar_border: none;
+}
diff --git a/packages/main/src/themes/sap_belize/BrowserScrollbar-parameters.css b/packages/main/src/themes/sap_belize/BrowserScrollbar-parameters.css
@@ -0,0 +1,4 @@
+:root {
+	--browser_scrollbar_border_radius: 0;
+	--browser_scrollbar_border: none;
+}
diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/Avatar-parameters.css";
 @import "../base/Badge-parameters.css";
+@import "./BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "../base/Button-parameters.css";
 @import "../base/DatePicker-parameters.css";

diff --git a/packages/main/src/themes/sap_belize_hcb/BrowserScrollbar-parameters.css b/packages/main/src/themes/sap_belize_hcb/BrowserScrollbar-parameters.css
@@ -0,0 +1,4 @@
+:root {
+	--browser_scrollbar_border_radius: 0px;
+	--browser_scrollbar_border: 0.0625rem solid #999;
+}
diff --git a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "./Avatar-parameters.css";
 @import "./Badge-parameters.css";
+@import "./BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "./CalendarHeader-parameters.css";

diff --git a/packages/main/src/themes/sap_belize_hcw/BrowserScrollbar-parameters.css b/packages/main/src/themes/sap_belize_hcw/BrowserScrollbar-parameters.css
@@ -0,0 +1,4 @@
+:root {
+	--browser_scrollbar_border_radius: 0;
+	--browser_scrollbar_border: 0.0625rem solid #585858;
+}
diff --git a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "./Avatar-parameters.css";
 @import "./Badge-parameters.css";
+@import "./BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "./CalendarHeader-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,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "./Avatar-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,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "./Avatar-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_hcb/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "./Avatar-parameters.css";
 @import "./Badge-parameters.css";
+@import "../base/BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "./CalendarHeader-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,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "./Avatar-parameters.css";
 @import "./Badge-parameters.css";
+@import "../base/BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "./CalendarHeader-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon/parameters-bundle.css b/packages/main/src/themes/sap_horizon/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "./sizes-parameters.css";
 @import "./Avatar-parameters.css";
 @import "../base/Badge-parameters.css";
+@import "../base/BrowserScrollbar-parameters.css";
 @import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/Card-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
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/Avatar-parameters.css";
 @import "../base/Badge-parameters.css";
+@import "../base/BrowserScrollbar-parameters.css";
 @import "./Button-parameters.css";
 @import "./Badge-parameters.css";
 @import "../base/Card-parameters.css";