fix(ui5-icon): ui5-icon i18n works for all packages (#2816)

Author: vladitasev

packages/base/src/asset-registries/Icons.js

@@ -36,18 +36,24 @@ const _fillRegistry = bundleData => {
 			ltr: iconData.ltr,
 			accData: iconData.acc,
 			collection: bundleData.collection,
+			packageName: bundleData.packageName,
 		 });
 	});
 };
 
 // set
-const registerIcon = (name, { pathData, ltr, accData, collection } = {}) => { // eslint-disable-line
+const registerIcon = (name, { pathData, ltr, accData, collection, packageName } = {}) => { // eslint-disable-line
 	if (!collection) {
 		collection = DEFAULT_COLLECTION;
 	}
 
 	const key = `${collection}/${name}`;
-	registry.set(key, { pathData, ltr, accData });
+	registry.set(key, {
+		pathData,
+		ltr,
+		accData,
+		packageName,
+	});
 };
 
 const _parseName = name => {

packages/fiori/src/Assets.js

@@ -1,4 +1,4 @@
-// main package assets (transitively base and theme-base)
+// main package assets (transitively base, theme-base and icons)
 import "@ui5/webcomponents/dist/Assets.js";
 
 // own fiori package assets

packages/icons-tnt/src/SAP-icons-TNT.json

@@ -1,5 +1,6 @@
 {
   "collection": "tnt",
+  "packageName": "@ui5/webcomponents-icons-tnt",
   "data": {
     "actor": {
       "path": "M254.871 140q-29 0-49-20.5t-20-49.5 20-49.5 49-20.5 50 20.5 21 49.5-21 49.5-50 20.5zm0-116q-18 0-32 13.5t-14 32.5 14 33 32 14q20 0 33.5-14t13.5-33-13.5-32.5-33.5-13.5zm140 48q9-6 21-6 16 0 29.5 12t11.5 32q-2 14-15 24l-100 76q-7 7-7 15v250q0 15-10.5 26t-27.5 11q-15 0-26-11t-11-26V352h-8v123q0 15-11 26t-26 11q-17 0-27.5-11t-10.5-26V225q0-8-14-20.5t-32-26.5-35.5-26-25.5-18q-12-9-14.5-21t2.5-23 15-18.5 22-7.5q13 0 22 8l107 80h64l35-25zm-171 106q-2 0-6-2t-16-10-35.5-25.5-65.5-48.5q-5-4-11-4-9 0-12.5 9t7.5 17l100 75q17 14 17 36v250q0 11 13 11 5 0 8.5-3t3.5-8V347q0-20 20-20h18q20 0 20 20v128q0 5 3.5 8t8.5 3q13 0 13-11V225q0-22 17-36l100-75q10-7 6.5-15.5t-13.5-8.5q-6 0-9 2l-94 71-17.5 12.5-7.5 2.5h-68z"
@@ -449,4 +450,4 @@
       "path": "M179 96V64h77v128h51v-19q0-11 7.5-18t18.5-7h153q11 0 18.5 7t7.5 18v154q0 11-7.5 18t-18.5 7H333q-11 0-18.5-7t-7.5-18V224h-83V96h-45zM10 358h133q11 0 11 11v47h22v32h-22v54q0 10-11 10H10q-10 0-10-10V369q0-11 10-11zM0 80q0-33 23.5-56.5T80 0t56.5 23.5T160 80t-23.5 56.5T80 160t-56.5-23.5T0 80zm461 221V199H358v102h103zM192 416h32v-32h32v64h-64v-32zm32-160h32v32h-32v-32zm32 64v32h-32v-32h32z"
     }
   }
-}
+}

packages/icons/src/SAP-icons.json

@@ -1,5 +1,6 @@
 {
   "collection": "SAP-icons",
+  "packageName": "@ui5/webcomponents-icons",
   "data": {
     "Chart-Tree-Map": {
       "path": "M32 472V40q0-8 8-8h176q8 0 8 8v432q0 8-8 8H40q-8 0-8-8zm224-256V40q0-8 8-8h208q8 0 8 8v176q0 8-8 8H264q-8 0-8-8zm0 48q0-8 8-8h80q8 0 8 8v208q0 8-8 8h-80q-8 0-8-8V264zm128 0q0-8 8-8h80q8 0 8 8v80q0 8-8 8h-80q-8 0-8-8v-80zm0 128q0-8 8-8h80q8 0 8 8v80q0 8-8 8h-80q-8 0-8-8v-80z"

packages/main/src/Assets.js

@@ -1,5 +1,6 @@
 import "@ui5/webcomponents-localization/dist/Assets.js"; // CLDR
 import "@ui5/webcomponents-theme-base/dist/Assets.js"; // Theming
+import "@ui5/webcomponents-icons/dist/Assets.js"; // Icons texts
 
 // own main package assets
 import "./generated/json-imports/Themes.js";

packages/main/src/Icon.hbs

@@ -6,7 +6,7 @@
 	role="{{role}}"
 	focusable="false"
 	preserveAspectRatio="xMidYMid meet"
-	aria-label="{{accessibleNameText}}"
+	aria-label="{{effectiveAccessibleName}}"
 	xmlns="http://www.w3.org/2000/svg"
 	@focusin={{_onfocusin}}
 	@focusout={{_onfocusout}}
@@ -15,7 +15,7 @@
 	@click={{_onclick}}
 >
 	{{#if hasIconTooltip}}
-		<title id="{{_id}}-tooltip">{{accessibleNameText}}</title>
+		<title id="{{_id}}-tooltip">{{effectiveAccessibleName}}</title>
 	{{/if}}
 
 	<g role="presentation">

packages/main/src/Icon.js

@@ -2,7 +2,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getIconData, getIconDataSync } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
 import createStyleInHead from "@ui5/webcomponents-base/dist/util/createStyleInHead.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundleData, fetchI18nBundle } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import isLegacyBrowser from "@ui5/webcomponents-base/dist/isLegacyBrowser.js";
 import IconTemplate from "./generated/templates/IconTemplate.lit.js";
@@ -113,6 +114,14 @@ const metadata = {
 		invalid: {
 			type: Boolean,
 		},
+
+		/**
+		 * @private
+		 */
+		effectiveAccessibleName: {
+			type: String,
+			noAttribute: true,
+		},
 	},
 	events: {
 		/**
@@ -158,11 +167,6 @@ const metadata = {
  * @public
  */
 class Icon extends UI5Element {
-	constructor() {
-		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents-icons");
-	}
-
 	static get metadata() {
 		return metadata;
 	}
@@ -181,7 +185,6 @@ class Icon extends UI5Element {
 
 	static async onDefine() {
 		this.createGlobalStyle(); // hide all icons until the first icon has rendered (and added the Icon.css)
-		await fetchI18nBundle("@ui5/webcomponents-icons");
 	}
 
 	_onfocusin(event) {
@@ -235,7 +238,7 @@ class Icon extends UI5Element {
 			return "button";
 		}
 
-		return this.accessibleNameText ? "img" : "presentation";
+		return this.effectiveAccessibleName ? "img" : "presentation";
 	}
 
 	static createGlobalStyle() {
@@ -284,18 +287,21 @@ class Icon extends UI5Element {
 		this.pathData = iconData.pathData;
 		this.accData = iconData.accData;
 		this.ltr = iconData.ltr;
-	}
-
-	get hasIconTooltip() {
-		return this.showTooltip && this.accessibleNameText;
-	}
+		this.packageName = iconData.packageName;
 
-	get accessibleNameText() {
 		if (this.accessibleName) {
-			return this.accessibleName;
+			this.effectiveAccessibleName = this.accessibleName;
+		} else if (this.accData) {
+			if (!getI18nBundleData(this.packageName)) {
+				await fetchI18nBundle(this.packageName);
+			}
+			const i18nBundle = getI18nBundle(this.packageName);
+			this.effectiveAccessibleName = i18nBundle.getText(this.accData) || undefined;
 		}
+	}
 
-		return this.i18nBundle.getText(this.accData) || undefined;
+	get hasIconTooltip() {
+		return this.showTooltip && this.effectiveAccessibleName;
 	}
 
 	async onEnterDOM() {

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

@@ -8,28 +8,30 @@ const destDir = path.normalize("dist/");
 
 mkdirp.sync(destDir);
 
-const template = (name, pathData, ltr, collection) => `import { registerIcon } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
+const template = (name, pathData, ltr, collection, packageName) => `import { registerIcon } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
 
 const name = "${name}";
 const pathData = "${pathData}";
 const ltr = ${ltr};
 const collection = "${collection}";
+const packageName = "${packageName}";
 
-registerIcon(name, { pathData, ltr, collection});
+registerIcon(name, { pathData, ltr, collection, packageName });
 
 export default { pathData };`;
 
 
-const accTemplate = (name, pathData, ltr, accData, collection) => `import { registerIcon } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
+const accTemplate = (name, pathData, ltr, accData, collection, packageName) => `import { registerIcon } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
 import { ${accData.key} } from "./generated/i18n/i18n-defaults.js";
 
 const name = "${name}";
 const pathData = "${pathData}";
 const ltr = ${ltr};
 const accData = ${accData.key};
 const collection = "${collection}";
+const packageName = "${packageName}";
 
-registerIcon(name, { pathData, ltr, accData, collection });
+registerIcon(name, { pathData, ltr, accData, collection, packageName });
 
 export default { pathData, accData };`;
 
@@ -46,7 +48,7 @@ const createIcons = (file) => {
 		const ltr = !!iconData.ltr;
 		const acc = iconData.acc;
 
-		const content = acc ? accTemplate(name, pathData, ltr, acc, json.collection) : template(name, pathData, ltr, json.collection);
+		const content = acc ? accTemplate(name, pathData, ltr, acc, json.collection, json.packageName) : template(name, pathData, ltr, json.collection, json.packageName);
 
 		fs.writeFileSync(path.join(destDir, `${name}.js`), content);
 		fs.writeFileSync(path.join(destDir, `${name}.svg`), svgTemplate(pathData));