Collection Item Picker: support icon colors (#20787)

Update icon usage in collection menu and example data

Replaces <uui-icon> with <umb-icon> in the default collection menu item element to support colors. Also updates example picker data source items to showcase color support.
This commit is contained in:
Mads Rasmussen
2025-11-13 12:16:59 +01:00
committed by GitHub
parent 89d487e449
commit 20180c3180
2 changed files with 6 additions and 8 deletions

View File

@@ -53,35 +53,35 @@ const customItems: Array<ExampleCollectionItemModel> = [
unique: '1',
entityType: 'example',
name: 'Example 1',
icon: 'icon-shape-triangle',
icon: 'icon-shape-triangle yellow',
isPickable: true,
},
{
unique: '2',
entityType: 'example',
name: 'Example 2',
icon: 'icon-shape-triangle',
icon: 'icon-shape-triangle yellow',
isPickable: true,
},
{
unique: '3',
entityType: 'example',
name: 'Example 3',
icon: 'icon-shape-triangle',
icon: 'icon-shape-triangle yellow',
isPickable: true,
},
{
unique: '4',
entityType: 'example',
name: 'Example 4',
icon: 'icon-shape-triangle',
icon: 'icon-shape-triangle yellow',
isPickable: false,
},
{
unique: '5',
entityType: 'example',
name: 'Example 5',
icon: 'icon-shape-triangle',
icon: 'icon-shape-triangle yellow',
isPickable: true,
},
];

View File

@@ -61,9 +61,7 @@ export class UmbDefaultCollectionMenuItemElement extends UmbLitElement {
?selected=${this._isSelected}
@selected=${() => this.#api?.select()}
@deselected=${() => this.#api?.deselect()}>
${item.icon
? html`<uui-icon slot="icon" name=${item.icon}></uui-icon>`
: html`<uui-icon slot="icon" name=${getItemFallbackIcon()}></uui-icon>`}
<umb-icon slot="icon" name=${item.icon ?? getItemFallbackIcon()}></umb-icon>
</uui-menu-item>
`;
}