Skip to content

Conversation

@madsrasmussen
Copy link
Contributor

@madsrasmussen madsrasmussen commented Nov 11, 2025

The PR updates the icon element to use umb-icon instead of uui-icon to 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-source example has been updated as part of the PR.

  1. Run the example npm run example.
  2. Set up a picker based on the Entity Data Picker - Select the Example Items (Collection) data source.
  3. Check that the icons are yellow when selecting an item.
Screenshot 2025-11-11 at 13 40 59

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.
Copilot AI review requested due to automatic review settings November 11, 2025 12:33
Copilot finished reviewing on behalf of madsrasmussen November 11, 2025 12:35
Copy link
Contributor

Copilot AI left a 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-icon rendering logic with a single umb-icon element that handles both icon and fallback cases
  • Updated example data source to demonstrate icon color functionality with yellow color

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

@bjarnef
Copy link
Contributor

bjarnef commented Nov 11, 2025

@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:

image

@nielslyngsoe nielslyngsoe enabled auto-merge (squash) November 13, 2025 10:34
@nielslyngsoe
Copy link
Member

Hi @bjarnef good point, I have fixed that over in the UI Library, so we get a general fix not a CMS specific one.
umbraco/Umbraco.UI#1222

Copy link
Member

@nielslyngsoe nielslyngsoe left a 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.

@nielslyngsoe nielslyngsoe merged commit 20180c3 into release/17.0 Nov 13, 2025
24 checks passed
@nielslyngsoe nielslyngsoe deleted the v17/hotfix/collection-item-picker-render-icon-with-umb-icon branch November 13, 2025 11:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants