feat(framework): styles and staticAreaStyles may now be nested arrays (#2058)

Author: vladitasev

packages/base/src/StaticAreaItem.js

@@ -1,5 +1,6 @@
 import { getStaticAreaInstance, removeStaticArea } from "./StaticArea.js";
 import RenderScheduler from "./RenderScheduler.js";
+import getStylesString from "./theming/getStylesString.js";
 
 /**
  * @class
@@ -22,7 +23,7 @@ class StaticAreaItem {
 	 */
 	_updateFragment() {
 		const renderResult = this.ui5ElementContext.constructor.staticAreaTemplate(this.ui5ElementContext),
-			stylesToAdd = window.ShadyDOM ? false : this.ui5ElementContext.constructor.staticAreaStyles;
+			stylesToAdd = window.ShadyDOM ? false : getStylesString(this.ui5ElementContext.constructor.staticAreaStyles);
 
 		if (!this.staticAreaItemDomRef) {
 			// Initial rendering of fragment

packages/base/src/theming/getEffectiveStyle.js

@@ -1,15 +1,12 @@
 import { getCustomCSS } from "./CustomStyle.js";
+import getStylesString from "./getStylesString.js";
 
 const getEffectiveStyle = ElementClass => {
 	const tag = ElementClass.getMetadata().getTag();
 	const customStyle = getCustomCSS(tag) || "";
-	let componentStyles = ElementClass.styles;
 
-	if (Array.isArray(componentStyles)) {
-		componentStyles = componentStyles.join(" ");
-	}
-	return `${componentStyles} ${customStyle}`;
+	const builtInStyles = getStylesString(ElementClass.styles);
+	return `${builtInStyles} ${customStyle}`;
 };
 
-
 export default getEffectiveStyle;

packages/base/src/theming/getStylesString.js

@@ -0,0 +1,13 @@
+const getStylesString = styles => {
+	if (Array.isArray(styles)) {
+		return flatten(styles).join(" ");
+	}
+
+	return styles;
+};
+
+const flatten = arr => {
+	return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatten(val) : val), []);
+};
+
+export default getStylesString;

packages/fiori/src/UploadCollectionItem.js

@@ -242,7 +242,7 @@ class UploadCollectionItem extends ListItem {
 	}
 
 	static get styles() {
-		return [...ListItem.styles, UploadCollectionItemCss];
+		return [ListItem.styles, UploadCollectionItemCss];
 	}
 
 	static get template() {

packages/main/src/CustomListItem.js

@@ -50,7 +50,7 @@ class CustomListItem extends ListItem {
 	}
 
 	static get styles() {
-		return [...ListItem.styles, customListItemCss];
+		return [ListItem.styles, customListItemCss];
 	}
 
 	get classes() {

packages/main/src/DateRangePicker.js

@@ -82,7 +82,7 @@ class DateRangePicker extends DatePicker {
 	}
 
 	static get styles() {
-		return [...DatePicker.styles, DateRangePickerCss];
+		return [DatePicker.styles, DateRangePickerCss];
 	}
 
 	static get template() {

packages/main/src/DateTimePicker.js

@@ -176,7 +176,7 @@ class DateTimePicker extends DatePicker {
 	}
 
 	static get staticAreaStyles() {
-		return [...super.staticAreaStyles, DateTimePickerPopoverCss];
+		return [super.staticAreaStyles, DateTimePickerPopoverCss];
 	}
 
 	static async onDefine() {

packages/main/src/ResponsivePopover.js

@@ -80,7 +80,7 @@ class ResponsivePopover extends Popover {
 	}
 
 	static get styles() {
-		return [...Popover.styles, ResponsivePopoverCss];
+		return [Popover.styles, ResponsivePopoverCss];
 	}
 
 	static get template() {

packages/main/src/TabContainer.js

@@ -222,11 +222,11 @@ class TabContainer extends UI5Element {
 	}
 
 	static get styles() {
-		return [...tabStyles, tabContainerCss];
+		return [tabStyles, tabContainerCss];
 	}
 
 	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, ...staticAreaTabStyles];
+		return [ResponsivePopoverCommonCss, staticAreaTabStyles];
 	}
 
 	static get render() {

packages/main/src/TreeListItem.js

@@ -161,7 +161,7 @@ class TreeListItem extends ListItem {
 	}
 
 	static get styles() {
-		return [...ListItem.styles, treeListItemCss];
+		return [ListItem.styles, treeListItemCss];
 	}
 
 	static get metadata() {