Page MenuHomePhabricator

Consider encouraging more text + icon flexibility in Links and Buttons
Open, LowPublic

Description

Background

Currently, Links do not encourage the use of icons within the Link, though it is technically possible. The only use of an icon within a link that Codex documents is the External Link, which state that, "This icon cannot be replaced with other icons."

Buttons with icons only encourage the use of an icon on the left side only.

MenuButtons don't convey an example of text with an icon inside the button.

Goal

Allowing for, encouraging, and documenting more flexible options to include custom icons on either side of a Link, Button, and MenuButton will enable more design solutions in instances where text and an icon in an action like these is desired.

Without this flexibility, the system feels unnecessarily limiting.

Acceptance criteria

  • Determine if this is something we would want to do
  • Update aforementioned components to allow for said flexibility
  • Create demos/props/examples demonstrating update

Event Timeline

Change #1244796 had a related patch set uploaded (by Dtorsani; author: Dtorsani):

[design/codex@main] components: Add more flexible guidance for using icons with actions

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

Change #1244796 merged by jenkins-bot:

[design/codex@main] components: Add more flexible guidance for using icons with actions

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

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

[design/codex@main] docs: Use correct MenuButtonWithIcon demo

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

Change #1268592 merged by jenkins-bot:

[design/codex@main] docs: Use correct MenuButtonWithIcon demo

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

Change #1270165 had a related patch set uploaded (by VolkerE; author: Dtorsani):

[design/codex@build-eslint-config-wikimedia-upgrade-T414401] components: Add more flexible guidance for using icons with actions

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

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

[design/codex@build-eslint-config-wikimedia-upgrade-T414401] docs: Use correct MenuButtonWithIcon demo

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

Change #1270172 abandoned by VolkerE:

[design/codex@build-eslint-config-wikimedia-upgrade-T414401] docs: Use correct MenuButtonWithIcon demo

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

Change #1270165 abandoned by VolkerE:

[design/codex@build-eslint-config-wikimedia-upgrade-T414401] components: Add more flexible guidance for using icons with actions

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

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