-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Collection Item Picker: support icon colors #20787
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Collection Item Picker: support icon colors #20787
Conversation
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR updates the Collection Item Picker to support icon colors by replacing uui-icon with umb-icon in the default collection menu item renderer. The umb-icon component supports color strings in the format icon-name color-alias (e.g., icon-document yellow), while uui-icon does not.
Key changes:
- Replaced conditional
uui-iconrendering logic with a singleumb-iconelement that handles both icon and fallback cases - Updated example data source to demonstrate icon color functionality with
yellowcolor
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
default-collection-menu-item.element.ts |
Replaced uui-icon with umb-icon and simplified icon rendering logic using nullish coalescing operator |
example-custom-picker-collection-data-source.ts |
Updated example icons to include color strings for demonstration purposes |
|
@madsrasmussen shouldn't the icon always be white for selected tree item? Otherwise to contrast would be low for e.g. blue and black icon color. E.g. the current content tree picker in Deploy restore picker:
|
…nder-icon-with-umb-icon
|
Hi @bjarnef good point, I have fixed that over in the UI Library, so we get a general fix not a CMS specific one. |
nielslyngsoe
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It works, and does what it should. It does then have the trouble of icon colors not being overwritten in selection state, but this will be fixed via the UI Library in near future.

The PR updates the icon element to use
umb-iconinstead ofuui-iconto support an icon with a color string:icon-document yellow.Use Case:
If a Property Editor Data Source includes
Umb.PropertyEditorUi.IconPicker, as part of the configuration, it allows for selecting a color alongside the icon. When this happens, no icon appears.How to test:
The
picker-data-sourceexample has been updated as part of the PR.npm run example.Example Items (Collection)data source.