[Select]: Icon not rendering as child of Option

[codingfabi]

Describe the bug

I want to create a custom color picker using the Select component that renders the color as a icon and the color name as a label. Even though the documentation says that the Option subcomponent of the Select component renders arbitrary ReactNodes, Icon components do not get rendered when added as children.

I saw that the Option component itself has an icon property. However, there is now option to style this icon and I need to change the icons color for each option.

Isolated Example

https://codesandbox.io/p/sandbox/festive-lederberg-zr7rwn?file=%2Fsrc%2FApp.tsx%3A41%2C10

Reproduction steps

See sandbox.

Expected Behaviour

I would expect the Option to render the Icon element as a child, next to the label. It would also work if there is a simple way to style the icon that is passed as property to the Option component.

Screenshots or Videos

No response

UI5 Web Components for React Version

1.17.0

UI5 Web Components Version

1.15.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @codingfabi

as the description of the prop states, only text is supported:

Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.

Also, the same applies for the Button. The difference to the button is, that the Option is an abstract ui5 web component and therefore it's not customizable outside of the given props. (this information was missing in the documentation of ui5-webcomponents and will be available with their next release)

If you feel like this behavior should be possible, please open a feature request in the UI5 Web Components repo, as this component is developed there.

[github-actions]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Inactive issues will be closed after 7 days. Thanks.

[Lukas742]

Hi @codingfabi

the UI5 Web Components team, is currently working on a prototype (SAP/ui5-webcomponents#7447), allowing customization of the Select component. If the POC will be productized, then you will also be able to implement the design and behavior you're trying to achieve.

[github-actions]

🎉 This issue has been resolved in version v1.19.0 🎉

The release is available on v1.19.0

Your semantic-release bot 📦🚀

[Lukas742]

Hi @codingfabi

you can now use the SelectMenu component to achieve the described behavior.
https://sap.github.io/ui5-webcomponents-react/?path=/docs/inputs-select--docs#selectmenu