[MGNLUI-6202] Icon in comboBoxField not working as expected Created: 09/Sep/20  Updated: 13/Jan/22  Resolved: 11/Jan/22

Status: Closed
Project: Magnolia UI
Component/s: None
Affects Version/s: 6.2.2
Fix Version/s: 6.2.16

Type: Bug Priority: Neutral
Reporter: Monica Damborenea Assignee: Jaromir Sarf
Resolution: Fixed Votes: 0
Labels: ui-bug
Remaining Estimate: Not Specified
Time Spent: 0.25d
Original Estimate: Not Specified

Attachments: PNG File Bildschirmfoto 2020-09-09 um 11.51.25.png     PNG File Bildschirmfoto 2020-09-09 um 11.51.38.png     PNG File image-2022-01-11-17-02-24-564.png    
Issue Links:
Problem/Incident
Template:
Acceptance criteria:
Empty
Task DoD:
[X]* Doc/release notes changes? Comment present?
[X]* Downstream builds green?
[X]* Solution information and context easily available?
[X]* Tests
[X]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[X]* Steps to reproduce, expected, and actual results filled
[X]* Affected version filled
Date of First Response:
Epic Link: UI bugs
Sprint: Nucleus 1
Story Points: 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
  1.  Create the component with the dialog definition stated above
  2. Try to select an option in the ComboBox
  3. 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.
 



 Comments   
Comment by Quach Hao Thien [ 11/Jan/22 ]

QA result on Chrome, FF and Safari: 

Generated at Mon Feb 12 09:34:09 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.