Skip to content

icon slot for each item #250

@jachin

Description

@jachin

Support an icon for each option in the dropdown.

It should also show up when an item is selected.

It would be nice to use a slot here, but that's not going to work since we need these icons to show up at least 2 places (in the dropdown and in the selected value element).

We're probably going to need to do node cloning here.

The markup would look something like...

<select slot="select-input">
  <option data-description="scarlet, vermilion, ruby, ruby red, ruby-colored, cherry" selected="">
    <span class="icon">....</span>
    Red
  </option>
  <option data-description="yellowish, yellowy, lemon, lemony, amber, gold, golden; blond, light brown, fair, flaxen">
    <span class="icon">....</span>
    Yellow
  </option>
  <option data-description=" sky blue, azure, cobalt (blue), sapphire, cerulean, navy (blue), saxe (blue), Oxford blue, Cambridge blue, ultramarine">
    <span class="icon">....</span>
    Blue
  </option>
  <option data-description="A town in France">
    Orange
  </option>
  <option data-description="greenish, viridescent; olive green, pea green, emerald green, lime green, bottle green">
    Green
  </option>
  <option data-description="violet">
    Purple
  </option>
</select>

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions