Page MenuHomePhabricator

Figure out which demos to display on the Button demo page
Closed, ResolvedPublic

Description

In a code review comment on https://gerrit.wikimedia.org/r/c/design/codex/+/793586 , @Sarai-WMDE wrote:

We've been discussing component architecture internally, and so far it would appear that IconOnly could be a variant of the button component (due to the need for it to include specific accessibility attributes), therefore my suggestion. I agree it's a good idea to wait, since now I understand that the proposal wouldn't reflect reality (yet?).
If we want to move ahead with displaying a selection of demos, may I suggest the following instead?

  • Default normal
  • Progressive primary
  • Destructive quiet
  • Default normal, disabled
  • Quiet, disabled
  • Default normal, with icon
  • Default quiet, with icon
  • Default normal, icon only
  • Default quiet, icon only

So we 1.display all types and actions at the beginning, 2.feature how the appearance of disabled quiet buttons is different from that of the other types, 3. then (no changes here) display the with icon and icon only versions. Hope this sounds good!

We should figure out which demos we want to show on the Button demo page, then implement that decision.

Currently, with https://gerrit.wikimedia.org/r/c/design/codex/+/793586 having been merged, we show the following demos:

  • Default
  • Progressive
  • Destructive, primary
  • Destructive, primary, disabled
  • Quiet
  • Default, with icon
  • Default, quiet, with icon
  • Default, icon only
  • Quiet, icon only

As @DannyS712 pointed out in that same Gerrit discussion, you can already make all possible buttons using the configurable demo, but 1) that's not super obvious (especially for the ones with icons), and 2) on other component demo pages, we generally show a variety of examples even if you could theoretically get them by entering the right settings into the configurable demo.

Event Timeline

  1. that's not super obvious (especially for the ones with icons)

Filed T309877 for icon configuration more generally

Change 881709 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] Button: Add CSS-only version

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

Change 881709 merged by jenkins-bot:

[design/codex@main] Button: Add CSS-only version

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

Change 889230 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] Update Codex from v0.5.0 to v0.6.0

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

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/66d018802f/w

Change 889230 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.5.0 to v0.6.0

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

AnneT claimed this task.
AnneT subscribed.

Resolving this since the button demos have been updated to match the CSS-only button demos, which just demonstrate the different actions and weights + disabled state

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/66d018802f/w/