From 1f769a67c5e16f42b3848dd28c93853cea3bc520 Mon Sep 17 00:00:00 2001
From: Prateek Saxena <prtksxna@gmail.com>
Date: Wed, 5 Nov 2014 16:03:57 +0530
Subject: [PATCH] mediawiki.ui: Add radio buttons

Design specification on Trello-
https://trello.com/c/df2N2KJx/8-radio-buttons

Change-Id: Idb3d5177b6b2e9374de02416447fee9286e10a65
---
 docs/kss/Makefile                             |   2 +-
 resources/Resources.php                       |   9 ++
 .../components/images/radio_checked.png       | Bin 0 -> 376 bytes
 .../components/images/radio_checked.svg       |   7 ++
 .../components/images/radio_disabled.png      | Bin 0 -> 286 bytes
 .../components/images/radio_disabled.svg      |   7 ++
 .../src/mediawiki.ui/components/radio.less    | 109 ++++++++++++++++++
 7 files changed, 133 insertions(+), 1 deletion(-)
 create mode 100644 resources/src/mediawiki.ui/components/images/radio_checked.png
 create mode 100644 resources/src/mediawiki.ui/components/images/radio_checked.svg
 create mode 100644 resources/src/mediawiki.ui/components/images/radio_disabled.png
 create mode 100644 resources/src/mediawiki.ui/components/images/radio_disabled.svg
 create mode 100644 resources/src/mediawiki.ui/components/radio.less

diff --git a/docs/kss/Makefile b/docs/kss/Makefile
index a28bf3e554..31feec1a1c 100644
--- 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.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 c39ba3bf41..88965d096c 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1524,6 +1524,15 @@ return array(
 		'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 0000000000000000000000000000000000000000..1361ba65b4fbceda9bd924aede6c8013fe461aac
GIT binary patch
literal 376
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjEX7WqAsj$Z!;#Vf<Z~8yL>2?p
zUk71ECym(^Ktah8*NBqf{Irtt#G+J&^73-M%)IR4<ivthz5Jr|+3#$mfQr6)x;Tb-
zbiSRu*N-Vs!0mj_k7%i-+m<vnIcz__q3yy<2Tj%s0T(X36aK*R$HhB(-l2?!85ybC
zo%<NpWPb~Cc&YcD>FK<bRWpB{GhycBe6HlKK5q|?=5M)$ydwPB^F1sc?lxF@nbS}F
zjJx?C*5U<Xh8qto@=M-fCVpm*O!zlrC)IBp5fit{-r4s*{&H80_LFL<hYX>Aa?Mvs
z>ISS@Dp;qGGmCq{68#CEG@H5wlqc}N6?u3!X2Bu$+{U2(XH7A6J&$~q>s&X?oxy!)
zpTE^xrqeS%u!?QJQ@Q^cQ^T(Z-3gBuykK14uwTE@F=YDuZ1s2D!a{n7`Q&a}J&E5K
RGz%C244$rjF6*2UngEW0m9YQ-

literal 0
HcmV?d00001

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 0000000000..8a57732e61
--- /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 0000000000000000000000000000000000000000..5a1959ffdd174950c7aac78545a172194ba76473
GIT binary patch
literal 286
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjEX7WqAsj$Z!;#Vf<Z~8yL>2?p
zUk71ECym(^Ktah8*NBqf{Irtt#G+J&^73-M%)IR4<ivthz5Jr|+3#$mfQn{&x;Tb-
zbiSQp$aTm-#G#&R8|y*l7mTHo<vjhB#YEX{+q(Jg#<i<mIN0`Q{oPLw{5jvJdMHgg
zd4?~5$$9~6T-~_?ViA9|?lXih+sTl<dJo$>!O910A=4ZtEAYS3Z448%@U4td`5-tk
z^-<-$b33nYZ&eCRP!p@rvf=lBuz*8Gw3@xatI*fG^nm-b>WsxFeyo1+=g;%iCsHQ8
aVBB}u<<n2@Bj!M7GI+ZBxvX<aXaWGkerKxy

literal 0
HcmV?d00001

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 0000000000..e062895b45
--- /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 0000000000..6d8978e3e6
--- /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');
+		}
+	}
+}
-- 
2.20.1