Generator: cannot use html labels with icons when using the generator

[kaligrafy]

Example:

label: { fr: <div style={{display: 'flex', alignItems: 'center', fontSize: '150%', fontWeight: 300}}><FontAwesomeIcon icon={faSuitcaseRolling} className="faIconLeft" style={{width: '4rem', height: '4rem'}} />Séjour ${ index + 1 }${journeys[journeyId].name ? • ${journeys[journeyId].name}: ''}</div>, en: <div style={{display: 'flex', alignItems: 'center', fontSize: '150%', fontWeight: 300}}><FontAwesomeIcon icon={faSuitcaseRolling} className="faIconLeft" style={{width: '4rem', height: '4rem'}} />Journey ${ index + 1 }${journeys[journeyId].name ? • ${journeys[journeyId].name}: ''}</div> }

should render the icon and change style, but since some time before od_mtl_2023, it just stops at {{ and ignore the rest of the styles and icon react tag. It used to work, example: select person had gender and child icons

[kaligrafy]

In fact, label and choice label should accept any react or html tag

[tahini]

I do not understand exactly the issue. Where is this label defined? Do you expect to put this text in the excel file, with typescript code injection and it should be displayed correctly?

Please explain

1- Where this label is defined 2- What is the current behavior of the generator wrt this label 3- What is the expected behavior of the generator for this label

Also, did you update evolution with the latest PRs with labels? It probably won't fix it all, but at least that would be a start

[tahini]

In fact, label and choice label should accept any react or html tag

react and html tag (like icons, etc), yes, but javascript code injection, that could be dangerous

[kaligrafy]

I mean, we should be able to do something like this in a custom widget (not in the excel file): label: { fr: () => ({label}</React.Fragment>), en: ...

[tahini]

If it's in a custom widget, it does not have anything to do with the generator. And you should already be able to do this no?

[kaligrafy]

I'll test it, but I think label only accepts a specific type of function or string

[tahini]

You have to make sure containsHtml is true where needed