Page MenuHomePhabricator

Add size property to ToggleButton component
Closed, ResolvedPublicFeature

Description

Feature summary (what you would like to be able to do and where):
It may be useful to have a size property, similar to the Button component, which allows developers to use small, medium, or large style depending on where and how it is used.

Use case(s) (list the steps that you performed to discover that problem, and describe the actual underlying problem which you want to solve. Do not describe only a solution):

  • Large toggle button for primary actions
  • Small toggle button adjacent to inline text

Benefits (why should this be implemented?):
This is functionality is already supported by the underlying CSS of both Button and ToggleButton, it would only be a matter of exposing a new property on the Vue component and appending the proper class names.

Event Timeline

Change #1216836 had a related patch set uploaded (by Dillon; author: Dillon):

[design/codex@main] ToggleButton: Add size property

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

DTorsani-WMF triaged this task as Low priority.
DTorsani-WMF moved this task from Inbox to Code Review on the Codex board.

While I'm still not a proponent for the different button sizes*, it seems only congruent to feature the same sizes for the same button appearance. @Dillon Just to be clear, there's not a stated product need for the applying a ToggleButton in a different size though?

  • As the guidance on when to use which is quite loose, possibly adding to more confusion and more usability issues than better user workflows.

While I'm still not a proponent for the different button sizes*, it seems only congruent to feature the same sizes for the same button appearance. @Dillon Just to be clear, there's not a stated product need for the applying a ToggleButton in a different size though?

  • As the guidance on when to use which is quite loose, possibly adding to more confusion and more usability issues than better user workflows.

There is no product need. I initially wrote this patch due to the ToggleButton not aligning properly within the flexbox of "Your impact" module in PersonalDashboard. However, now that I have Figma Dev Mode access, I can see via inspection it does in fact use the default medium size button. This makes more sense for accessibility reasons as the clickable area is easier to activate.

Change #1216836 merged by jenkins-bot:

[design/codex@main] ToggleButton: Add size property

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

Change #1270169 had a related patch set uploaded (by VolkerE; author: Dillon):

[design/codex@build-eslint-config-wikimedia-upgrade-T414401] ToggleButton: Add size property

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

Change #1270169 abandoned by VolkerE:

[design/codex@build-eslint-config-wikimedia-upgrade-T414401] ToggleButton: Add size property

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

Change #1275555 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update Codex from v2.4.0 to v2.5.0

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

Change #1275555 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v2.4.0 to v2.5.1

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