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

niyap · web-flow · commit 84018fc55d08 · 2021-12-14T09:58:19.000+02:00
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";

Original file line number	Diff line number	Diff line change
`@@ -24,6 +24,7 @@ import {`
`24`	`24`	`// Styles`
`25`	`25`	`import styles from "./generated/themes/TextArea.css.js";`
`26`	`26`	`import valueStateMessageStyles from "./generated/themes/ValueStateMessage.css.js";`
	`27`	`+import browserScrollbarCSS from "./generated/themes/BrowserScrollbar.css.js";`
`27`	`28`
`28`	`29`	`/**`
`29`	`30`	`* @public`
`@@ -360,7 +361,7 @@ class TextArea extends UI5Element {`
`360`	`361`	`}`
`361`	`362`
`362`	`363`	`static get styles() {`
`363`		`- return styles;`
	`364`	`+ return [browserScrollbarCSS, styles];`
`364`	`365`	`}`
`365`	`366`
`366`	`367`	`static get render() {`
Original file line number	Diff line number	Diff line change
`@@ -8,9 +8,11 @@`
`8`	`8`
`9`	`9`	`::-webkit-scrollbar {`
`10`	`10`	`background-color: var(--sapScrollBar_TrackColor);`
	`11`	`+ border-left: var(--browser_scrollbar_border);`
`11`	`12`	`}`
`12`	`13`
`13`	`14`	`::-webkit-scrollbar-thumb {`
	`15`	`+ border-radius: var(--browser_scrollbar_border_radius);`
`14`	`16`	`background-color: var(--sapScrollBar_FaceColor);`
`15`	`17`	`}`
`16`	`18`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +:root {
 +	--browser_scrollbar_border_radius: var(--sapElement_BorderCornerRadius);
 +	--browser_scrollbar_border: none;
 +}