-
Notifications
You must be signed in to change notification settings - Fork 75
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Component: Select #2
Comments
For reference here is how Material handles this... https://material-components.github.io/material-components-web-catalog/#/component/select they allow both a native and an "enhanced" select which would visually match what our dropdown looks like. |
I think we still need a disscusion about what want this componetn to look like. @pr3tori4n got a really good start on this in #44 but has to put it on hold. We never really got a solid idea of what we want the the UI and API for this component to look like and given discussions around what other things like dropdowns should look like that has happened in teams I still think we need to spend more time defining what we want selects dropdowns to look like. After looking at what @macandcheese posted about Material Designs select I think we have a pretty good idea of what
I think that our own <calcite-select>
<select name="foo" >
<option value="bar">Bar</option>
<option value="baz">Baz</option>
<option value="zip">Zip</option>
<option value="zot">Zot</option>
</select>
</calcite-select> This should use the native I also think we should support a
For example: <calcite-select mode="enhanced">
<select name="foo" >
<option value="bar">Bar</option>
<option value="baz">Baz</option>
<option value="zip">Zip</option>
<option value="zot">Zot</option>
</select>
</calcite-select> <calcite-select mode="auto">
<select name="foo" >
<option value="bar">Bar</option>
<option value="baz">Baz</option>
<option value="zip">Zip</option>
<option value="zot">Zot</option>
</select>
</calcite-select> In addition I think we should also support a @macandcheese I still have a lot of questions around the updated Calcite Dropdown UI. For example:
I also think that we should save the "Navigation Dropdown" pattern for a separate component. I also think that we need to be strict here. |
I think we need to limit our scope on this to avoid things getting crazy with people wanting thing like multi select menus (#46), filtering selects filter dropdowns ect... |
It isn't that I don't want to do stuff like multi selects, search ect... but I think we need to make forward progress rather then bike shedding these components. |
IMO those are new component. but might use some styling concept from this component. |
@macandcheese I really need to see what you "real" mockups look like because those are ~100x better then my best mockups most days. 😄 I REALLY like the components in #2 (comment) and it lines up pretty well with what I proposed in #2 (comment). Looking at the designs it looks like we should also support @macandcheese a few questions:
|
Yep, that was an oversight, we'd need to handle multiple values in the "input" field or otherwise style a semantic
Functionally they are the same as in the example to the left, they provide a way to "untoggle" selected items - that was just a different design idea. In that example, the "drawer" they are contained within would be visible when the "typeahead results" are not visible so users could always dismiss items. I do kind of like the one of the left as well, but you can get in a weird "narrow input" state depending on length and count of selected chips, and when it breaks to two lines it can also be weird... The one on the right lets the input always maintain width / height while the drawer beneath handles multiple chips better (IMO anyway, ha)... We can work on the design and UX of that component in a separate issue from
100% agree, and should coincide with updated chips, which could be used here and in a few other areas : #47 |
As discussed in yesterdays meeting I'm closing this issue. It appears there wasn't much interest in building an "enhanced" select unless we also built the full mobile sheet UI which is pretty unnecessary considering we get it for free in browsers and This could be reopened later if we decide the full "enhanced" select experience is worth it. |
Sync config w/ @esri/calcitie-components@1.0.0-next.293
Esri/calcite-web#1017 and Esri/calcite-web#1021
Also See: https://ionicframework.com/docs/api/select
The text was updated successfully, but these errors were encountered: