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:
@@ -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,
|
||||
},
|
||||
];
|
||||
|
||||
@@ -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>
|
||||
`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user