From 5734272796dd014bf31cf23d8390ee07d68d17fb Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Fri, 12 Feb 2021 16:49:44 +0200 Subject: [PATCH 1/3] fix(ui5-icon): ui5-icon i18n works for all packages --- packages/base/src/asset-registries/Icons.js | 10 ++++-- packages/fiori/src/Assets.js | 2 +- packages/icons-tnt/src/SAP-icons-TNT.json | 3 +- packages/icons/src/SAP-icons.json | 1 + packages/main/src/Assets.js | 1 + packages/main/src/Icon.js | 35 ++++++++++++--------- packages/tools/lib/create-icons/index.js | 12 ++++--- 7 files changed, 40 insertions(+), 24 deletions(-) diff --git a/packages/base/src/asset-registries/Icons.js b/packages/base/src/asset-registries/Icons.js index ea3b5461ec1d..caf5c076778e 100644 --- a/packages/base/src/asset-registries/Icons.js +++ b/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 => { diff --git a/packages/fiori/src/Assets.js b/packages/fiori/src/Assets.js index a619357ac471..09fc064e87b2 100644 --- a/packages/fiori/src/Assets.js +++ b/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 diff --git a/packages/icons-tnt/src/SAP-icons-TNT.json b/packages/icons-tnt/src/SAP-icons-TNT.json index cfd0ed97ac0d..287ab897e070 100644 --- a/packages/icons-tnt/src/SAP-icons-TNT.json +++ b/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" } } -} \ No newline at end of file +} diff --git a/packages/icons/src/SAP-icons.json b/packages/icons/src/SAP-icons.json index b2c3dab1db9a..14d5f72b8ef0 100644 --- a/packages/icons/src/SAP-icons.json +++ b/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" diff --git a/packages/main/src/Assets.js b/packages/main/src/Assets.js index b68771f88535..24b4e36d937e 100644 --- a/packages/main/src/Assets.js +++ b/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"; diff --git a/packages/main/src/Icon.js b/packages/main/src/Icon.js index 3825c530df63..1aa1452cd575 100644 --- a/packages/main/src/Icon.js +++ b/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,13 @@ const metadata = { invalid: { type: Boolean, }, + + /** + * @private + */ + accessibleNameText: { + type: String, + }, }, events: { /** @@ -158,11 +166,6 @@ const metadata = { * @public */ class Icon extends UI5Element { - constructor() { - super(); - this.i18nBundle = getI18nBundle("@ui5/webcomponents-icons"); - } - static get metadata() { return metadata; } @@ -181,7 +184,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) { @@ -284,18 +286,21 @@ class Icon extends UI5Element { this.pathData = iconData.pathData; this.accData = iconData.accData; this.ltr = iconData.ltr; - } + this.packageName = iconData.packageName; - get hasIconTooltip() { - return this.showTooltip && this.accessibleNameText; - } - - get accessibleNameText() { if (this.accessibleName) { - return this.accessibleName; + this.accessibleNameText = this.accessibleName; + } else { + if (!getI18nBundleData(this.packageName)) { + await fetchI18nBundle(this.packageName); + } + const i18nBundle = getI18nBundle(this.packageName); + this.accessibleNameText = i18nBundle.getText(this.accData) || undefined; } + } - return this.i18nBundle.getText(this.accData) || undefined; + get hasIconTooltip() { + return this.showTooltip && this.accessibleNameText; } async onEnterDOM() { diff --git a/packages/tools/lib/create-icons/index.js b/packages/tools/lib/create-icons/index.js index 5d2f30c8e975..231235b3d5ae 100644 --- a/packages/tools/lib/create-icons/index.js +++ b/packages/tools/lib/create-icons/index.js @@ -8,19 +8,20 @@ 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}"; @@ -28,8 +29,9 @@ 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)); From 20834fedfa4455f00b4fb1e638002cb626df159a Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Fri, 12 Feb 2021 17:09:13 +0200 Subject: [PATCH 2/3] rename var --- packages/main/src/Icon.hbs | 4 ++-- packages/main/src/Icon.js | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/main/src/Icon.hbs b/packages/main/src/Icon.hbs index f123913ff14f..d65eefa63c17 100644 --- a/packages/main/src/Icon.hbs +++ b/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}} - {{accessibleNameText}} + {{effectiveAccessibleName}} {{/if}} diff --git a/packages/main/src/Icon.js b/packages/main/src/Icon.js index 1aa1452cd575..e730fbfcbfaf 100644 --- a/packages/main/src/Icon.js +++ b/packages/main/src/Icon.js @@ -118,7 +118,7 @@ const metadata = { /** * @private */ - accessibleNameText: { + effectiveAccessibleName: { type: String, }, }, @@ -237,7 +237,7 @@ class Icon extends UI5Element { return "button"; } - return this.accessibleNameText ? "img" : "presentation"; + return this.effectiveAccessibleName ? "img" : "presentation"; } static createGlobalStyle() { @@ -289,18 +289,18 @@ class Icon extends UI5Element { this.packageName = iconData.packageName; if (this.accessibleName) { - this.accessibleNameText = this.accessibleName; + this.effectiveAccessibleName = this.accessibleName; } else { if (!getI18nBundleData(this.packageName)) { await fetchI18nBundle(this.packageName); } const i18nBundle = getI18nBundle(this.packageName); - this.accessibleNameText = i18nBundle.getText(this.accData) || undefined; + this.effectiveAccessibleName = i18nBundle.getText(this.accData) || undefined; } } get hasIconTooltip() { - return this.showTooltip && this.accessibleNameText; + return this.showTooltip && this.effectiveAccessibleName; } async onEnterDOM() { From ca01513bc904ac090a29750f0cf04df16f7de319 Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Fri, 12 Feb 2021 17:41:26 +0200 Subject: [PATCH 3/3] only fetch i18n if the icon has acc data --- packages/main/src/Icon.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/main/src/Icon.js b/packages/main/src/Icon.js index e730fbfcbfaf..96bed613c6ca 100644 --- a/packages/main/src/Icon.js +++ b/packages/main/src/Icon.js @@ -120,6 +120,7 @@ const metadata = { */ effectiveAccessibleName: { type: String, + noAttribute: true, }, }, events: { @@ -290,7 +291,7 @@ class Icon extends UI5Element { if (this.accessibleName) { this.effectiveAccessibleName = this.accessibleName; - } else { + } else if (this.accData) { if (!getI18nBundleData(this.packageName)) { await fetchI18nBundle(this.packageName); }