Implement Dropdown Menu v2 Component #4475
Comments
|
we should also support |
Garbee
changed the title
|
Hi @traviskaufman, How is this different then the generic overflow dropdown button? (https://material.google.com/components/buttons.html#buttons-dropdown-buttons) Seems like the dropdown button specification is the more complete solution. Are there plans to implement it in Mdl? |
|
I think this is just the dropdown part of the dropdown button. Menu with options/actions. |
|
@HriBB is correct; from a UX perspective this is pretty much the menu part of a drop down button. There is additional work that needs to be done though for drop down menus, particularly around accessibility. |
|
Cool. Thanks for the explanation guys. |
|
Is v2 going to cover dropdown menus? |
|
@gaastonsr That is a part of the drawer component which is #4476. Current plans is to offer one form of the MD specified menus. |
* Add mdl-form-field package * Refactor existing input controls to use mdl-form-field Resolves #4475 [Delivers #130834979]
* Add mdl-form-field package * Refactor existing input controls to use mdl-form-field Resolves #4475 [Delivers #130834979]
* Add mdl-form-field package * Refactor existing input controls to use mdl-form-field Resolves #4475 [Delivers #130834979]
|
^ ah, ignore this. I referenced the wrong issue in the commit 😭 |
* Refactor custom event logic out of mdl-icon-toggle This is needed by mdl-menu as well in order for it to emit events and therefore work with the select element. Part of #4475 [#126819221]
* Add `MDLSimpleMenu:selected` event which is broadcast when a menu item is selected * Change notion of "items" in menu to mean only item elements which are selectable as actual menu items, rather than just children of the items container. * Add logic for validating that a correct `role` attribute is placed on the vanilla menu component. Part of #4475 [#126819221]
* Add `MDLSimpleMenu:selected` event which is broadcast when a menu item is selected * Change notion of "items" in menu to mean only item elements which are selectable as actual menu items, rather than just children of the items container. * Add logic for validating that a correct `role` attribute is placed on the vanilla menu component. Part of #4475 [#126819221]
* Refactor custom event logic out of mdl-icon-toggle This is needed by mdl-menu as well in order for it to emit events and therefore work with the select element. Part of #4475 [#126819221]
* Add `MDLSimpleMenu:selected` event which is broadcast when a menu item is selected * Change notion of "items" in menu to mean only item elements which are selectable as actual menu items, rather than just children of the items container. * Add logic for validating that a correct `role` attribute is placed on the vanilla menu component. Part of #4475 [#126819221]
* Adds an `initialize` constructor hook that is called after the root element is attached, but before `getDefaultFoundation` is called. * Adds a simple way of adding / removing event listeners from a component's root node, without needing access to the root node itself. Needed for #4475 [#126819221]
…4915) * Adds an `initialize` constructor hook that is called after the root element is attached, but before `getDefaultFoundation` is called. * Adds a simple way of adding / removing event listeners from a component's root node, without needing access to the root node itself. Needed for #4475 [#126819221]
* Remove restriction on menu roles. Simply look for any `mdl-list-item` with a `role` attribute when querying for menu items. * Implement select UI with MDL simple menu. * Implement Pure CSS version on top of browser's select element * Bump up karma timeouts in a blind effort to decrease TravisCI flakiness NOTE: Auto-positioning the select menu still needs to be done. Part of #4475 [Delivers #126819221]
|
FYI ^ :) Also note, we've built the v2 version of select such that it works as both a custom component as well as with the native browser select, and you can seamlessly switch between the two. This means you get the full-fidelity experience on desktop devices while being able to switch over to the native version on a mobile device for the best cross-browser UX possible. |
* Remove restriction on menu roles. Simply look for any `mdl-list-item` with a `role` attribute when querying for menu items. * Implement select UI with MDL simple menu. * Implement Pure CSS version on top of browser's select element * Bump up karma timeouts in a blind effort to decrease TravisCI flakiness NOTE: Auto-positioning the select menu still needs to be done. Part of #4475 [Delivers #126819221]
* Remove restriction on menu roles. Simply look for any `mdl-list-item` with a `role` attribute when querying for menu items. * Implement select UI with MDL simple menu. * Implement Pure CSS version on top of browser's select element * Bump up karma timeouts in a blind effort to decrease TravisCI flakiness * Disable Firefox in CI as it seems to be flaky :/ NOTE: Auto-positioning the select menu still needs to be done. Part of #4475 [Delivers #126819221]
* Remove restriction on menu roles. Simply look for any `mdl-list-item` with a `role` attribute when querying for menu items. * Implement select UI with MDL simple menu. * Implement Pure CSS version on top of browser's select element * Bump up karma timeouts in a blind effort to decrease TravisCI flakiness * Disable Firefox in CI as it seems to be flaky :/ NOTE: Auto-positioning the select menu still needs to be done. Part of #4475 [Delivers #126819221]
This PR completes the single-line dropdown component. Additional work: * Ensured all attached DOM nodes are cleaned up in simple menu tests Part of #4475 [Delivers #129706423]
This PR completes the single-option dropdown component. Additional work: * Ensured all attached DOM nodes are cleaned up in simple menu tests Part of #4475 [Delivers #129706423]
This PR completes the single-option dropdown component. Additional work: * Ensured all attached DOM nodes are cleaned up in simple menu tests Part of #4475 [Delivers #129706423]
This PR completes the single-option dropdown component. Additional work: * Ensured all attached DOM nodes are cleaned up in simple menu tests Part of #4475 [Delivers #129706423]
This PR completes the single-option dropdown component. Additional work: * Ensured all attached DOM nodes are cleaned up in simple menu tests Part of #4475 [Delivers #129706423]
|
Closing for now. Single-select is done and multi-select will be moved to a new issue. |
|
Sorry for dragging up an old topic...but I've read this thread, and the previous one #854 and more recent ones which link to this thread as a "solution"...but i still have no idea where the MDL select component is? it's not on the components page: https://getmdl.io/components/index.html Am i missing something? I'm using MDL v1.3 which is the only version i could find |
Spec reference: https://www.google.com/design/spec/components/menus.html
This is our
<select>equivalent. See this imageMulti-modeImplement multi-select v2 component #4948The text was updated successfully, but these errors were encountered: