From f092d08358c859b47667e785de451fd83adea1d9 Mon Sep 17 00:00:00 2001
From: Tobias Beer <beertobias@gmail.com>
Date: Sun, 8 Apr 2018 10:52:41 +0200
Subject: [PATCH] sets checked class for radio widget wrapper / label (#2182)

* sets checked ckass for radio widget wrapper

* added tc-radio as standard class for radio widgets

* removed selectedClass again, as suggested

@pmario ;-)
---
 core/modules/widgets/radio.js                     | 11 +++++------
 editions/tw5.com/tiddlers/widgets/RadioWidget.tid |  5 ++---
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/core/modules/widgets/radio.js b/core/modules/widgets/radio.js
index daa06ae11..90eca6bfd 100644
--- a/core/modules/widgets/radio.js
+++ b/core/modules/widgets/radio.js
@@ -33,12 +33,15 @@ RadioWidget.prototype.render = function(parent,nextSibling) {
 	this.computeAttributes();
 	// Execute our logic
 	this.execute();
+	var isChecked = this.getValue() === this.radioValue;
 	// Create our elements
 	this.labelDomNode = this.document.createElement("label");
-	this.labelDomNode.setAttribute("class",this.radioClass);
+	this.labelDomNode.setAttribute("class",
+   		"tc-radio " + this.radioClass + (isChecked ? " tc-radio-selected" : "")
+  	);
 	this.inputDomNode = this.document.createElement("input");
 	this.inputDomNode.setAttribute("type","radio");
-	if(this.getValue() == this.radioValue) {
+	if(isChecked) {
 		this.inputDomNode.setAttribute("checked","true");
 	}
 	this.labelDomNode.appendChild(this.inputDomNode);
@@ -92,10 +95,6 @@ RadioWidget.prototype.execute = function() {
 	this.radioIndex = this.getAttribute("index");
 	this.radioValue = this.getAttribute("value");
 	this.radioClass = this.getAttribute("class","");
-	if(this.radioClass !== "") {
-		this.radioClass += " ";
-	}
-	this.radioClass += "tc-radio";
 	// Make the child widgets
 	this.makeChildWidgets();
 };
diff --git a/editions/tw5.com/tiddlers/widgets/RadioWidget.tid b/editions/tw5.com/tiddlers/widgets/RadioWidget.tid
index 21b1ca575..347a37e72 100644
--- a/editions/tw5.com/tiddlers/widgets/RadioWidget.tid
+++ b/editions/tw5.com/tiddlers/widgets/RadioWidget.tid
@@ -1,6 +1,6 @@
 caption: radio
 created: 20131212195353929
-modified: 20161217112444671
+modified: 20170115095809695
 tags: Widgets
 title: RadioWidget
 type: text/vnd.tiddlywiki
@@ -18,7 +18,7 @@ The content of the `<$radio>` widget is displayed within an HTML `<label>` eleme
 |field |The field of the //tiddler// bound to the radio button|
 |index|<<.from-version "5.1.14">> The index of the //tiddler// being [[DataTiddler|DataTiddlers]] bound to the radio button<<.tip "takes precedence over //field//">>|
 |value |The value for the //field// or //index// of the //tiddler//|
-|class |CSS classes to be assigned to the label around the radio button |
+|class |The CSS classes assigned to the label around the radio button<$macrocall $name=".tip" _="""<<.from-version "5.1.14">> `tc-radio` is always applied by default, as well as `tc-radio-selected` when selected"""/>|
 
 !! Field Mode
 
@@ -27,7 +27,6 @@ This example uses the radio widget to change the `modifier` field of this tiddle
 <<wikitext-example-without-html """<$radio field="modifier" value="JoeBloggs"> Joe Bloggs</$radio>
 <$radio field="modifier" value="JaneBloggs"> Jane Bloggs</$radio>""">>
 
-
 !! Index Mode
 
 Using the radio widget in index mode requires the //index// attribute to specify the name of the index of a [[DataTiddler|DataTiddlers]] to which the specified //value// is assigned.