jenkins-bot has submitted this change and it was merged. Change subject: mediawiki.ui: Add radio buttons ......................................................................
mediawiki.ui: Add radio buttons Design specification on Trello- https://trello.com/c/df2N2KJx/8-radio-buttons Change-Id: Idb3d5177b6b2e9374de02416447fee9286e10a65 --- M docs/kss/Makefile M resources/Resources.php A resources/src/mediawiki.ui/components/images/radio_checked.png A resources/src/mediawiki.ui/components/images/radio_checked.svg A resources/src/mediawiki.ui/components/images/radio_disabled.png A resources/src/mediawiki.ui/components/images/radio_disabled.svg A resources/src/mediawiki.ui/components/radio.less 7 files changed, 133 insertions(+), 1 deletion(-) Approvals: Bartosz Dziewoński: Looks good to me, approved jenkins-bot: Verified diff --git a/docs/kss/Makefile b/docs/kss/Makefile index a28bf3e..31feec1 100644 --- a/docs/kss/Makefile +++ b/docs/kss/Makefile @@ -6,7 +6,7 @@ $(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.icon|mediawiki.ui.input|mediawiki.ui.text&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.radio|mediawiki.ui.icon|mediawiki.ui.input|mediawiki.ui.text&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 c39ba3b..88965d0 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -1524,6 +1524,15 @@ 'position' => 'top', 'targets' => array( 'desktop', 'mobile' ), ), + 'mediawiki.ui.radio' => array( + 'skinStyles' => array( + 'default' => array( + 'resources/src/mediawiki.ui/components/radio.less', + ), + ), + 'position' => 'top', + 'targets' => array( 'desktop', 'mobile' ), + ), // Lightweight module for anchor styles 'mediawiki.ui.anchor' => array( 'skinStyles' => array( diff --git a/resources/src/mediawiki.ui/components/images/radio_checked.png b/resources/src/mediawiki.ui/components/images/radio_checked.png new file mode 100644 index 0000000..1361ba6 --- /dev/null +++ b/resources/src/mediawiki.ui/components/images/radio_checked.png Binary files differ diff --git a/resources/src/mediawiki.ui/components/images/radio_checked.svg b/resources/src/mediawiki.ui/components/images/radio_checked.svg new file mode 100644 index 0000000..8a57732 --- /dev/null +++ b/resources/src/mediawiki.ui/components/images/radio_checked.svg @@ -0,0 +1,7 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 18.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" + viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> +<circle fill="#00AF89" cx="12" cy="12" r="6"/> +</svg> diff --git a/resources/src/mediawiki.ui/components/images/radio_disabled.png b/resources/src/mediawiki.ui/components/images/radio_disabled.png new file mode 100644 index 0000000..5a1959f --- /dev/null +++ b/resources/src/mediawiki.ui/components/images/radio_disabled.png Binary files differ diff --git a/resources/src/mediawiki.ui/components/images/radio_disabled.svg b/resources/src/mediawiki.ui/components/images/radio_disabled.svg new file mode 100644 index 0000000..e062895 --- /dev/null +++ b/resources/src/mediawiki.ui/components/images/radio_disabled.svg @@ -0,0 +1,7 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 18.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" + viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> +<circle fill="#ffffff" cx="12" cy="12" r="6"/> +</svg> diff --git a/resources/src/mediawiki.ui/components/radio.less b/resources/src/mediawiki.ui/components/radio.less new file mode 100644 index 0000000..6d8978e --- /dev/null +++ b/resources/src/mediawiki.ui/components/radio.less @@ -0,0 +1,109 @@ +@import "mediawiki.mixins"; +@import "mediawiki.ui/variables"; + +// Radio +// +// Styling radios in a way that works cross browser is a tricky problem to solve. +// In MediaWiki UI put a radio and label inside a mw-ui-radio div. +// This renders in all browsers except IE6-8 which do not support the :checked selector; +// these are kept backwards-compatible using the :not(#noop) selector. +// You should give the radio and label matching "id" and "for" attributes, respectively. +// +// Markup: +// <div class="mw-ui-radio"> +// <input type="radio" id="kss-example-7" name="kss-example-7"> +// <label for="kss-example-7">Standard radio</label> +// </div> +// <div class="mw-ui-radio"> +// <input type="radio" id="kss-example-7-checked" name="kss-example-7" checked> +// <label for="kss-example-7-checked">Standard checked radio</label> +// </div> +// <div class="mw-ui-radio"> +// <input type="radio" id="kss-example-7-disabled" name="kss-example-7-disabled" disabled> +// <label for="kss-example-7-disabled">Disabled radio</label> +// </div> +// <div class="mw-ui-radio"> +// <input type="radio" id="kss-example-7-disabled-checked" name="kss-example-7-disabled" disabled checked> +// <label for="kss-example-7-disabled-checked">Disabled checked radio</label> +// </div> +// +// Styleguide 7. +.mw-ui-radio { + display: inline-block; + vertical-align: middle; +} + +@radioSize: 2em; + +// We use the not selector to cancel out styling on IE 8 and below +.mw-ui-radio:not(#noop) { + // Position relatively so we can make use of absolute pseudo elements + position: relative; + line-height: @radioSize; + + * { + font: inherit; + vertical-align: middle; + } + + input[type="radio"] { + // we hide the input element as instead we will style the label that follows + // we use opacity so that VoiceOver software can still identify it + opacity: 0; + // ensure the invisible radio takes up the required width + width: @radioSize; + height: @radioSize; + // This is needed for Firefox mobile (See bug 71750 to workaround default Firefox stylesheet) + max-width: none; + margin-right: 0.4em; + + // the pseudo before element of the label after the radio now looks like a radio + & + label::before { + cursor: pointer; + content: ''; + .box-sizing(border-box); + position: absolute; + left: 0; + border-radius: 100%; + width: @radioSize; + height: @radioSize; + background-color: #fff; + border: 1px solid @colorGray7; + } + + // when the input is checked, style the label pseudo before element that followed as a checked radio + &:checked + label::before { + .background-image-svg('images/radio_checked.svg', 'images/radio_checked.png'); + .background-size( @radioSize, @radioSize ); + background-repeat: no-repeat; + background-position: center center; + background-origin: border-box; + } + + &:focus + label::before { + border-width: 2px; + } + + &:focus:hover + label::before, + &:hover + label::before { + border-bottom-width: 3px; + } + + &:active + label::before { + background-color: @colorGray13; + border-color: @colorGray13; + } + + // disabled checked boxes have a gray background + &:disabled + label::before { + cursor: default; + border-color: @colorGray14; + background-color: @colorGray14; + } + + // disabled and checked boxes have a white circle + &:disabled:checked + label::before { + .background-image-svg('images/radio_disabled.svg', 'images/radio_disabled.png'); + } + } +} -- To view, visit https://gerrit.wikimedia.org/r/171229 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: Idb3d5177b6b2e9374de02416447fee9286e10a65 Gerrit-PatchSet: 11 Gerrit-Project: mediawiki/core Gerrit-Branch: master Gerrit-Owner: Prtksxna <[email protected]> Gerrit-Reviewer: Bartosz Dziewoński <[email protected]> Gerrit-Reviewer: Jack Phoenix <[email protected]> Gerrit-Reviewer: Jdlrobson <[email protected]> Gerrit-Reviewer: Mattflaschen <[email protected]> Gerrit-Reviewer: Prtksxna <[email protected]> Gerrit-Reviewer: Violetto <[email protected]> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
