MDLW: Modify multiselect dropdown widget to display selected pills. #19591
Conversation
aryanshridhar
force-pushed
the
Refactor-MDLW
branch
3 times, most recently
from
0768f8d
to
bccbda6
Compare
| <div class="exit"> | ||
| <span aria-hidden="true">×</span> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
The name for this should be singular.
| case "Escape": { | ||
| dropdown_menu.dropdown("toggle"); | ||
| break; | ||
| } |
There was a problem hiding this comment.
This does not work correctly with bot-owner widget in the Change bot info and owner modal opened from settings, it closes the bot info modal. Also with message edit widget, Escape closes the edit form and not only the dropdown widget.
This commits essentially revamps the existing implementation of Multiselect dropdown list widget to display pills beside the dropdown for each selected item. Along with the above change, here are the additional changes included as well - From UI standpoint - - A funnel icon is displayed rather than the "No filters" button which toggles the dropdown. - When any dropdown item is selected, the corresponding value is displayed in a pill next to the dropdown. Each pill has a "x" button next to it for cases when the user wants to remove them. - Along with the above point, the dropdown item gets greyed out when pressed on it, indicating that it's pill value is already displayed. - Removes the previously added "Filter" button, as now selecting a pill immediately applies it. From code standpoint - - A few parameters including `default_text`, `on_update` are removed as they are no longer required now. - Introduced seperate handlebar templates for rendering MDLW widget and it's pill. - The widget now takes `on_pill_add` and `on_pill_remove` parameters which trigger when a pill is added and removed respectively. - Due to the above changes, modified the node tests for corresponding changes in dropdown_list_widget.
Within commit 7c588d4, we added an function in list_widget.js which was used to retain a few dropdown list items in case of MDLW. However in previous commit, we revamped the Multiselect dropdown list widget which eventually removes the use of above function. This commit essentially removes the dead `retain_selected_items` function in list_widget.js along with it's node tests as they are no longer required now.
In commit 0d20a20, we missed out the "Escape" keyhandler which is required to handle scenario where a user wants to close the dropdown using "Escape" key. This commit essentially handles the above case, which enables the functionality to close dropdown using "Esc" keyboard button.
|
(I rebased this to help along #21935, but I haven’t addressed any of the above feedback or made any other changes except updating it for refactors in |
|
Heads up @aryanshridhar, we just merged some commits that conflict with the changes your made in this pull request! You can review this repository's recent commits to see where the conflicts occur. Please rebase your feature branch against the |
timabbott
force-pushed
the
main
branch
2 times, most recently
from
4ec3636
to
88b200c
Compare
|
Closing as we've deleted the original DropdownListWidget class in favor of a new dropdown_widget component based on Tippy. |
Commit 03e4fca - Revamps the multiselect dropdown list widget to display the selected dropdown pills beside the filter icon (Refer commit description for a better summary).
Commit befb74c - Removes the dead code arose due to the above change.
Screenshot
When implemented MDLW in Recent topic view (#19445) -