icons in single select options

[jenniferarnesen]

Would it be possible to get icons in single select options? I assume this isn't possible now since i didn't see a property for it. It could be useful in analytics apps where users are selecting from a long list of different types of items (e.g. data elements, program attributes, indicators...) where each of the types have a different icon associated with them. The screenshot below shows the dropdown with the list to be filtered behind it:

[ismay]

Would it be possible to get icons in single select options?

Definitely. The select already allows for custom options, which means that you can add anything you want to an option, as long as it has the API that the select expects. See this story for example: https://ui.dhis2.nu/demo/?path=/story/forms-single-select-single-select--with-custom-options-and-on-change (https://github.com/dhis2/ui/blob/master/components/select/src/single-select/single-select.stories.js#L28)

It's been a while since I worked with it, but I think you need to have a value and a label prop in your custom option at the very least, and accept and apply an onClick prop so it's clickable. See: https://github.com/dhis2/ui/blob/master/components/select/src/select/option-helpers.js#L4. Let me know if you need more info!

[jenniferarnesen]

Thanks, that works Ismay:

<SingleSelect
      prefix={i18n.t('Type')}
      selected={dimensionType}
      onChange={({ selected }) => setDimensionType(selected)}
      dense
>
    <SingleSelectOption
        label={i18n.t('All')}
        value={DIMENSION_TYPE_ALL}
        icon={<DimensionIcon dimensionType={DIMENSION_TYPE_ALL} />}
    />
    {....}
</SingleSelect>

const SingleSelectOption = ({ label, active, value, icon, onClick }) => (
    <div
        className={cx(styles.option, { [styles.active]: active })}
        data-value={value}
        onClick={(e) => onClick({}, e)}
    >
        <span className={styles.optionIcon}>{icon}</span>
        {label}
    </div>
)

We still need to wait on this since we've got some label wrapping going on and we want to talk with Joe about it. And looks like the icon gets cut off on the right side in selected:

[jenniferarnesen]

Also, this implementation copies all the option styles from ui, which is a bit non-ideal: https://github.com/dhis2/line-listing-app/compare/fix/dimension-icons-in-dimension-filter-select?expand=1#diff-337fe5721300f62e6854a19c9941da433d0eafd71d3fc320daedee3def8c977dR14

[ismay]

I've created an issue for this here: https://dhis2.atlassian.net/browse/LIBS-312. Let me know if it's missing anything!

[jenniferarnesen]

@ismay Do you have any thoughts on why the right-most pixel width of the svg is disappearing in the selection? If I set the margin-right of the div containing the svg to 4px, then the right edge shows as expected. But if the margin is 5px or more, then you get what is shown in the screenshot above. It seems like when the margin-right grows from 4px to 5px, it is actually growing to the left, which covers up that right edge of the svg.

[ismay]

Hmm yeah no idea. I can imagine that it's a flex layout and maybe not responding to the margin as expected. But not sure