From 12f4567f7de6023b218d58e3babe55e4dedadbb0 Mon Sep 17 00:00:00 2001 From: PetyaMarkovaBogdanova Date: Mon, 14 Apr 2025 11:40:30 +0300 Subject: [PATCH 01/19] fix(ui5-shellbar): avatar font-size reduced --- packages/fiori/src/themes/ShellBar.css | 2 ++ packages/fiori/test/pages/ShellBar_evolution.html | 3 +-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css index c626ddf21a53..ffded26d1f53 100644 --- a/packages/fiori/src/themes/ShellBar.css +++ b/packages/fiori/src/themes/ShellBar.css @@ -111,6 +111,8 @@ slot[name="profile"] { min-width: 0; min-height: 2rem; pointer-events: none; + font-size: var(--_ui5-v2-9-0-rc-2_avatar_fontsize_XS); + font-weight: normal; } .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive::-moz-focus-inner { diff --git a/packages/fiori/test/pages/ShellBar_evolution.html b/packages/fiori/test/pages/ShellBar_evolution.html index e3f612793483..ed510212a8ac 100644 --- a/packages/fiori/test/pages/ShellBar_evolution.html +++ b/packages/fiori/test/pages/ShellBar_evolution.html @@ -72,8 +72,7 @@ - - John Miller + From 79216a5e365476300a67ba9aeed9df8e3ebe0368 Mon Sep 17 00:00:00 2001 From: PetyaMarkovaBogdanova Date: Tue, 15 Apr 2025 11:30:38 +0300 Subject: [PATCH 02/19] chore(ui5-toolbar): physical items introduced --- packages/main/src/Toolbar.ts | 12 +++++----- packages/main/src/ToolbarButton.ts | 3 +++ packages/main/src/ToolbarPopoverTemplate.tsx | 3 +-- packages/main/src/ToolbarSelect.ts | 3 +++ packages/main/src/ToolbarTemplate.tsx | 23 ++++++++++++++++---- packages/main/test/pages/Toolbar.html | 2 +- 6 files changed, 34 insertions(+), 12 deletions(-) diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts index f3e54d108498..81cc3d9337b1 100644 --- a/packages/main/src/Toolbar.ts +++ b/packages/main/src/Toolbar.ts @@ -158,7 +158,9 @@ class Toolbar extends UI5Element { * **Note:** Currently only `ui5-toolbar-button`, `ui5-toolbar-select`, `ui5-toolbar-separator` and `ui5-toolbar-spacer` are allowed here. * @public */ - @slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true }) + @slot({ + "default": true, type: HTMLElement, invalidateOnChildChange: true, individualSlots: true, + }) items!: Array _onResize!: ResizeObserverCallback; @@ -500,8 +502,8 @@ class Toolbar extends UI5Element { this.contentWidth = 0; // re-render } - getItemsInfo(items: Array) { - return items.map((item: ToolbarItem) => { + getItemsInfo(items: Array) { + return items.map((item: UI5Element) => { const ctor = item.constructor as typeof ToolbarItem; const ElementClass = getRegisteredToolbarItem(ctor.getMetadata().getPureTag()); @@ -526,11 +528,11 @@ class Toolbar extends UI5Element { } const id: string = item._id; // Measure rendered width for spacers with width, and for normal items - const renderedItem = this.getRegisteredToolbarItemByID(id); + const renderedItem = item; let itemWidth = 0; - if (renderedItem) { + if (renderedItem && renderedItem.offsetWidth) { const ItemCSSStyleSet = getComputedStyle(renderedItem); itemWidth = renderedItem.offsetWidth + parsePxValue(ItemCSSStyleSet, "margin-inline-end") + parsePxValue(ItemCSSStyleSet, "margin-inline-start"); diff --git a/packages/main/src/ToolbarButton.ts b/packages/main/src/ToolbarButton.ts index 191857312379..afb8cfd4ea27 100644 --- a/packages/main/src/ToolbarButton.ts +++ b/packages/main/src/ToolbarButton.ts @@ -1,3 +1,4 @@ +import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; @@ -32,6 +33,8 @@ type ToolbarButtonAccessibilityAttributes = ButtonAccessibilityAttributes; @customElement({ tag: "ui5-toolbar-button", styles: ToolbarButtonPopoverCss, + template: ToolbarButtonTemplate, + renderer: jsxRenderer, }) /** diff --git a/packages/main/src/ToolbarPopoverTemplate.tsx b/packages/main/src/ToolbarPopoverTemplate.tsx index a6d3ead173cd..fedfc4b884dc 100644 --- a/packages/main/src/ToolbarPopoverTemplate.tsx +++ b/packages/main/src/ToolbarPopoverTemplate.tsx @@ -13,8 +13,7 @@ export default function ToolbarPopoverTemplate(this: Toolbar) { hideArrow={true} >
{ this.overflowItems.map(item => ( item.toolbarPopoverTemplate.call(item.context) diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts index 68c3c6466dbc..4dda9a4bffff 100644 --- a/packages/main/src/ToolbarSelect.ts +++ b/packages/main/src/ToolbarSelect.ts @@ -1,3 +1,4 @@ +import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; @@ -36,6 +37,8 @@ type ToolbarSelectChangeEventDetail = ToolbarItemEventDetail & SelectChangeEvent */ @customElement({ tag: "ui5-toolbar-select", + template: ToolbarSelectTemplate, + renderer: jsxRenderer, }) /** diff --git a/packages/main/src/ToolbarTemplate.tsx b/packages/main/src/ToolbarTemplate.tsx index 91714562bff5..b29e0ec9c4e0 100644 --- a/packages/main/src/ToolbarTemplate.tsx +++ b/packages/main/src/ToolbarTemplate.tsx @@ -1,6 +1,6 @@ import Button from "./Button.js"; import type Toolbar from "./Toolbar.js"; -import toolbarPopoverTemplate from "./ToolbarPopoverTemplate.js"; +import Popover from "./Popover.js"; import overflowIcon from "@ui5/webcomponents-icons/dist/overflow.js"; export default function ToolbarTemplate(this: Toolbar) { @@ -14,9 +14,8 @@ export default function ToolbarTemplate(this: Toolbar) { aria-label={this.accInfo.root.accessibleName} > {this.standardItems.map(item => ( - item.toolbarTemplate.call(item.context) +
))} -
- {toolbarPopoverTemplate.call(this)} + +
+ { this.overflowItems.map(item => ( + item.toolbarPopoverTemplate.call(item.context) + ))} +
+ ); } diff --git a/packages/main/test/pages/Toolbar.html b/packages/main/test/pages/Toolbar.html index c72852778eed..e63b8cdd9eda 100644 --- a/packages/main/test/pages/Toolbar.html +++ b/packages/main/test/pages/Toolbar.html @@ -53,7 +53,7 @@ - +

From e087244ca0a9c68e7615b4e4d2ae651fc1ff1c79 Mon Sep 17 00:00:00 2001 From: PetyaMarkovaBogdanova Date: Tue, 15 Apr 2025 12:37:07 +0300 Subject: [PATCH 03/19] Revert "chore(ui5-toolbar): physical items introduced" This reverts commit 79216a5e365476300a67ba9aeed9df8e3ebe0368. --- packages/main/src/Toolbar.ts | 12 +++++----- packages/main/src/ToolbarButton.ts | 3 --- packages/main/src/ToolbarPopoverTemplate.tsx | 3 ++- packages/main/src/ToolbarSelect.ts | 3 --- packages/main/src/ToolbarTemplate.tsx | 23 ++++---------------- packages/main/test/pages/Toolbar.html | 2 +- 6 files changed, 12 insertions(+), 34 deletions(-) diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts index 81cc3d9337b1..f3e54d108498 100644 --- a/packages/main/src/Toolbar.ts +++ b/packages/main/src/Toolbar.ts @@ -158,9 +158,7 @@ class Toolbar extends UI5Element { * **Note:** Currently only `ui5-toolbar-button`, `ui5-toolbar-select`, `ui5-toolbar-separator` and `ui5-toolbar-spacer` are allowed here. * @public */ - @slot({ - "default": true, type: HTMLElement, invalidateOnChildChange: true, individualSlots: true, - }) + @slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true }) items!: Array _onResize!: ResizeObserverCallback; @@ -502,8 +500,8 @@ class Toolbar extends UI5Element { this.contentWidth = 0; // re-render } - getItemsInfo(items: Array) { - return items.map((item: UI5Element) => { + getItemsInfo(items: Array) { + return items.map((item: ToolbarItem) => { const ctor = item.constructor as typeof ToolbarItem; const ElementClass = getRegisteredToolbarItem(ctor.getMetadata().getPureTag()); @@ -528,11 +526,11 @@ class Toolbar extends UI5Element { } const id: string = item._id; // Measure rendered width for spacers with width, and for normal items - const renderedItem = item; + const renderedItem = this.getRegisteredToolbarItemByID(id); let itemWidth = 0; - if (renderedItem && renderedItem.offsetWidth) { + if (renderedItem) { const ItemCSSStyleSet = getComputedStyle(renderedItem); itemWidth = renderedItem.offsetWidth + parsePxValue(ItemCSSStyleSet, "margin-inline-end") + parsePxValue(ItemCSSStyleSet, "margin-inline-start"); diff --git a/packages/main/src/ToolbarButton.ts b/packages/main/src/ToolbarButton.ts index afb8cfd4ea27..191857312379 100644 --- a/packages/main/src/ToolbarButton.ts +++ b/packages/main/src/ToolbarButton.ts @@ -1,4 +1,3 @@ -import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; @@ -33,8 +32,6 @@ type ToolbarButtonAccessibilityAttributes = ButtonAccessibilityAttributes; @customElement({ tag: "ui5-toolbar-button", styles: ToolbarButtonPopoverCss, - template: ToolbarButtonTemplate, - renderer: jsxRenderer, }) /** diff --git a/packages/main/src/ToolbarPopoverTemplate.tsx b/packages/main/src/ToolbarPopoverTemplate.tsx index fedfc4b884dc..a6d3ead173cd 100644 --- a/packages/main/src/ToolbarPopoverTemplate.tsx +++ b/packages/main/src/ToolbarPopoverTemplate.tsx @@ -13,7 +13,8 @@ export default function ToolbarPopoverTemplate(this: Toolbar) { hideArrow={true} >
{ this.overflowItems.map(item => ( item.toolbarPopoverTemplate.call(item.context) diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts index 4dda9a4bffff..68c3c6466dbc 100644 --- a/packages/main/src/ToolbarSelect.ts +++ b/packages/main/src/ToolbarSelect.ts @@ -1,4 +1,3 @@ -import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; @@ -37,8 +36,6 @@ type ToolbarSelectChangeEventDetail = ToolbarItemEventDetail & SelectChangeEvent */ @customElement({ tag: "ui5-toolbar-select", - template: ToolbarSelectTemplate, - renderer: jsxRenderer, }) /** diff --git a/packages/main/src/ToolbarTemplate.tsx b/packages/main/src/ToolbarTemplate.tsx index b29e0ec9c4e0..91714562bff5 100644 --- a/packages/main/src/ToolbarTemplate.tsx +++ b/packages/main/src/ToolbarTemplate.tsx @@ -1,6 +1,6 @@ import Button from "./Button.js"; import type Toolbar from "./Toolbar.js"; -import Popover from "./Popover.js"; +import toolbarPopoverTemplate from "./ToolbarPopoverTemplate.js"; import overflowIcon from "@ui5/webcomponents-icons/dist/overflow.js"; export default function ToolbarTemplate(this: Toolbar) { @@ -14,8 +14,9 @@ export default function ToolbarTemplate(this: Toolbar) { aria-label={this.accInfo.root.accessibleName} > {this.standardItems.map(item => ( -
+ item.toolbarTemplate.call(item.context) ))} +
- -
- { this.overflowItems.map(item => ( - item.toolbarPopoverTemplate.call(item.context) - ))} -
- + {toolbarPopoverTemplate.call(this)} ); } diff --git a/packages/main/test/pages/Toolbar.html b/packages/main/test/pages/Toolbar.html index e63b8cdd9eda..c72852778eed 100644 --- a/packages/main/test/pages/Toolbar.html +++ b/packages/main/test/pages/Toolbar.html @@ -53,7 +53,7 @@ - +

From e691edfba18d370695653a350e972f6ed7d4b0dc Mon Sep 17 00:00:00 2001 From: PetyaMarkovaBogdanova Date: Tue, 15 Apr 2025 11:30:38 +0300 Subject: [PATCH 04/19] chore(ui5-toolbar): physical items introduced --- packages/main/src/Toolbar.ts | 12 +++++----- packages/main/src/ToolbarButton.ts | 3 +++ packages/main/src/ToolbarPopoverTemplate.tsx | 3 +-- packages/main/src/ToolbarSelect.ts | 3 +++ packages/main/src/ToolbarTemplate.tsx | 23 ++++++++++++++++---- packages/main/test/pages/Toolbar.html | 2 +- 6 files changed, 34 insertions(+), 12 deletions(-) diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts index f3e54d108498..81cc3d9337b1 100644 --- a/packages/main/src/Toolbar.ts +++ b/packages/main/src/Toolbar.ts @@ -158,7 +158,9 @@ class Toolbar extends UI5Element { * **Note:** Currently only `ui5-toolbar-button`, `ui5-toolbar-select`, `ui5-toolbar-separator` and `ui5-toolbar-spacer` are allowed here. * @public */ - @slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true }) + @slot({ + "default": true, type: HTMLElement, invalidateOnChildChange: true, individualSlots: true, + }) items!: Array _onResize!: ResizeObserverCallback; @@ -500,8 +502,8 @@ class Toolbar extends UI5Element { this.contentWidth = 0; // re-render } - getItemsInfo(items: Array) { - return items.map((item: ToolbarItem) => { + getItemsInfo(items: Array) { + return items.map((item: UI5Element) => { const ctor = item.constructor as typeof ToolbarItem; const ElementClass = getRegisteredToolbarItem(ctor.getMetadata().getPureTag()); @@ -526,11 +528,11 @@ class Toolbar extends UI5Element { } const id: string = item._id; // Measure rendered width for spacers with width, and for normal items - const renderedItem = this.getRegisteredToolbarItemByID(id); + const renderedItem = item; let itemWidth = 0; - if (renderedItem) { + if (renderedItem && renderedItem.offsetWidth) { const ItemCSSStyleSet = getComputedStyle(renderedItem); itemWidth = renderedItem.offsetWidth + parsePxValue(ItemCSSStyleSet, "margin-inline-end") + parsePxValue(ItemCSSStyleSet, "margin-inline-start"); diff --git a/packages/main/src/ToolbarButton.ts b/packages/main/src/ToolbarButton.ts index 191857312379..afb8cfd4ea27 100644 --- a/packages/main/src/ToolbarButton.ts +++ b/packages/main/src/ToolbarButton.ts @@ -1,3 +1,4 @@ +import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; @@ -32,6 +33,8 @@ type ToolbarButtonAccessibilityAttributes = ButtonAccessibilityAttributes; @customElement({ tag: "ui5-toolbar-button", styles: ToolbarButtonPopoverCss, + template: ToolbarButtonTemplate, + renderer: jsxRenderer, }) /** diff --git a/packages/main/src/ToolbarPopoverTemplate.tsx b/packages/main/src/ToolbarPopoverTemplate.tsx index a6d3ead173cd..fedfc4b884dc 100644 --- a/packages/main/src/ToolbarPopoverTemplate.tsx +++ b/packages/main/src/ToolbarPopoverTemplate.tsx @@ -13,8 +13,7 @@ export default function ToolbarPopoverTemplate(this: Toolbar) { hideArrow={true} >
{ this.overflowItems.map(item => ( item.toolbarPopoverTemplate.call(item.context) diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts index 68c3c6466dbc..4dda9a4bffff 100644 --- a/packages/main/src/ToolbarSelect.ts +++ b/packages/main/src/ToolbarSelect.ts @@ -1,3 +1,4 @@ +import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; @@ -36,6 +37,8 @@ type ToolbarSelectChangeEventDetail = ToolbarItemEventDetail & SelectChangeEvent */ @customElement({ tag: "ui5-toolbar-select", + template: ToolbarSelectTemplate, + renderer: jsxRenderer, }) /** diff --git a/packages/main/src/ToolbarTemplate.tsx b/packages/main/src/ToolbarTemplate.tsx index 91714562bff5..b29e0ec9c4e0 100644 --- a/packages/main/src/ToolbarTemplate.tsx +++ b/packages/main/src/ToolbarTemplate.tsx @@ -1,6 +1,6 @@ import Button from "./Button.js"; import type Toolbar from "./Toolbar.js"; -import toolbarPopoverTemplate from "./ToolbarPopoverTemplate.js"; +import Popover from "./Popover.js"; import overflowIcon from "@ui5/webcomponents-icons/dist/overflow.js"; export default function ToolbarTemplate(this: Toolbar) { @@ -14,9 +14,8 @@ export default function ToolbarTemplate(this: Toolbar) { aria-label={this.accInfo.root.accessibleName} > {this.standardItems.map(item => ( - item.toolbarTemplate.call(item.context) +
))} -
- {toolbarPopoverTemplate.call(this)} + +
+ { this.overflowItems.map(item => ( + item.toolbarPopoverTemplate.call(item.context) + ))} +
+ ); } diff --git a/packages/main/test/pages/Toolbar.html b/packages/main/test/pages/Toolbar.html index c72852778eed..e63b8cdd9eda 100644 --- a/packages/main/test/pages/Toolbar.html +++ b/packages/main/test/pages/Toolbar.html @@ -53,7 +53,7 @@ - +

From d4f8b1c256865175c920df89b8746ff8a1f56a18 Mon Sep 17 00:00:00 2001 From: PetyaMarkovaBogdanova Date: Thu, 17 Apr 2025 10:06:21 +0300 Subject: [PATCH 05/19] chore(ui5-toolbar): items maded physical --- packages/main/src/Toolbar.ts | 16 ----------- packages/main/src/ToolbarButton.ts | 4 --- packages/main/src/ToolbarPopoverTemplate.tsx | 24 ----------------- packages/main/src/ToolbarRegistry.ts | 27 ------------------- packages/main/src/ToolbarSelect.ts | 4 --- packages/main/src/ToolbarSeparator.ts | 9 ++++--- packages/main/src/ToolbarSpacer.ts | 10 ++++--- packages/main/src/ToolbarTemplate.tsx | 2 +- packages/main/src/themes/Toolbar.css | 7 ----- packages/main/src/themes/ToolbarSeparator.css | 6 +++++ 10 files changed, 19 insertions(+), 90 deletions(-) delete mode 100644 packages/main/src/ToolbarPopoverTemplate.tsx delete mode 100644 packages/main/src/ToolbarRegistry.ts create mode 100644 packages/main/src/themes/ToolbarSeparator.css diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts index 81cc3d9337b1..8f0349a700e9 100644 --- a/packages/main/src/Toolbar.ts +++ b/packages/main/src/Toolbar.ts @@ -32,11 +32,6 @@ import ToolbarItemOverflowBehavior from "./types/ToolbarItemOverflowBehavior.js" import type ToolbarItem from "./ToolbarItem.js"; import type ToolbarSeparator from "./ToolbarSeparator.js"; -import { - getRegisteredToolbarItem, - getRegisteredStyles, -} from "./ToolbarRegistry.js"; - import type Button from "./Button.js"; import type Popover from "./Popover.js"; @@ -173,11 +168,9 @@ class Toolbar extends UI5Element { ITEMS_WIDTH_MAP: Map = new Map(); static get styles() { - const styles = getRegisteredStyles(); return [ ToolbarCss, ToolbarPopoverCss, - ...styles, ]; } @@ -504,16 +497,7 @@ class Toolbar extends UI5Element { getItemsInfo(items: Array) { return items.map((item: UI5Element) => { - const ctor = item.constructor as typeof ToolbarItem; - const ElementClass = getRegisteredToolbarItem(ctor.getMetadata().getPureTag()); - - if (!ElementClass) { - return null; - } - const toolbarItem = { - toolbarTemplate: ElementClass.toolbarTemplate, - toolbarPopoverTemplate: ElementClass.toolbarPopoverTemplate, context: item, }; diff --git a/packages/main/src/ToolbarButton.ts b/packages/main/src/ToolbarButton.ts index afb8cfd4ea27..0147bf662d9d 100644 --- a/packages/main/src/ToolbarButton.ts +++ b/packages/main/src/ToolbarButton.ts @@ -11,8 +11,6 @@ import ToolbarPopoverButtonTemplate from "./ToolbarPopoverButtonTemplate.js"; import ToolbarButtonPopoverCss from "./generated/themes/ToolbarButtonPopover.css.js"; -import { registerToolbarItem } from "./ToolbarRegistry.js"; - type ToolbarButtonAccessibilityAttributes = ButtonAccessibilityAttributes; /** @@ -195,8 +193,6 @@ class ToolbarButton extends ToolbarItem { } } -registerToolbarItem(ToolbarButton); - ToolbarButton.define(); export default ToolbarButton; diff --git a/packages/main/src/ToolbarPopoverTemplate.tsx b/packages/main/src/ToolbarPopoverTemplate.tsx deleted file mode 100644 index fedfc4b884dc..000000000000 --- a/packages/main/src/ToolbarPopoverTemplate.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import type Toolbar from "./Toolbar.js"; -import Popover from "./Popover.js"; - -export default function ToolbarPopoverTemplate(this: Toolbar) { - return ( - -
- { this.overflowItems.map(item => ( - item.toolbarPopoverTemplate.call(item.context) - ))} -
- - ); -} diff --git a/packages/main/src/ToolbarRegistry.ts b/packages/main/src/ToolbarRegistry.ts deleted file mode 100644 index 0339efbd578e..000000000000 --- a/packages/main/src/ToolbarRegistry.ts +++ /dev/null @@ -1,27 +0,0 @@ -import getSharedResource from "@ui5/webcomponents-base/dist/getSharedResource.js"; - -import type ToolbarItem from "./ToolbarItem.js"; - -const registry = getSharedResource>("ToolbarItem.registry", new Map()); - -const registerToolbarItem = (ElementClass: typeof ToolbarItem) => { - registry.set(ElementClass.getMetadata().getPureTag(), ElementClass); -}; - -const getRegisteredToolbarItem = (name: string) => { - if (!registry.has(name)) { - throw new Error(`No template found for ${name}`); - } - - return registry.get(name); -}; - -const getRegisteredStyles = () => { - return [...registry.values()].map((ElementClass: typeof ToolbarItem) => ElementClass.styles); -}; - -export { - registerToolbarItem, - getRegisteredToolbarItem, - getRegisteredStyles, -}; diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts index 4dda9a4bffff..99ed427d37e3 100644 --- a/packages/main/src/ToolbarSelect.ts +++ b/packages/main/src/ToolbarSelect.ts @@ -5,8 +5,6 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; -import { registerToolbarItem } from "./ToolbarRegistry.js"; - // Templates import ToolbarSelectTemplate from "./ToolbarSelectTemplate.js"; @@ -186,8 +184,6 @@ class ToolbarSelect extends ToolbarItem { } } -registerToolbarItem(ToolbarSelect); - ToolbarSelect.define(); export default ToolbarSelect; diff --git a/packages/main/src/ToolbarSeparator.ts b/packages/main/src/ToolbarSeparator.ts index d4f9afc440e3..71cbc4ffa1c3 100644 --- a/packages/main/src/ToolbarSeparator.ts +++ b/packages/main/src/ToolbarSeparator.ts @@ -1,9 +1,11 @@ +import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import ToolbarSeparatorTemplate from "./ToolbarSeparatorTemplate.js"; import ToolbarPopoverSeparatorTemplate from "./ToolbarPopoverSeparatorTemplate.js"; -import { registerToolbarItem } from "./ToolbarRegistry.js"; +// Styles +import ToolbarSeparatorCss from "./generated/themes/ToolbarSeparator.css.js"; import ToolbarItem from "./ToolbarItem.js"; @@ -21,6 +23,9 @@ import ToolbarItem from "./ToolbarItem.js"; */ @customElement({ tag: "ui5-toolbar-separator", + template: ToolbarSeparatorTemplate, + renderer: jsxRenderer, + styles: [ToolbarSeparatorCss], }) class ToolbarSeparator extends ToolbarItem { @@ -44,8 +49,6 @@ class ToolbarSeparator extends ToolbarItem { } } -registerToolbarItem(ToolbarSeparator); - ToolbarSeparator.define(); export default ToolbarSeparator; diff --git a/packages/main/src/ToolbarSpacer.ts b/packages/main/src/ToolbarSpacer.ts index 75aa5f94c2aa..bdb52995271b 100644 --- a/packages/main/src/ToolbarSpacer.ts +++ b/packages/main/src/ToolbarSpacer.ts @@ -1,10 +1,11 @@ +import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import ToolbarSpacerTemplate from "./ToolbarSpacerTemplate.js"; -import ToolbarItem from "./ToolbarItem.js"; +import ToolbarCss from "./generated/themes/Toolbar.css.js"; -import { registerToolbarItem } from "./ToolbarRegistry.js"; +import ToolbarItem from "./ToolbarItem.js"; /** * @class @@ -20,6 +21,9 @@ import { registerToolbarItem } from "./ToolbarRegistry.js"; */ @customElement({ tag: "ui5-toolbar-spacer", + template: ToolbarSpacerTemplate, + renderer: jsxRenderer, + styles: ToolbarCss, }) class ToolbarSpacer extends ToolbarItem { @@ -58,8 +62,6 @@ class ToolbarSpacer extends ToolbarItem { } } -registerToolbarItem(ToolbarSpacer); - ToolbarSpacer.define(); export default ToolbarSpacer; diff --git a/packages/main/src/ToolbarTemplate.tsx b/packages/main/src/ToolbarTemplate.tsx index b29e0ec9c4e0..84d22d86b0e2 100644 --- a/packages/main/src/ToolbarTemplate.tsx +++ b/packages/main/src/ToolbarTemplate.tsx @@ -45,7 +45,7 @@ export default function ToolbarTemplate(this: Toolbar) { "ui5-overflow-list": true }}> { this.overflowItems.map(item => ( - item.toolbarPopoverTemplate.call(item.context) +
))} diff --git a/packages/main/src/themes/Toolbar.css b/packages/main/src/themes/Toolbar.css index f12e0255dea5..7b1813881459 100644 --- a/packages/main/src/themes/Toolbar.css +++ b/packages/main/src/themes/Toolbar.css @@ -43,13 +43,6 @@ Last element is: overflow button or tb-item when overflow button is hidden */ margin-inline-start: 0; } -.ui5-tb-separator { - height: var(--_ui5-toolbar-separator-height); - width: 0.0625rem; - background: var(--sapToolbar_SeparatorColor); - box-sizing: border-box; -} - .ui5-tb-overflow-btn-hidden { visibility: hidden; position: absolute; diff --git a/packages/main/src/themes/ToolbarSeparator.css b/packages/main/src/themes/ToolbarSeparator.css new file mode 100644 index 000000000000..b28ed4b3e21d --- /dev/null +++ b/packages/main/src/themes/ToolbarSeparator.css @@ -0,0 +1,6 @@ +.ui5-tb-separator { + height: var(--_ui5-toolbar-separator-height); + width: 0.0625rem; + background: var(--sapToolbar_SeparatorColor); + box-sizing: border-box; +} \ No newline at end of file From 1fc87c026edd9d4b19eec1d49972a14eabef4d97 Mon Sep 17 00:00:00 2001 From: PetyaMarkovaBogdanova Date: Thu, 17 Apr 2025 13:43:51 +0300 Subject: [PATCH 06/19] fix(ui5-toolbar): physical elements --- packages/main/src/ToolbarSpacer.ts | 3 --- packages/main/src/ToolbarTemplate.tsx | 5 +++-- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/main/src/ToolbarSpacer.ts b/packages/main/src/ToolbarSpacer.ts index bdb52995271b..0f22c09964b0 100644 --- a/packages/main/src/ToolbarSpacer.ts +++ b/packages/main/src/ToolbarSpacer.ts @@ -1,4 +1,3 @@ -import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import ToolbarSpacerTemplate from "./ToolbarSpacerTemplate.js"; @@ -21,8 +20,6 @@ import ToolbarItem from "./ToolbarItem.js"; */ @customElement({ tag: "ui5-toolbar-spacer", - template: ToolbarSpacerTemplate, - renderer: jsxRenderer, styles: ToolbarCss, }) diff --git a/packages/main/src/ToolbarTemplate.tsx b/packages/main/src/ToolbarTemplate.tsx index 84d22d86b0e2..9aed8678f84d 100644 --- a/packages/main/src/ToolbarTemplate.tsx +++ b/packages/main/src/ToolbarTemplate.tsx @@ -2,6 +2,7 @@ import Button from "./Button.js"; import type Toolbar from "./Toolbar.js"; import Popover from "./Popover.js"; import overflowIcon from "@ui5/webcomponents-icons/dist/overflow.js"; +import ToolbarSpacer from "./ToolbarSpacer.js"; export default function ToolbarTemplate(this: Toolbar) { return (<> @@ -13,8 +14,8 @@ export default function ToolbarTemplate(this: Toolbar) { role={this.accInfo.root.role} aria-label={this.accInfo.root.accessibleName} > - {this.standardItems.map(item => ( -
+ {this.standardItems.map(item => ( +
))} - ); -} diff --git a/packages/main/src/ToolbarPopoverSelectTemplate.tsx b/packages/main/src/ToolbarPopoverSelectTemplate.tsx deleted file mode 100644 index 2e897caf4c76..000000000000 --- a/packages/main/src/ToolbarPopoverSelectTemplate.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import type ToolbarSelect from "./ToolbarSelect.js"; -import Select from "./Select.js"; -import Option from "./Option.js"; - -export default function ToolbarPopoverSelectTemplate(this: ToolbarSelect) { - return ( - - ); -} diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts index 99ed427d37e3..743b1b9e06bf 100644 --- a/packages/main/src/ToolbarSelect.ts +++ b/packages/main/src/ToolbarSelect.ts @@ -6,9 +6,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; // Templates - import ToolbarSelectTemplate from "./ToolbarSelectTemplate.js"; -import ToolbarPopoverSelectTemplate from "./ToolbarPopoverSelectTemplate.js"; import ToolbarItem from "./ToolbarItem.js"; import type { ToolbarItemEventDetail } from "./ToolbarItem.js"; import type ToolbarSelectOption from "./ToolbarSelectOption.js"; @@ -124,14 +122,6 @@ class ToolbarSelect extends ToolbarItem { @property() accessibleNameRef?: string; - static get toolbarTemplate() { - return ToolbarSelectTemplate; - } - - static get toolbarPopoverTemplate() { - return ToolbarPopoverSelectTemplate; - } - onClick(e: Event): void { e.stopImmediatePropagation(); const prevented = !this.fireDecoratorEvent("click", { targetRef: e.target as HTMLElement }); diff --git a/packages/main/src/ToolbarSeparator.ts b/packages/main/src/ToolbarSeparator.ts index 71cbc4ffa1c3..7fa0268e9dfb 100644 --- a/packages/main/src/ToolbarSeparator.ts +++ b/packages/main/src/ToolbarSeparator.ts @@ -32,14 +32,6 @@ class ToolbarSeparator extends ToolbarItem { @property({ type: Boolean }) visible = false; - static get toolbarTemplate() { - return ToolbarSeparatorTemplate; - } - - static get toolbarPopoverTemplate() { - return ToolbarPopoverSeparatorTemplate; - } - get isSeparator() { return true; } diff --git a/packages/main/src/ToolbarSpacer.ts b/packages/main/src/ToolbarSpacer.ts index 0f22c09964b0..40b0cff7aa97 100644 --- a/packages/main/src/ToolbarSpacer.ts +++ b/packages/main/src/ToolbarSpacer.ts @@ -1,6 +1,5 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import ToolbarSpacerTemplate from "./ToolbarSpacerTemplate.js"; import ToolbarCss from "./generated/themes/Toolbar.css.js"; @@ -46,14 +45,6 @@ class ToolbarSpacer extends ToolbarItem { return this.width === "" || this.width === undefined || this.width === "auto"; } - static get toolbarTemplate() { - return ToolbarSpacerTemplate; - } - - static get toolbarPopoverTemplate() { - return ToolbarSpacerTemplate; - } - get isInteractive() { return false; } diff --git a/packages/main/src/ToolbarSpacerTemplate.tsx b/packages/main/src/ToolbarSpacerTemplate.tsx deleted file mode 100644 index dcbafd0751f4..000000000000 --- a/packages/main/src/ToolbarSpacerTemplate.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import type ToolbarSpacer from "./ToolbarSpacer.js"; - -export default function ToolbarSpacerTemplate(this: ToolbarSpacer) { - return ( - - ); -} diff --git a/packages/main/src/ToolbarTemplate.tsx b/packages/main/src/ToolbarTemplate.tsx index 9aed8678f84d..c3ad529e304f 100644 --- a/packages/main/src/ToolbarTemplate.tsx +++ b/packages/main/src/ToolbarTemplate.tsx @@ -2,7 +2,6 @@ import Button from "./Button.js"; import type Toolbar from "./Toolbar.js"; import Popover from "./Popover.js"; import overflowIcon from "@ui5/webcomponents-icons/dist/overflow.js"; -import ToolbarSpacer from "./ToolbarSpacer.js"; export default function ToolbarTemplate(this: Toolbar) { return (<> @@ -14,9 +13,20 @@ export default function ToolbarTemplate(this: Toolbar) { role={this.accInfo.root.role} aria-label={this.accInfo.root.accessibleName} > - {this.standardItems.map(item => ( -
- ))} + {this.standardItems.map(item => { + if ("styles" in item.context) { + return ( +
+ +
+ ); + } + return ( +
+ +
+ ); + })}