search

SAP / ui5-webcomponents-react

A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience
https://sap.github.io/ui5-webcomponents-react/
Apache License 2.0
439 stars 98 forks source link

[Select]: Icon not rendering as child of Option #4920

Closed codingfabi closed 1 year ago

codingfabi commented 1 year ago

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

Lukas742 commented 1 year ago

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[bot] commented 1 year ago

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 commented 1 year ago

Hi @codingfabi

the UI5 Web Components team, is currently working on a prototype (https://github.com/SAP/ui5-webcomponents/pull/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[bot] commented 1 year ago

:tada: This issue has been resolved in version v1.19.0 :tada:

The release is available on v1.19.0

Your semantic-release bot :package::rocket:

Lukas742 commented 1 year ago

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