From 63ff8007889a66efae074fc6b4dbcb1b7ea36713 Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Fri, 31 Mar 2023 10:05:12 +0300 Subject: [PATCH] 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 --- .../lib/generate-asset-parameters/index.js | 2 + packages/base/src/config/Icons.ts | 10 +-- packages/base/src/config/Theme.ts | 24 +++++-- packages/base/src/global.d.ts | 2 + packages/main/bundle.common.js | 5 +- .../main/test/pages/base/IconCollection.html | 22 ++++++ .../base/IconCollectionInCustomTheme.html | 23 ++++++ .../test/pages/css/css_variables.horizon.css | 36 ++++++++++ .../test/specs/base/IconCollection.spec.js | 70 +++++++++++++++++++ packages/tools/lib/create-icons/index.js | 4 +- 10 files changed, 183 insertions(+), 15 deletions(-) create mode 100644 packages/main/test/pages/base/IconCollection.html create mode 100644 packages/main/test/pages/base/IconCollectionInCustomTheme.html create mode 100644 packages/main/test/pages/css/css_variables.horizon.css create mode 100644 packages/main/test/specs/base/IconCollection.spec.js diff --git a/packages/base/lib/generate-asset-parameters/index.js b/packages/base/lib/generate-asset-parameters/index.js index d3b0d8e744bd..2c46f21d1cbb 100644 --- a/packages/base/lib/generate-asset-parameters/index.js +++ b/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, diff --git a/packages/base/src/config/Icons.ts b/packages/base/src/config/Icons.ts index 50f898689b84..d9180577ee40 100644 --- a/packages/base/src/config/Icons.ts +++ b/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(); @@ -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; diff --git a/packages/base/src/config/Theme.ts b/packages/base/src/config/Theme.ts index 568c4d709b5e..e898d80b9062 100644 --- a/packages/base/src/config/Theme.ts +++ b/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"). + * Note: 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, }; diff --git a/packages/base/src/global.d.ts b/packages/base/src/global.d.ts index a33e781f16c7..14d527d18480 100644 --- a/packages/base/src/global.d.ts +++ b/packages/base/src/global.d.ts @@ -20,11 +20,13 @@ declare global { module "*generated/AssetParameters.js" { const DEFAULT_THEME: string; + const SUPPORTED_THEMES: Array; const DEFAULT_LANGUAGE: string; const DEFAULT_LOCALE: string; const SUPPORTED_LOCALES: Array; export { DEFAULT_THEME, + SUPPORTED_THEMES, DEFAULT_LANGUAGE, DEFAULT_LOCALE, SUPPORTED_LOCALES, diff --git a/packages/main/bundle.common.js b/packages/main/bundle.common.js index 32f3f6004d53..4dab43de2408 100644 --- a/packages/main/bundle.common.js +++ b/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, diff --git a/packages/main/test/pages/base/IconCollection.html b/packages/main/test/pages/base/IconCollection.html new file mode 100644 index 000000000000..93a772a336ef --- /dev/null +++ b/packages/main/test/pages/base/IconCollection.html @@ -0,0 +1,22 @@ + + + + + ui5 webcomponents + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/main/test/pages/base/IconCollectionInCustomTheme.html b/packages/main/test/pages/base/IconCollectionInCustomTheme.html new file mode 100644 index 000000000000..ea251065bade --- /dev/null +++ b/packages/main/test/pages/base/IconCollectionInCustomTheme.html @@ -0,0 +1,23 @@ + + + + + ui5 webcomponents + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/main/test/pages/css/css_variables.horizon.css b/packages/main/test/pages/css/css_variables.horizon.css new file mode 100644 index 000000000000..03a8e0babbdb --- /dev/null +++ b/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; +} diff --git a/packages/main/test/specs/base/IconCollection.spec.js b/packages/main/test/specs/base/IconCollection.spec.js new file mode 100644 index 000000000000..6b6b3f228aec --- /dev/null +++ b/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'."); + }); +}); \ No newline at end of file diff --git a/packages/tools/lib/create-icons/index.js b/packages/tools/lib/create-icons/index.js index ffee0acbca3f..7d1bfeb3d9dc 100644 --- a/packages/tools/lib/create-icons/index.js +++ b/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 };`;