Page MenuHomePhabricator

Add icon support for mediawiki.ui buttons
Closed, ResolvedPublic

Description

GettingStarted wanted icons for the buttons, so we temporarily implemented the required supplemental CSS in the extension. This should be moved to core.


Version: unspecified
Severity: enhancement

Details

Reference
bz55535

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 22 2014, 2:21 AM
bzimport set Reference to bz55535.

Created attachment 13463
GettingStarted modal showing icon buttons

This shows an example modal from GettingStarted. This appearance is not necessarily exactly how the core version would look.

Also, the buttons can be implemented before the modal.

Attached:

GettingStarted_modal_and_icon_buttons.png (930×1 px, 302 KB)

Thank you for the request. This is exactly how i'd hoped this process would work.

It looks like in this instance its not only a button with an image, but a button that allows multiple lines of differently styled text within one button. Is the desire to keep this as well, or just extend the primary CTA buttons to support images?

I think that's open to discussion. We should also make sure we actually want this. I note it's not in the spec. I realize that spec isn't final, but we should bear in mind everything we add has a cost in maintenance, and potentially offers multiple ways to do the same thing.

If this is the only place this is used I would ask the PM on the feature to decide if its absolutely required, as you mentioned its not used anywhere else. I can certainly see the need for a CTA button with image, i'm not questioning that. but the multi-line button seems like it might be either so specialized that it doesn't belong in Agora Controls or it isn't the right design to begin with if we want to drive consistency.

I'm going to start a page on wiki that starts to cover what control types we have and add a place for requests. eventually we can turn this into the living spec that is our end goal

swalling wrote:

(In reply to comment #4)

If this is the only place this is used I would ask the PM on the feature to
decide if its absolutely required, as you mentioned its not used anywhere
else.
I can certainly see the need for a CTA button with image, i'm not questioning
that. but the multi-line button seems like it might be either so specialized
that it doesn't belong in Agora Controls or it isn't the right design to
begin
with if we want to drive consistency.

I'm going to start a page on wiki that starts to cover what control types we
have and add a place for requests. eventually we can turn this into the
living
spec that is our end goal

We'll have hard data in about a week, but so far usability testing has strongly suggested that the second line explanation on the CTA is very useful for users. One person even suggested they probably would not have accepted the CTA without the additional assurance that help would be provided.[1]

  1. https://www.mediawiki.org/wiki/Onboarding_new_Wikipedians/user_testing#Testing_scenario_four

Sorry if i was unclear, just questioning whether the help text need to be IN the button

(In reply to comment #1)

Created attachment 13463 [details]
GettingStarted modal showing icon buttons

The Flow prototype's "Thanks" button and "Hide/Delete/Suppress" button group also feature icons, see https://www.mediawiki.org/wiki/File:Buttons_Flyout.png

FWIW Flow's implementation uses a LESS .buttonIcon() function, https://git.wikimedia.org/blob/mediawiki%2Fextensions%2FFlow.git/HEAD/modules%2Fdiscussion%2Fstyles%2Fpost.less

Attached:

GettingStarted_modal_and_icon_buttons.png (930×1 px, 302 KB)

Related: GettingStarted is also using mw-ui-primary, which is now deprecated, for one of the icon buttons. As part of standardization, we should drop that class.

Change 139368 had a related patch set uploaded by Phuedx:
Add icon support to .mw-ui-button

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

Change 144141 had a related patch set uploaded by Phuedx:
Test the .mw-ui-button-with-icon-bgimage mixin

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

Change 144141 abandoned by Phuedx:
Test .mw-ui-icon classes and mixins

Reason:
This change has been squashed into its parent so that it has a good working example.

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

Change 158632 had a related patch set uploaded by Jdlrobson:
WIP: Add mw-ui-icon

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

Change 139368 abandoned by Phuedx:
[EXPERIMENT] Add icon mixins to mediawiki.ui

Reason:
Abandoning in favour of I68a1b207d8a4af57879361921a5f8c3aeda3fd9a.

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

Actually using these buttons should be put into a separate bug report and tied to bug 71180