⚓ T368635 MenuButton: use Button instead of ToggleButton

⚓ T368635 MenuButton: use Button instead of ToggleButton
Page Menu
Phabricator
Create Task
Maniphest
T368635
MenuButton: use Button instead of ToggleButton
Closed, Resolved
Public
3 Estimated Story Points
Actions
Edit Task
Edit Related Tasks...
Create Subtask
Edit Parent Tasks
Edit Subtasks
Merge Duplicates In
Close As Duplicate
Edit Related Objects...
Edit Commits
Edit Mocks
Mute Notifications
Protect as security issue
Assigned To
lwatson
Authored By
bmartinezcalvo
Jun 27 2024, 4:18 PM
2024-06-27 16:18:58 (UTC+0)
Tags
Codex
(Pending Release)
Design
(Incoming)
Readers Essential Work (Codex)
Reader Growth Team (Sprint 6 (Dec 10 - EOY) Q2 25/26)
(Signoff)
Referenced Files
F55959989: Captura de pantalla 2024-06-28 a las 12.36.50.png
Jun 28 2024, 10:36 AM
2024-06-28 10:36:58 (UTC+0)
F55922167: Captura de pantalla 2024-06-27 a las 18.10.53.png
Jun 27 2024, 4:18 PM
2024-06-27 16:18:58 (UTC+0)
Subscribers
Aklapper
AnneT
bmartinezcalvo
Catrope
CCiufo-WMF
DTorsani-WMF
egardner
View All 12 Subscribers
Description
Background
Currently, the
MenuButton
component only supports a
quiet
ToggleButton
to display the menu. In some cases, this quiet MenuButton could not be visible enough, and we may want to use a normal button (or a progressive button).
To enable this, MenuButton should use a regular Button instead of a ToggleButton. This will allow us to support the full range of weights (normal, quiet, primary) and actions (progressive, destructive). The behavior when the menu is expanded wouldn't quite match the mockup above, because we wouldn't be showing the toggled-on state of the ToggleButton, but that's fine: we don't need a visual indication on the button that it's toggled on, since you already know that from the menu being expanded.
Ideally this change should also fix
T379075: MenuButton: selecting an item with Enter doesn't close the menu
and
T399905: MenuButton: Pressing Enter when a menu item is highlighted should select that item
as a side effect.
Acceptance criteria
Design
Update the component in the Figma
library
Code
Change MenuButton to use a Button instead of a ToggleButton
But preserve the current behavior where clicking the button opens the menu if it's closed, or closes it if it's open, and clicking away closes the menu
Add
action
and
weight
props that are passed through to Button
But make the default weight
quiet
, to preserve compatibility with the current behavior
Details
Related Changes in Gerrit:
Subject
Repo
Branch
Lines +/-
Update Codex from v2.3.3 to v2.3.4
mediawiki/core
master
+359
-232
MenuButton: replace internal toggle button with button
design/codex
main
+585
-60
Customize query in gerrit
Related Objects
Mentions
Duplicates
Mentioned Here
T412821: MenuButton: enable touch navigation to menu items
T379075: MenuButton: selecting an item with Enter doesn't close the menu
T399905: MenuButton: Pressing Enter when a menu item is highlighted should select that item
Duplicates Merged Here
T401955: Support non-quiet (and maybe progressive/destructive/primary) MenuButtons
Event Timeline
bmartinezcalvo
created this task.
Jun 27 2024, 4:18 PM
2024-06-27 16:18:58 (UTC+0)
Restricted Application
added a subscriber:
Aklapper
View Herald Transcript
Jun 27 2024, 4:19 PM
2024-06-27 16:19:00 (UTC+0)
CCiufo-WMF
moved this task from
Inbox
to
Backlog
on the
Design-System-Team
board.
Jun 27 2024, 5:37 PM
2024-06-27 17:37:20 (UTC+0)
bmartinezcalvo
added subscribers:
Catrope
AnneT
egardner
and
2 others
Jun 28 2024, 10:34 AM
2024-06-28 10:34:50 (UTC+0)
bmartinezcalvo
updated the task description.
(Show Details)
Jun 28 2024, 10:36 AM
2024-06-28 10:36:58 (UTC+0)
Eslam_AbdElhakem
subscribed.
Jul 7 2024, 2:03 PM
2024-07-07 14:03:43 (UTC+0)
bmartinezcalvo
added a project:
Design
Jan 20 2025, 7:28 PM
2025-01-20 19:28:38 (UTC+0)
bmartinezcalvo
removed a subscriber:
Sarai-WMDE
Catrope
merged a task:
T401955: Support non-quiet (and maybe progressive/destructive/primary) MenuButtons
Aug 14 2025, 7:01 PM
2025-08-14 19:01:37 (UTC+0)
DTorsani-WMF
triaged this task as
Low
priority.
Aug 14 2025, 7:02 PM
2025-08-14 19:02:43 (UTC+0)
DTorsani-WMF
moved this task from
Backlog
to
Upcoming
on the
Codex
board.
Catrope
added a comment.
Aug 14 2025, 7:06 PM
2025-08-14 19:06:20 (UTC+0)
Comment Actions
We should also explore basing MenuButton on Button instead of ToggleButton, which would make it easier to provide the full suite of actions and weights (primary, progressive, destructive). That might also help with some other MenuButton bugs:
T399905: MenuButton: Pressing Enter when a menu item is highlighted should select that item
T379075: MenuButton: selecting an item with Enter doesn't close the menu
Catrope
moved this task from
Upcoming
to
Ready for Design/Dev
on the
Codex
board.
Aug 14 2025, 7:06 PM
2025-08-14 19:06:31 (UTC+0)
Catrope
raised the priority of this task from
Low
to
Medium
Aug 25 2025, 9:38 PM
2025-08-25 21:38:59 (UTC+0)
Catrope
updated the task description.
(Show Details)
Catrope
added a project:
Reader Growth Team
Catrope
moved this task from
Incoming/Inbox
to
Needs Refinement
on the
Reader Growth Team
board.
Jdlrobson-WMF
added a project:
Readers Essential Work (Codex)
Sep 10 2025, 8:56 PM
2025-09-10 20:56:07 (UTC+0)
HSwan-WMF
subscribed.
Sep 24 2025, 4:54 PM
2025-09-24 16:54:41 (UTC+0)
Comment Actions
RG can't look at this one until the designs are complete.
egardner
added a comment.
Sep 24 2025, 4:55 PM
2025-09-24 16:55:31 (UTC+0)
Comment Actions
Hey
@DTorsani-WMF
feel free to tag Reader Growth again when designs are ready, and we'll estimate and pick up when we can.
egardner
removed a project:
Reader Growth Team
Sep 24 2025, 4:55 PM
2025-09-24 16:55:42 (UTC+0)
DTorsani-WMF
added a comment.
Edited
Sep 24 2025, 6:58 PM
2025-09-24 18:58:26 (UTC+0)
Comment Actions
@HSwan-WMF
@egardner
what designs do you think you need for this? The idea is that a MenuButton would use a Button component instead of a ToggleButton, and so it would have all the same design styles and options for variants that a Button has. The Button itself would no longer have a "menu opened" state, which I don't think is necessary.
DTorsani-WMF
renamed this task from
MenuButton: explore available options for other button flavors
to
MenuButton: use Button instead of ToggleButton
Sep 29 2025, 6:13 PM
2025-09-29 18:13:33 (UTC+0)
Catrope
added a comment.
Sep 29 2025, 6:17 PM
2025-09-29 18:17:50 (UTC+0)
Comment Actions
As
@DTorsani-WMF
said I think this is mostly an engineering task that shouldn't really need explicit designs. The MenuButton should accept
action
and
weight
props, and it should look the same as the Button component does when given those props. Does that make sense?
HSwan-WMF
added a comment.
Sep 29 2025, 7:56 PM
2025-09-29 19:56:51 (UTC+0)
Comment Actions
@egardner
I think that answers our questions and we should have what we need at this point. I'll pull this one to our next refinement session.
Catrope
added a project:
Reader Growth Team
Oct 6 2025, 8:31 PM
2025-10-06 20:31:43 (UTC+0)
HSwan-WMF
set the point value for this task to
Oct 8 2025, 4:36 PM
2025-10-08 16:36:14 (UTC+0)
HSwan-WMF
moved this task from
Needs Refinement
to
Ready
on the
Reader Growth Team
board.
Nov 19 2025, 6:14 PM
2025-11-19 18:14:27 (UTC+0)
SherryYang-WMF
moved this task from
Ready
to
Sprint 6 (Dec 10 - EOY) Q2 25/26
on the
Reader Growth Team
board.
Dec 9 2025, 6:03 PM
2025-12-09 18:03:27 (UTC+0)
SherryYang-WMF
edited projects, added
Reader Growth Team (Sprint 6 (Dec 10 - EOY) Q2 25/26)
; removed
Reader Growth Team
lwatson
claimed this task.
Dec 9 2025, 7:20 PM
2025-12-09 19:20:43 (UTC+0)
lwatson
moved this task from
Committed
to
Doing
on the
Reader Growth Team (Sprint 6 (Dec 10 - EOY) Q2 25/26)
board.
Dec 10 2025, 3:27 PM
2025-12-10 15:27:37 (UTC+0)
gerritbot
added a comment.
Dec 10 2025, 10:54 PM
2025-12-10 22:54:28 (UTC+0)
Comment Actions
Change #1217314 had a related patch set uploaded (by LWatson; author: LWatson):
[design/codex@main] MenuButton: replace internal toggle button with button
gerritbot
added a project:
Patch-For-Review
Dec 10 2025, 10:54 PM
2025-12-10 22:54:29 (UTC+0)
lwatson
moved this task from
Ready for Design/Dev
to
Code Review
on the
Codex
board.
Dec 10 2025, 11:10 PM
2025-12-10 23:10:54 (UTC+0)
lwatson
moved this task from
Doing
to
Code Review
on the
Reader Growth Team (Sprint 6 (Dec 10 - EOY) Q2 25/26)
board.
lwatson
added a comment.
Edited
Dec 10 2025, 11:22 PM
2025-12-10 23:22:34 (UTC+0)
Comment Actions
This patch is ready for code review and addresses bugs about selection and toggling the menu with keyboard navigation (
T379075
and
T399905
Preview unmerged changes:
gerritbot
added a comment.
Dec 18 2025, 5:26 PM
2025-12-18 17:26:01 (UTC+0)
Comment Actions
Change #1217314
merged
by jenkins-bot:
[design/codex@main] MenuButton: replace internal toggle button with button
Maintenance_bot
removed a project:
Patch-For-Review
Dec 18 2025, 5:31 PM
2025-12-18 17:31:06 (UTC+0)
bvibber
moved this task from
Code Review
to
QA
on the
Reader Growth Team (Sprint 6 (Dec 10 - EOY) Q2 25/26)
board.
Dec 18 2025, 11:22 PM
2025-12-18 23:22:27 (UTC+0)
lwatson
moved this task from
Code Review
to
Design Review
on the
Codex
board.
Dec 19 2025, 3:04 PM
2025-12-19 15:04:25 (UTC+0)
Comment Actions
My mistake! I should have put this in design review for
@DTorsani-WMF
. The code was merged. When you return from the end-of-year break, please let me know any feedback on this. Do you plan on completing the design requirement?
Update the component in the Figma library
lwatson
added a comment.
Dec 20 2025, 1:57 AM
2025-12-20 01:57:07 (UTC+0)
Comment Actions
There was a post-merge build failure (
details
). I reached out to
#developer-experience
and Tyler C. re-ran the checks in the Jenkins UI, and it was successful 🎉
lwatson
added a comment.
Dec 20 2025, 2:28 AM
2025-12-20 02:28:42 (UTC+0)
Comment Actions
No visual regressions were introduced
. (Filter search "menu_button")
lwatson
added a comment.
Edited
Dec 20 2025, 3:06 AM
2025-12-20 03:06:44 (UTC+0)
Comment Actions
QA Test Plan
The MenuButton component was refactored to use an internal Button component instead of ToggleButton. The test plan should verify the component's visual appearance, prop configurations, and interaction behaviors.
Test Environment:
URL:
Note: This is based on the
main
branch, not the latest Codex version
Tool: Browser DevTools (Elements/Inspector panel)
Browsers: Chrome, Firefox, Safari, etc
Setup Steps
Navigate to the Codex MenuButton documentation page
Open browser DevTools
Locate the configurable demo at the top of the page
Use the configuration controls to test different prop combinations
Test
Component Structure
Verify the Button component is used. Inspect the MenuButton. Expect: The Button element has
cdx-button
class.
Default behavior (no props set)
Default weight and action. Load page without changing any props in demo. Expect: Button has classes:
cdx-button--weight-quiet
and
cdx-button--action-default
Default framed state. Load page without changing any props in demo. Expect: Button does
not
have
cdx-button--framed
class.
Action prop
Progressive action. Set action prop to "progressive" in demo. Expect: Button has
cdx-button--action-progressive
class.
Destructive action. Set action prop to "destructive" in demo. Expect: Button has
cdx-button--action-destructive
class.
Default action. Set action prop to "default" in demo. Expect: Button has
cdx-button--action-default
class.
Weight prop
Quiet weight. Set weight prop to "quiet" in demo. Expect: Button has
cdx-button--weight-quiet
class. Button does
not
have
cdx-button--framed
class.
Normal weight. Set weight prop to "normal" in demo. Expect: Button has
cdx-button--weight-normal
and
cdx-button--framed
classes.
Primary weight. Set weight prop to "primary" in demo. Expect: Button has
cdx-button--weight-primary
and
cdx-button--framed
classes.
Combined prop variations
Normal + progressive. Set weight to
normal
and action to
progressive
. Expect: Button has
cdx-button--weight-normal
cdx-button--action-progressive
cdx-button--framed
classes.
[other combinations]
Mouse/Click Interactions
Click opens menu. Click the MenuButton when the menu is closed. Expect: Menu opens and displays menu items.
Click closes menu. Click the MenuButton when the menu is open. Expect: Menu closes.
Click outside closes menu. Click MenuButton to open the menu, and then click outside the menu area. Expect: menu closes.
Click menu item closes menu. Click MenuButton to open the menu, and then click on a menu item. Expect: Menu closes after selection.
Keyboard Navigation
Enter key opens menu. Tab to focus MenuButton, and then press Enter. Expect: Menu opens.
Enter key closes menu. Open menu with Enter key, and then press Enter again (focus still on the button). Expect: Menu closes.
Enter selects menu item. Open the menu, and use the arrow keys to highlight a menu item, and then press Enter. Expect: Menu item is selected and menu closes.
Space key opens menu. Tab to focus MenuButton, and then press Space. Expect: Menu opens.
Escape key closes menu. Open the menu, and then press Escape. Expect: Menu closes and focus returns to the button.
Arrow down key navigation. Open the menu with Enter/Space, and then press Down Arrow multiple times. Expect: Focus moves down through menu items.
Arrow up key navigation. Open the menu with Enter/Space, and then press Up Arrow multiple times. Expect: Focus moves up through menu items.
Notes
No visual regressions found (Pixel)
Touch screen with screen reader navigation issues were reported
T412821: MenuButton: enable touch navigation to menu items
mfossati
moved this task from
QA
to
Signoff
on the
Reader Growth Team (Sprint 6 (Dec 10 - EOY) Q2 25/26)
board.
Jan 5 2026, 5:51 PM
2026-01-05 17:51:44 (UTC+0)
mfossati
subscribed.
Comment Actions
Thanks for the exhaustive QA steps
@lwatson
In
T368635#11479347
@lwatson
wrote:
Component Structure
Verify the Button component is used. Inspect the MenuButton. Expect: The Button element has
cdx-button
class.
Default behavior (no props set)
Default weight and action. Load page without changing any props in demo. Expect: Button has classes:
cdx-button--weight-quiet
and
cdx-button--action-default
Default framed state. Load page without changing any props in demo. Expect: Button does
not
have
cdx-button--framed
class.
Action prop
Progressive action. Set action prop to "progressive" in demo. Expect: Button has
cdx-button--action-progressive
class.
Destructive action. Set action prop to "destructive" in demo. Expect: Button has
cdx-button--action-destructive
class.
Default action. Set action prop to "default" in demo. Expect: Button has
cdx-button--action-default
class.
Weight prop
Quiet weight. Set weight prop to "quiet" in demo. Expect: Button has
cdx-button--weight-quiet
class. Button does
not
have
cdx-button--framed
class.
Normal weight. Set weight prop to "normal" in demo. Expect: Button has
cdx-button--weight-normal
and
cdx-button--framed
classes.
Primary weight. Set weight prop to "primary" in demo. Expect: Button has
cdx-button--weight-primary
and
cdx-button--framed
classes.
Combined prop variations
Normal + progressive. Set weight to
normal
and action to
progressive
. Expect: Button has
cdx-button--weight-normal
cdx-button--action-progressive
cdx-button--framed
classes.
[other combinations]
Mouse/Click Interactions
Click opens menu. Click the MenuButton when the menu is closed. Expect: Menu opens and displays menu items.
Click closes menu. Click the MenuButton when the menu is open. Expect: Menu closes.
Click outside closes menu. Click MenuButton to open the menu, and then click outside the menu area. Expect: menu closes.
Click menu item closes menu. Click MenuButton to open the menu, and then click on a menu item. Expect: Menu closes after selection.
Keyboard Navigation
Enter key opens menu. Tab to focus MenuButton, and then press Enter. Expect: Menu opens.
Enter key closes menu. Open menu with Enter key, and then press Enter again (focus still on the button). Expect: Menu closes.
Enter selects menu item. Open the menu, and use the arrow keys to highlight a menu item, and then press Enter. Expect: Menu item is selected and menu closes.
Space key opens menu. Tab to focus MenuButton, and then press Space. Expect: Menu opens.
Escape key closes menu. Open the menu, and then press Escape. Expect: Menu closes and focus returns to the button.
Arrow down key navigation. Open the menu with Enter/Space, and then press Down Arrow multiple times. Expect: Focus moves down through menu items.
Arrow up key navigation. Open the menu with Enter/Space, and then press Up Arrow multiple times. Expect: Focus moves up through menu items.
DTorsani-WMF
moved this task from
Design Review
to
Pending Release
on the
Codex
board.
Jan 5 2026, 7:12 PM
2026-01-05 19:12:35 (UTC+0)
egardner
closed this task as
Resolved
Jan 6 2026, 5:02 PM
2026-01-06 17:02:43 (UTC+0)
bmartinezcalvo
removed projects:
Reader Growth Team (Sprint 6 (Dec 10 - EOY) Q2 25/26)
Design-System-Team
Jan 7 2026, 2:53 PM
2026-01-07 14:53:36 (UTC+0)
bmartinezcalvo
updated the task description.
(Show Details)
gerritbot
added a comment.
Jan 29 2026, 3:33 PM
2026-01-29 15:33:59 (UTC+0)
Comment Actions
Change #1235058 had a related patch set uploaded (by VolkerE; author: VolkerE):
[mediawiki/core@master] Update Codex from v2.3.3 to v2.3.4
gerritbot
added a project:
Patch-For-Review
Jan 29 2026, 3:34 PM
2026-01-29 15:34:01 (UTC+0)
lwatson
added a project:
Reader Growth Team (Sprint 6 (Dec 10 - EOY) Q2 25/26)
Jan 29 2026, 7:17 PM
2026-01-29 19:17:45 (UTC+0)
Comment Actions
Re-adding the Reader Growth tag for sprint tracking purposes. Reader Growth and Reader Experience teams are currently handling these Codex tasks as part of our active sprint.
gerritbot
added a comment.
Feb 2 2026, 8:15 PM
2026-02-02 20:15:00 (UTC+0)
Comment Actions
Change #1235058
merged
by jenkins-bot:
[mediawiki/core@master] Update Codex from v2.3.3 to v2.3.4
Maintenance_bot
removed a project:
Patch-For-Review
Feb 2 2026, 8:34 PM
2026-02-02 20:34:06 (UTC+0)
Log In to Comment
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct.
Wikimedia Foundation
Code of Conduct
Disclaimer
CC-BY-SA
GPL
Credits