Component: Native Select

[julio8a]

Style the closed state of the native select. Has the added benefit of spinner UI for mobile.
Don't need to style the expanded list.

[julio8a]

Assigning to @macandcheese since this will just take the styles from inputs/forms.

[julio8a]

@bstifle, can you put together a mock-up for this? Mainly referencing the input styles and post here.

Dev: @Esri/calcite-components, does anyone have some cycles to work on this?
@subgan82, maybe you or someone else working on charts can help implement this?

It should be just styling the native select when it's closed. The menu should stay native (benefit of spinner i.e. iOS)

[subgan82]

@subgan82, maybe you or someone else working on charts can help implement this?

Yes @julio8a we can help implementing it, if calcite team is tied up on other issues.
cc: @kumarGayu

[bstifle]

Style based on calcite inputs + calcite dropdowns

[bstifle]

this is a little more accurate, for native styles

[julio8a]

@subgan82, @kumarGayu

This one is ready to go. Please reach out to Bryan if you have any design-related questions.

[subgan82]

Thanks @julio8a we will go over it and get back.

[subgan82]

• Does it support selecting multiple items ?

[julio8a]

No support for multiple-select. Dropdown or Combobox can be used for that.

[pemberdom]

Hi, will it support icons at the options level, and next (left | right) to the selected option?

[macandcheese]

@pemberdom - Not within a native select option - the dropdown component supports icons (and both left / right). https://esri.github.io/calcite-components/?path=/story/dropdown--with-icons Would that work for the use case?

[pemberdom]

We are actually using the dropdown component for our use case, but the missing element is the caret/chevron, which makes it easier for the user to understand what kind of element they're dealing with.
Our case is the following:

• having a list of options having label + icon
• the selected option appears at the first level, meaning selected label + icon
• a caret/chevron is displayed
• having the equivalent of the "outline" style from the calcite-button

It'd be a mix between the Split Button and the Native Select (Edit: and the Dropdown):

[macandcheese]

@pemberdom - yeah, good use case. We tried to discuss what this component that's "in between" would look like when we specced the dropdown and the select... kind of that in between that appears like an input, has an indication of dropdown like a caret, and populates the field with the selected (single select) item.