fix(theming): fix icons version display for custom themes (built via …

…the ThemeDesigner) (#6815)

Currently, for older themes (sap_belize, sap_fiori_3) we display old icon fonts, while for sap_horizon - the latest icon fonts. This applies for all icon collections. And, to do that we check if the current theme is part of the sap_horizon theme family or not. However, once an app is using custom theme, the current theme has a custom theme and by default we will enforce the old icon fonts, because the custom theme name won't match "sap_horizon".
With this change, when the current theme name is not part of the built-in theme families, we now look for an custom theme and check the base theme that the custom theme is built upon:
rename isThemeFamily to isLegacyThemeFamily and adopt it in the code (all isThemeFamily("sap_horizon") calls are replaced with !isLegacyThemeFamily)
isLegacyThemeFamily now checks the baseTheme of the custom theme if present
add test (one when built-in theme is set and when theme designer custom theme is used)

Related to: #6758

packages/base/lib/generate-asset-parameters/index.js

@@ -4,12 +4,14 @@ const assets = require('@ui5/webcomponents-tools/assets-meta.js');
 const fileContent = `const assetParameters = ${JSON.stringify(assets)};
 
 const DEFAULT_THEME = assetParameters.themes.default;
+const SUPPORTED_THEMES = assetParameters.themes.all;
 const DEFAULT_LANGUAGE = assetParameters.languages.default;
 const DEFAULT_LOCALE = assetParameters.locales.default;
 const SUPPORTED_LOCALES = assetParameters.locales.all;
 
 export {
 	DEFAULT_THEME,
+	SUPPORTED_THEMES,
 	DEFAULT_LANGUAGE,
 	DEFAULT_LOCALE,
 	SUPPORTED_LOCALES,

packages/base/src/config/Icons.ts

@@ -1,4 +1,4 @@
-import { getTheme, isThemeFamily } from "./Theme.js";
+import { getTheme, isLegacyThemeFamily } from "./Theme.js";
 import { getIconCollectionByAlias } from "../assets-meta/IconCollectionsAlias.js";
 
 const IconCollectionConfiguration = new Map<string, string>();
@@ -97,18 +97,18 @@ const getEffectiveIconCollection = (collectionName?: IconCollection): IconCollec
  * @returns { RegisteredIconCollection } the registered collection name
  */
 const getIconCollectionByTheme = (collectionName?: IconCollection): RegisteredIconCollection => {
-	const horizonThemeFamily = isThemeFamily("sap_horizon");
+	const legacyThemeFamily = isLegacyThemeFamily();
 
 	if (!collectionName) {
-		return horizonThemeFamily ? RegisteredIconCollection.SAPIconsV5 : RegisteredIconCollection.SAPIconsV4;
+		return legacyThemeFamily ? RegisteredIconCollection.SAPIconsV4 : RegisteredIconCollection.SAPIconsV5;
 	}
 
 	if (collectionName === "tnt") {
-		return horizonThemeFamily ? RegisteredIconCollection.SAPIconsTNTV3 : RegisteredIconCollection.SAPIconsTNTV2;
+		return legacyThemeFamily ? RegisteredIconCollection.SAPIconsTNTV2 : RegisteredIconCollection.SAPIconsTNTV3;
 	}
 
 	if (collectionName === "business-suite") {
-		return horizonThemeFamily ? RegisteredIconCollection.SAPBSIconsV2 : RegisteredIconCollection.SAPBSIconsV1;
+		return legacyThemeFamily ? RegisteredIconCollection.SAPBSIconsV1 : RegisteredIconCollection.SAPBSIconsV2;
 	}
 
 	return collectionName as RegisteredIconCollection;

packages/base/src/config/Theme.ts

@@ -1,7 +1,8 @@
 import { getTheme as getConfiguredTheme } from "../InitialConfiguration.js";
 import { reRenderAllUI5Elements } from "../Render.js";
 import applyTheme from "../theming/applyTheme.js";
-import { DEFAULT_THEME } from "../generated/AssetParameters.js";
+import getThemeDesignerTheme from "../theming/getThemeDesignerTheme.js";
+import { DEFAULT_THEME, SUPPORTED_THEMES } from "../generated/AssetParameters.js";
 
 let curTheme: string;
 
@@ -60,19 +61,28 @@ const isTheme = (theme: string) => {
 };
 
 /**
- * Returns if the current theme is part of given theme family.
+ * Returns if the currently set theme is part of legacy theme families ("sap_belize" or "sap_fiori_3").
+ * <b>Note</b>: in addition, the method checks the base theme of a custom theme, built via the ThemeDesigner.
+ *
  * @private
- * @param {string} theme the theme family
- * @returns {boolean}
+ * @returns { boolean }
  */
-const isThemeFamily = (theme: string) => {
-	return getTheme().startsWith(theme);
+const isLegacyThemeFamily = () => {
+	const currentTheme = getTheme();
+
+	if (!isKnownTheme(currentTheme)) {
+		return !getThemeDesignerTheme()?.baseThemeName?.startsWith("sap_horizon");
+	}
+
+	return !currentTheme.startsWith("sap_horizon");
 };
 
+const isKnownTheme = (theme: string) => SUPPORTED_THEMES.includes(theme);
+
 export {
 	getTheme,
 	setTheme,
 	isTheme,
-	isThemeFamily,
+	isLegacyThemeFamily,
 	getDefaultTheme,
 };

packages/base/src/global.d.ts

@@ -20,11 +20,13 @@ declare global {
 
 	module "*generated/AssetParameters.js" {
 		const DEFAULT_THEME: string;
+		const SUPPORTED_THEMES: Array<string>;
 		const DEFAULT_LANGUAGE: string;
 		const DEFAULT_LOCALE: string;
 		const SUPPORTED_LOCALES: Array<string>;
 		export {
 			DEFAULT_THEME,
+			SUPPORTED_THEMES,
 			DEFAULT_LANGUAGE,
 			DEFAULT_LOCALE,
 			SUPPORTED_LOCALES,

packages/main/bundle.common.js

@@ -105,8 +105,9 @@ window.sanitizeHTML = sanitizeHTML;
 window.URLListValidator = URLListValidator;
 
 import { getAnimationMode, setAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
-import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
+import { getTheme, setTheme, isLegacyThemeFamily } from "@ui5/webcomponents-base/dist/config/Theme.js";
 import { getLanguage, setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
+import { getEffectiveIconCollection } from "@ui5/webcomponents-base/config/Icons.js";
 import { setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
 import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
 import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
@@ -138,6 +139,7 @@ const testAssets = {
 		setAnimationMode,
 		getTheme,
 		setTheme,
+		isLegacyThemeFamily,
 		getLanguage,
 		setLanguage,
 		setNoConflict,
@@ -159,6 +161,7 @@ const testAssets = {
 	renderFinished,
 	defaultTexts,
 	getExportedIconsValues: () => icons,
+	getEffectiveIconCollection,
 };
 
 // The SAP Icons V4 icon collection is set by default in sap_fiori_3,

packages/main/test/pages/base/IconCollection.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="EN">
+
+<head>
+	<title>ui5 webcomponents</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta charset="utf-8">
+
+	<script src="../../../bundle.esm.js" type="module"></script>
+
+	<script data-ui5-config type="application/json">
+		{
+			"theme": "sap_fiori_3_dark"
+		}
+	</script>
+</head>
+
+<body>
+
+	<ui5-icon name="home"></ui5-icon>
+</body>
+</html>

packages/main/test/pages/base/IconCollectionInCustomTheme.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="EN">
+
+<head>
+	<title>ui5 webcomponents</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta charset="utf-8">
+
+	<link rel="stylesheet" type="text/css" href="../css/css_variables.horizon.css">
+	<script src="../../../bundle.esm.js" type="module"></script>
+
+	<script data-ui5-config type="application/json">
+		{
+			"theme": "readfish"
+		}
+	</script>
+</head>
+
+<body>
+
+	<ui5-icon name="home"></ui5-icon>
+</body>
+</html>

packages/main/test/pages/css/css_variables.horizon.css

@@ -0,0 +1,36 @@
+/**
+* Copyright (c) 2012-2020 SAP SE or an SAP affiliate company. All rights reserved.
+*
+* Theming Engine 1.60.0
+* data:{"Path": "Base.baseLib.redfish.css_variables", "PathPattern": "/%frameworkId%/%libId%/%themeId%/%fileId%.css", "Extends": ["sap_horizon","sap_base_fiori","baseTheme"], "Tags": ["Horizon","LightColorScheme"], "Version": { "Build":"11.1.27.20210312160011", "Source": "11.1.27", "Engine": "1.60.0"}}
+*/
+.sapThemeMetaData-Base-baseLib{background-image: url('data:text/plain;utf-8,{"Path": "Base.baseLib.redfish.css_variables", "PathPattern": "/%frameworkId%/%libId%/%themeId%/%fileId%.css", "Extends": ["sap_horizon","sap_base_fiori","baseTheme"], "Tags": ["Horizon","LightColorScheme"], "Version": { "Build":"11.1.27.20210312160011", "Source": "11.1.27", "Engine": "1.60.0"}}');}
+:root {
+  --sapBrandColor: #f42015;
+  --sapHighlightColor: #f42015;
+  --sapBaseColor: #fff;
+  --sapShellColor: #f42015;
+  --sapBackgroundColor: #f7f7f7;
+  --sapFontFamily: "72", "72full", Arial, Helvetica, sans-serif;
+  --sapFontSize: .875rem;
+  --sapTextColor: #000;
+  --sapLinkColor: #f42015;
+  --sapLink_Hover_Color: #0854a0;
+  --sapLink_Active_Color: #f42015;
+  --sapLink_Visited_Color: #f42015;
+  --sapLink_InvertedColor: #d3e8fd;
+  --sapLink_SubtleColor: #074888;
+  --sapCompanyLogo: none;
+  --sapBackgroundImage: none;
+  --sapBackgroundImageOpacity: 1.0;
+  --sapBackgroundImageRepeat: false;
+  --sapSelectedColor: #f42015;
+  --sapActiveColor: #f42015;
+  --sapHighlightTextColor: #fff;
+  --sapTitleColor: #8c0d24;
+  --sapNegativeColor: #f42015;
+  --sapCriticalColor: #e9730c;
+  --sapPositiveColor: #1c5032;
+  --sapInformativeColor: #f42015;
+  --sapNeutralColor: #716a71;
+}

packages/main/test/specs/base/IconCollection.spec.js

@@ -0,0 +1,70 @@
+const assert = require("chai").assert;
+
+describe("Icon collection", () => {
+	before(async () => {
+		await browser.url("test/pages/base/IconCollection.html");
+	});
+
+	it("Tests the icon collection in built-in themes", async () => {
+		const result = await browser.executeAsync(done => {
+			const bundle = window['sap-ui-webcomponents-bundle'];
+
+			const res = {};
+			res.iconCollection = bundle.getEffectiveIconCollection();
+			res.isLegacyThemeFamily = bundle.configuration.isLegacyThemeFamily();
+			done(res);
+		});
+
+		// assert: "SAP-icons-v4" is used in legacy "sap_fiori_3_dark" theme
+		assert.strictEqual(result.iconCollection, "SAP-icons-v4",
+			"The 'SAP-icons-v4' collection is correctly used in 'sap_fiori_3_dark' theme");
+		assert.strictEqual(result.isLegacyThemeFamily, true,
+			"The 'sap_fiori_3_dark' is part of legacy theme family");
+
+
+		// act: setTheme("sap_horizon")
+		await browser.executeAsync(async (done) => {
+			await window['sap-ui-webcomponents-bundle'].configuration.setTheme("sap_horizon");
+			done();
+		});
+
+		const result2 = await browser.executeAsync(done => {
+			const bundle = window['sap-ui-webcomponents-bundle'];
+
+			const res = {};
+			res.iconCollection = bundle.getEffectiveIconCollection();
+			res.isLegacyThemeFamily = bundle.configuration.isLegacyThemeFamily();
+			done(res);
+		});
+
+		// assert:  "SAP-icons-v5" is used in latest "sap_horizon" theme
+		assert.strictEqual(result2.iconCollection, "SAP-icons-v5",
+			"The 'SAP-icons-v5' collection is correctly used in 'sap_horizon' theme");
+		assert.strictEqual(result2.isLegacyThemeFamily, false,
+			"The 'sap_horizon' is not part of legacy theme family, it's the latest one");
+	});
+});
+
+describe("Icon collection in Custom Theme", () => {
+	before(async () => {
+		// The test page is using custom theme (based on "sap_horizon")
+		await browser.url("test/pages/base/IconCollectionInCustomTheme.html");
+	});
+
+	it("Tests the icon collection in a custom theme", async () => {
+		const result = await browser.executeAsync(done => {
+			const bundle = window['sap-ui-webcomponents-bundle'];
+
+			const res = {};
+			res.iconCollection = bundle.getEffectiveIconCollection();
+			res.isLegacyThemeFamily = bundle.configuration.isLegacyThemeFamily();
+
+			done(res);
+		});
+
+		assert.strictEqual(result.iconCollection, "SAP-icons-v5",
+			"The 'SAP-icons-v5' collection is correctly used in 'redfish' - extending 'sap_horizon'");
+		assert.strictEqual(result.isLegacyThemeFamily, false,
+			"The 'redfish' custom theme is not part of legacy theme family, as it's extending 'sap_horizon'.");
+	});
+});

packages/tools/lib/create-icons/index.js

@@ -38,11 +38,11 @@ export { pathData, ltr, accData };`;
 
 
 
-const collectionTemplate = (name, versions, fullName) => `import { isThemeFamily } from "@ui5/webcomponents-base/dist/config/Theme.js";
+const collectionTemplate = (name, versions, fullName) => `import { isLegacyThemeFamily } from "@ui5/webcomponents-base/dist/config/Theme.js";
 import { pathData as pathData${versions[0]}, ltr, accData } from "./${versions[0]}/${name}.js";
 import { pathData as pathData${versions[1]} } from "./${versions[1]}/${name}.js";
 
-const pathData = isThemeFamily("sap_horizon") ? pathData${versions[1]} : pathData${versions[0]};
+const pathData = isLegacyThemeFamily() ? pathData${versions[0]} : pathData${versions[1]};
 
 export default "${fullName}";
 export { pathData, ltr, accData };`;