Details
-
Bug
-
Resolution: Fixed
-
Neutral
-
6.2.2
-
None
-
-
Empty show more show less
-
Nucleus 1
-
2
Description
Using an icon in a comboBoxField is not working correctly. It has different behaviors depending on the browser you use (the text disappears or there is not enough space between the text and icon).
Steps to reproduce
You can use this dialog definition for testing purposes:
form:
properties:
icon:
label: Icon
$type: comboBoxField
defaultValue: statement
datasource:
$type: optionListDatasource
options:
- name: statement
label: statement
value: statement
iconSrc: https://frontend.live/unionInvestment-component-library/develop/assets/icons/content/colored/statement.svg
- name: bank
label: bank
value: bank
iconSrc: https://frontend.live/unionInvestment-component-library/develop/assets/icons/content/colored/bank.svg
- name: bank-card
label: bank-card
value: bank-card
iconSrc: https://frontend.live/unionInvestment-component-library/develop/assets/icons/content/colored/bank-card.svg
- Â Create the component with the dialog definition stated above
- Try to select an option in the ComboBox
- Note that depending on the browser you cannot see the text/ the distance between text and icon is too small
Expected results
We should be able to see both the icon and the text with enough space between.
Â
Actual results
In chrome and Safari, you cannot see the text:

In Firefox, the distance between the icon and the text is too small:

Â
Notes
You can see here in the docs, that we are suggesting that iconSrc can be used for option lists.
Â
Checklists
Acceptance criteria