Page MenuHomePhabricator

Document in style guide how to use mw-ui-button on wiki using mw-ui-button span inside an anchor
Closed, ResolvedPublic

Description

Pages and templates wrap hyperlinks with span tags to make buttons, see URL above and e.g. https://en.wikipedia.org/wiki/Template:Blue_button and https://commons.wikimedia.org/wiki/Template:Clickable_button

This doesn't work with mw-ui-button mw-ui-progressive. The hyperlink styling in skins/common/commonElements.css

a { color: #0645ad; }

and the browser's handling of visited/unvisited hy win out over the surrounding Agora styling.

Perhaps mediawiki.ui.button should apply styles to <a> tags within. Or pages can put spans inside links, so instead of

<span class="mw-ui-button mw-ui-progressive mw-ui-big">[[Download|Get MediaWiki]]</span>

use

[[Download|<span class="mw-ui-button mw-ui-progressive mw-ui-big">Get MediaWiki</span>]]

If the latter works reliably then this bug can be WONTFIX.

In generated HTML we specifying classes directly on the link, i.e. <a href class="mw-ui-...">, but there are bugs with that too, e.g. bug 48184.


Version: unspecified
Severity: normal
URL: https://www.mediawiki.org/wiki/MediaWiki/Homepage_redesign/Preview

Details

Reference
bz61886

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 22 2014, 2:53 AM
bzimport set Reference to bz61886.
bzimport added a subscriber: Unknown Object (MLST).

(In reply to spage from comment #0)

Perhaps mediawiki.ui.button should apply styles to <a> tags within. Or
pages can put spans inside links, so instead of

<span class="mw-ui-button mw-ui-progressive mw-ui-big">[[Download|Get

MediaWiki]]</span>
use

[[Download|<span class="mw-ui-button mw-ui-progressive mw-ui-big">Get

MediaWiki</span>]]

If the latter works reliably then this bug can be WONTFIX.

The latter should always work, even on silly old browsers. We should, however, explicitly document (and support) that people should use a <span> here, never a <div>, otherwise Tidy will destroy the HTML (that's I think bug 9737 in particular and bug 2542 in general).

(I agree with the WONTFIX proposal, trying to support the format syntax looks like a nasty hack to me.)

I'm changing this to a doc bug. We should add examples to http://tools.wmflabs.org/styleguide/desktop/section-2.html explicitly noting it's for on-wiki markup (i.e. the span method).

  • Bug 63275 has been marked as a duplicate of this bug. ***

So.. what is the bug here? Can some

There's a lot of overlap with bug 48184 so let's collapse this into one bug for clarity.

  • This bug has been marked as a duplicate of bug 48184 ***