[Spike] What is the best way to mix icons and buttons mw-ui- classes for building the sticky header
Closed, ResolvedPublic3 Estimated Story PointsSpike
Actions

Assigned To

Authored By

	Jdlrobson
	Aug 23 2021, 5:10 PM

Description

In previous projects we've introduced design inconsistencies whenever we've mixed button and icon classes, specifically around hover states.

Question to answer:

Going into sticky header work what is the best way to create a button with an icon?

Outcome:

Sample code documented in this ticket.
Are there any changes we should make to core to get more optimal results

Sign off steps

Sample code will be added to the first sticky header tasks

Details

	Subject	Repo	Branch	Lines +/-
	[storybook] Document button usage and update broken stories	mediawiki/skins/Vector	master	+193 -44
	mw-ui-button should be compatible with the checkbox hack	mediawiki/core	master	+10 -0

Customize query in gerrit

Related Objects

Mentioned In: T289320: Reconsider usage of `mw-ui-icon-element` in Desktop Improvements buttons

Event Timeline

Jdlrobson created this task.Aug 23 2021, 5:10 PM

Restricted Application changed the subtype of this task from "Task" to "Spike". · View Herald TranscriptAug 23 2021, 5:10 PM

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Jdlrobson triaged this task as High priority.Aug 23 2021, 5:10 PM

Jdlrobson mentioned this in T289320: Reconsider usage of `mw-ui-icon-element` in Desktop Improvements buttons.

Jdlrobson updated the task description. (Show Details)Aug 23 2021, 5:24 PM

LGoto set the point value for this task to 3.Aug 23 2021, 5:24 PM

LGoto moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Jdlrobson claimed this task.Aug 25 2021, 10:56 PM

Jdlrobson moved this task from Ready for Development to Doing on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Change 715072 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] Add support for buttons with icons

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

gerritbot added a project: Patch-For-Review.Aug 26 2021, 7:13 PM

After talking with @bwang the most obvious markup to use would be:

<div class="mw-ui-button">
		<span class="mw-ui-icon mw-ui-icon-wikimedia-search"></span>
		Button text
	</div>

Using WVUI as a reference:
https://doc.wikimedia.org/wvui/master/ui/?path=/story/components-button--all-combinations&args=icon:wvuiIconArticlesSearch

Jdlrobson moved this task from Code Review to Ready for Signoff on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Aug 30 2021, 5:49 PM

Jdlrobson added a subscriber: bwang.

Change 715072 merged by jenkins-bot:

[mediawiki/core@master] mw-ui-button should be compatible with the checkbox hack

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

ReleaseTaggerBot added a project: MW-1.37-notes (1.37.0-wmf.21; 2021-08-30).Aug 31 2021, 12:00 AM

Maintenance_bot removed a project: Patch-For-Review.Aug 31 2021, 12:10 AM

Jdlrobson moved this task from Ready for Signoff to Doing on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Sep 1 2021, 3:20 PM

Jdlrobson removed Jdlrobson as the assignee of this task.Sep 2 2021, 5:04 PM

Jdlrobson moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

LGoto assigned this task to Jdlrobson.Sep 2 2021, 5:06 PM

Jdlrobson removed Jdlrobson as the assignee of this task.Sep 7 2021, 2:50 PM

Jdlrobson moved this task from Code Review to Ready for Signoff on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Jdlrobson moved this task from Ready for Signoff to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Sep 7 2021, 3:37 PM

Change 716065 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] [storybook] Document button usage and update broken stories

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

gerritbot added a project: Patch-For-Review.Sep 7 2021, 3:38 PM

LGoto assigned this task to bwang.Sep 7 2021, 5:32 PM

Jdlrobson moved this task from Code Review to Ready for Signoff on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Sep 7 2021, 10:20 PM

Change 716065 merged by jenkins-bot:

[mediawiki/skins/Vector@master] [storybook] Document button usage and update broken stories

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

Should be signed off by someone other than Bernard or myself to help knowledge share the decisions made here.

cjming claimed this task.Sep 7 2021, 10:48 PM

ReleaseTaggerBot edited projects, added MW-1.37-notes (1.37.0-wmf.23; 2021-09-13); removed MW-1.37-notes (1.37.0-wmf.21; 2021-08-30).Sep 7 2021, 11:00 PM

Maintenance_bot removed a project: Patch-For-Review.Sep 7 2021, 11:11 PM

lgtm - thanks for the button/icon refactor

[Spike] What is the best way to mix icons and buttons mw-ui- classes for building the sticky headerClosed, ResolvedPublic3 Estimated Story PointsSpikeActions