Add mw-ui-icon

Compatible with IE8+ (because of the use of pseudo-elements).
This includes support for icons on the left of the element and
icons which hide the text of the containing element.

I attempted to make an mw-ui-icon-element which didn't use pseudo
elements but the problem with this is how it plays with things such
as mw-ui-button and the gutter. I'd suggest exploring this later as this gets greater
adoption.

In addition to this I have dropped mw-ui-icon-after since I don't see any
clear use cases for this yet and I think it is overengineering the solution.

Bug: 55535
Change-Id: I68a1b207d8a4af57879361921a5f8c3aeda3fd9a

diff --git a/docs/kss/Makefile b/docs/kss/Makefile
index a7b0c47..dfee610 100644 (file)
--- a/docs/kss/Makefile
+++ b/docs/kss/Makefile
@@ -6,7 +6,7 @@ kss: kssnodecheck
        $(eval KSS_RL_TMP := $(shell mktemp /tmp/tmp.XXXXXXXXXX))
 # Keep module names in strict alphabetical order, so CSS loads in the same order as ResourceLoader's addModuleStyles does; this can affect rendering.
 # See OutputPage::makeResourceLoaderLink.
-       @curl -sG "${MEDIAWIKI_LOAD_URL}?modules=mediawiki.legacy.commonPrint|mediawiki.legacy.shared|mediawiki.ui|mediawiki.ui.anchor|mediawiki.ui.button|mediawiki.ui.checkbox|mediawiki.ui.input&only=styles" > $(KSS_RL_TMP)
+       @curl -sG "${MEDIAWIKI_LOAD_URL}?modules=mediawiki.legacy.commonPrint|mediawiki.legacy.shared|mediawiki.ui|mediawiki.ui.anchor|mediawiki.ui.button|mediawiki.ui.checkbox|mediawiki.ui.icon|mediawiki.ui.input&only=styles" > $(KSS_RL_TMP)
        @node_modules/.bin/kss-node ../../resources/src/mediawiki.ui static/ --css $(KSS_RL_TMP) -t styleguide-template
        @rm $(KSS_RL_TMP)
 

diff --git a/resources/Resources.php b/resources/Resources.php
index f72049d..b9b2c8d 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1513,6 +1513,13 @@ return array(
                'position' => 'top',
                'targets' => array( 'desktop', 'mobile' ),
        ),
+       'mediawiki.ui.icon' => array(
+               'styles' => array(
+                       'resources/src/mediawiki.ui/components/icons.less',
+               ),
+               'position' => 'top',
+               'targets' => array( 'desktop', 'mobile' ),
+       ),
 
        /* es5-shim */
        'es5-shim' => array(

diff --git a/resources/src/mediawiki.ui/components/icons.less b/resources/src/mediawiki.ui/components/icons.less
new file mode 100644 (file)
index 0000000..3a92b21
--- /dev/null
+++ b/resources/src/mediawiki.ui/components/icons.less
@@ -0,0 +1,80 @@
+@import "mediawiki.mixins";
+
+// Variables
+@iconSize: 1.4em;
+@gutterWidth: 1em;
+
+// Mixins
+.mixin-mw-ui-icon-bgimage(@iconSvg, @iconPng) {
+       &.mw-ui-icon:before {
+               .background-image-svg(@iconSvg, @iconPng);
+       }
+}
+
+// Icons
+//
+// To use icons you must be using a browser that supports pseudo elements.
+// This includes support for IE8.
+// http://caniuse.com/#feat=css-gencontent
+// Browsers that do not support either of these selectors will degrade to text only.
+//
+// Styleguide 4.
+
+.mw-ui-icon {
+       position: relative;
+       min-height: @iconSize;
+
+       // Standalone icons
+       //
+       // Markup:
+       // <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok">OK</div>
+       // <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok mw-ui-button mw-ui-progressive">OK</div>
+       //
+       // Styleguide 4.1.1.
+       &.mw-ui-icon-element {
+               @width: @iconSize + ( 2 * @gutterWidth );
+
+               text-indent: -999px;
+               overflow: hidden;
+               width: @width;
+               min-width: @width;
+               max-width: @width;
+               &:before {
+                       left: 0;
+                       right: 0;
+                       position: absolute;
+                       margin: 0 @gutterWidth;
+               }
+       }
+
+       &:before {
+               background-position: 50% 50%;
+               float: left;
+               display: block;
+               background-repeat: no-repeat;
+               background-size: 100% auto;
+               position: relative;
+               min-height: @iconSize;
+               content: '';
+       }
+
+
+       // Icons with text
+       //
+       // Markup:
+       // <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok">OK</div>
+       // <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok mw-ui-progressive mw-ui-button">OK</div>
+       //
+       // Styleguide 4.1.2
+       &.mw-ui-icon-before {
+               &:before {
+                       width: @iconSize;
+                       margin-right: @gutterWidth;
+               }
+       }
+}
+
+// Icons
+.mw-ui-icon-ok {
+       .mixin-mw-ui-icon-bgimage('images/ok.svg', 'images/ok.png');
+}

diff --git a/resources/src/mediawiki.ui/components/images/ok.png b/resources/src/mediawiki.ui/components/images/ok.png
new file mode 100644 (file)
index 0000000..8a62f27
Binary files /dev/null and b/resources/src/mediawiki.ui/components/images/ok.png differ

diff --git a/resources/src/mediawiki.ui/components/images/ok.svg b/resources/src/mediawiki.ui/components/images/ok.svg
new file mode 100644 (file)
index 0000000..15bc296
--- /dev/null
+++ b/resources/src/mediawiki.ui/components/images/ok.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        width="142.282px" height="142.28px" viewBox="0 -11.785 142.282 142.28" enable-background="new 0 -11.785 142.282 142.28"
+        xml:space="preserve">
+<g>
+
+               <rect x="18.012" y="41.792" transform="matrix(0.6983 -0.7158 0.7158 0.6983 -17.1914 77.8785)" fill="#F0F0F0" width="131.56" height="35.083"/>
+
+               <rect x="2.416" y="64.455" transform="matrix(0.7158 0.6983 -0.6983 0.7158 67.7777 -2.5416)" fill="#F0F0F0" width="69.191" height="35.082"/>
+</g>
+</svg>