MenuButton: use Button instead of ToggleButton
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To

Authored By

	bmartinezcalvo
	Jun 27 2024, 4:18 PM

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).

Captura de pantalla 2024-06-28 a las 12.36.50.png (842×2 px, 122 KB)

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

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

Event Timeline

bmartinezcalvo created this task.Jun 27 2024, 4:18 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 27 2024, 4:19 PM

CCiufo-WMF moved this task from Inbox to Backlog on the Design-System-Team board.Jun 27 2024, 5:37 PM

bmartinezcalvo added subscribers: Catrope, AnneT, egardner and 2 others.Jun 28 2024, 10:34 AM

bmartinezcalvo updated the task description. (Show Details)Jun 28 2024, 10:36 AM

Eslam_AbdElhakem subscribed.Jul 7 2024, 2:03 PM

bmartinezcalvo added a project: Design.Jan 20 2025, 7:28 PM

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

DTorsani-WMF triaged this task as Low priority.Aug 14 2025, 7:02 PM

DTorsani-WMF moved this task from Backlog to Upcoming on the Codex board.

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

Catrope raised the priority of this task from Low to Medium.Aug 25 2025, 9:38 PM

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 2025 (Codex).Sep 10 2025, 8:56 PM

RG can't look at this one until the designs are complete.

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

@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

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?

@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

HSwan-WMF set the point value for this task to 3.Oct 8 2025, 4:36 PM

HSwan-WMF moved this task from Needs Refinement to Ready on the Reader Growth Team board.Nov 19 2025, 6:14 PM

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

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

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

Change #1217314 had a related patch set uploaded (by LWatson; author: LWatson):

[design/codex@main] MenuButton: replace internal toggle button with button

https://gerrit.wikimedia.org/r/1217314

gerritbot added a project: Patch-For-Review.Dec 10 2025, 10:54 PM

lwatson moved this task from Ready for Design/Dev to Code Review on the Codex board.Dec 10 2025, 11:10 PM

lwatson moved this task from Doing to Code Review on the Reader Growth Team (Sprint 6 (Dec 10 - EOY) Q2 25/26) board.

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: https://1217314--wikimedia-codex.netlify.app/components/demos/menu-button.html

Change #1217314 merged by jenkins-bot:

[design/codex@main] MenuButton: replace internal toggle button with button

https://gerrit.wikimedia.org/r/1217314

Maintenance_bot removed a project: Patch-For-Review.Dec 18 2025, 5:31 PM

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

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

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 🎉

No visual regressions were introduced https://pixel-reports.wmcloud.org/codex/2025-12-20T02-19-08Z/. (Filter search "menu_button")

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: https://doc.wikimedia.org/codex/main/components/demos/menu-button.html (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

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

egardner closed this task as Resolved.Jan 6 2026, 5:02 PM

bmartinezcalvo removed projects: Reader Growth Team (Sprint 6 (Dec 10 - EOY) Q2 25/26), Design-System-Team.Jan 7 2026, 2:53 PM

bmartinezcalvo updated the task description. (Show Details)

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

https://gerrit.wikimedia.org/r/1235058

gerritbot added a project: Patch-For-Review.Thu, Jan 29, 3:34 PM

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.

Change #1235058 merged by jenkins-bot: