-
Bug
-
Resolution: Fixed
-
Neutral
-
6.2.2
-
None
-
-
Empty show more show less
-
Nucleus 1
-
2
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.
Â
Acceptance criteria