Block Grid: Add icon to allowed block types in area

[bjarnef]

Prerequisites

• I have added steps to test this contribution in the description below

Description

Added icon the combobox list with blocks to allow in specific area to easier identify the block visually.

Before

After

[github-actions]

Hi there @bjarnef, thank you for this contribution! 👍

While we wait for one of the Core Collaborators team to have a look at your work, we wanted to let you know about that we have a checklist for some of the things we will consider during review:

• It's clear what problem this is solving, there's a connected issue or a description of what the changes do and how to test them
• The automated tests all pass (see "Checks" tab on this PR)
• The level of security for this contribution is the same or improved
• The level of performance for this contribution is the same or improved
• Avoids creating breaking changes; note that behavioral changes might also be perceived as breaking
• If this is a new feature, Umbraco HQ provided guidance on the implementation beforehand
• 💡 The contribution looks original and the contributor is presumably allowed to share it

Don't worry if you got something wrong. We like to think of a pull request as the start of a conversation, we're happy to provide guidance on improving your contribution.

If you realize that you might want to make some changes then you can do that by adding new commits to the branch you created for this work and pushing new commits. They should then automatically show up as updates to this pull request.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[Copilot]

Pull Request Overview

This PR adds visual icons to the block type selection dropdown in the block grid area type permissions interface to improve usability and visual identification of different block types.

• Added icon property to the block data mapping to include icon information
• Added icon display for both block groups (folder icon) and individual block types (their specific icons) in the combobox dropdown

[AndyButland]

This one is giving me an error when building the front-end I'm afraid:

src/packages/block/block-grid/property-editors/block-grid-area-type-permission/block-grid-area-type-permission.element.ts:213:29 - error TS2339: Property 'icon' does not exist on type '{ type: UmbBlockTypeWithGroupKey; name: string; }'.

213      <uui-icon name=${block.icon}></uui-icon>

[bjarnef]

@AndyButland it seems it just need an icon property added here:
https://github.com/umbraco/Umbraco-CMS/pull/20364/files#diff-b8f1b3078f3fc8bcd42e246ce6747bbec68796b47a864ee37c25b210aa69287aR36

[AndyButland]

Builds now, but I seem to be missing an icon:

[bjarnef]

@AndyButland can you try output ${this._blockTypesWithElementName} in start of HTML in renderBlockTypes? or console.log of this._blockTypesWithElementName in observe function?

If icons include colors I think it need to use umb-icon instead for uui-icon.

[AndyButland]

I've done the latter - does this help?

[bjarnef]

Can you check with latest change as umb-icon split icon into name and color.

[AndyButland]

Appears now, but layout is off:

[bjarnef]

Alright, I think the latest change should fix it based on https://uui.umbraco.com/?path=/story/uui-combobox--avatars

[AndyButland]

Great, looks good now, thanks.