Merge pull request #1723 from cormacmccarthy/GH1716---handlebars-form…

…-element-templates-should-contain-form-group-wrappersfuelux

Input elements should support validation and feedback

templates/handlebars/bootstrap/button.hbs

@@ -1,4 +1,4 @@
-<div class="form-group">
+<div class="form-group{{#if validation}} has-{{validation}}{{/if}}">
 	<label class="control-label{{#if horizontal}} col-sm-2{{/if}}" for="{{#if id}}{{id}}{{else}}myButton{{/if}}">{{#if label}}{{label}}{{/if}}</label>
 	<div class="{{#if buttonalign}}{{buttonalign}}{{/if}}{{#if horizontal}} col-sm-10{{/if}}">
 		<{{#if isinput}}input{{else}}{{#if islink}}a{{else}}button{{/if}}{{/if}} {{#unless islink}}type="{{#if type}}{{type}}{{else}}button{{/if}}"{{else}}role="button"{{/unless}} id="{{#if id}}{{id}}{{else}}myButton{{/if}}" name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}myButton{{/if}}{{/if}}" class='btn{{#if buttonstyle}} {{buttonstyle}}{{else}} btn-default{{/if}}{{#if inputsize}} {{inputsize}}{{/if}}'{{#if disabled}} disabled{{/if}} aria-label="{{#if label}}{{label}}{{/if}}" {{#if isinput}}value="{{text}}"{{/if}}>{{#unless isinput}}{{text}}{{/unless}}</{{#if isinput}}input{{else}}{{#if islink}}a{{else}}button{{/if}}{{/if}}>

templates/handlebars/bootstrap/input.hbs

@@ -1,4 +1,4 @@
-<div class="form-group{{#if horizontal}}{{#if inputsize}} form-group-{{inputsize}}{{/if}}{{/if}}">
+<div class="form-group{{#if horizontal}}{{#if inputsize}} form-group-{{inputsize}}{{/if}}{{/if}}{{#if validation}} has-{{validation}}{{#if feedback}} has-feedback{{/if}}{{/if}}">
 	{{#if label}}<label for="{{#if id}}{{id}}{{else}}myInput{{/if}}" class="control-label{{#if horizontal}} col-sm-2{{/if}}">{{label}}</label>{{/if}}
 	{{#if horizontal}}<div class="col-sm-10">{{/if}}
 		{{#if hasAside}}<div class="input-group">{{/if}}
@@ -13,7 +13,7 @@
 					{{#if separator}}<li role="separator" class="divider"></li>{{else}}<li><a href="#">{{value}}</a></li>{{/if}}{{/each}}
 				</ul>
 			</div>{{/with}}
-			<input type="{{#if type}}{{type}}{{else}}text{{/if}}" class="{{#unless horizontal}}{{#if inputsize}}input-{{inputsize}} {{/if}}{{/unless}}form-control" id="{{#if id}}{{id}}{{else}}myInput{{/if}}" name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}myInput{{/if}}{{/if}}"{{#if placeholder}} placeholder="{{placeholder}}"{{/if}}{{#if required}} required{{/if}}{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}>
+			<input type="{{#if type}}{{type}}{{else}}text{{/if}}" class="{{#unless horizontal}}{{#if inputsize}}input-{{inputsize}} {{/if}}{{/unless}}form-control" id="{{#if id}}{{id}}{{else}}myInput{{/if}}" name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}myInput{{/if}}{{/if}}"{{#if placeholder}} placeholder="{{placeholder}}"{{/if}}{{#if required}} required{{/if}}{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}{{#if validation}}{{#if feedback}}aria-describedby="{{#if id}}{{id}}{{else}}myInput{{/if}}Status"{{/if}}{{/if}}>
 			{{#with appendButtonDropdown}}
 			<div class="input-group-btn">
 				<button type="button" class="btn dropdown-toggle{{#if ../inputsize}} btn-{{../inputsize}}{{/if}}{{#if style}} {{style}}{{/if}}" data-toggle="dropdown"{{#if ../label}} aria-label="{{../label}} related options"{{/if}} aria-haspopup="true" aria-expanded="false"{{#if required}} required{{/if}}{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}>{{text}}&nbsp;<span class="caret"></span></button>
@@ -26,6 +26,7 @@
 			</label>{{/with}}
 			{{#if appendText}}<span id="{{#if id}}{{id}}{{else}}myInput{{/if}}Prepend" class="input-group-addon{{#if horizontal}}{{#if inputsize}} input-{{inputsize}}{{/if}}{{/if}}">{{appendText}}</span>{{/if}}
 		{{#if hasAside}}</div>{{/if}}
+		{{#if feedback}}<span class="glyphicon glyphicon-{{feedback}} form-control-feedback" aria-hidden="true"></span><span id="{{#if id}}{{id}}{{else}}myInput{{/if}}Status" class="sr-only">({{#if validation}}{{validation}}{{/if}})</span>{{/if}}
 		{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
 	{{#if horizontal}}</div>{{/if}}
 </div>

templates/handlebars/bootstrap/textarea.hbs

@@ -1,4 +1,4 @@
-<div class="form-group">
+<div class="form-group{{#if validation}} has-{{validation}}{{/if}}">
 	<label class="control-label{{#if horizontal}} col-sm-2{{/if}}" for="{{#if id}}{{id}}{{else}}myTextarea{{/if}}">{{#if label}}{{label}}{{/if}}</label>
 	{{#if horizontal}}<div class="col-sm-10">{{/if}}
 		<textarea class="form-control" id="{{#if id}}{{id}}{{else}}myTextarea{{/if}}" name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}myTextarea{{/if}}{{/if}}" rows="{{#if rows}}{{rows}}{{/if}}"{{#if required}} required{{/if}}{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}>{{#if text}}{{text}}{{/if}}</textarea>

templates/handlebars/fuelux/checkbox.hbs

@@ -1,4 +1,4 @@
-<div class="form-group">
+<div class="form-group{{#if validation}} has-{{validation}}{{/if}}">
 	<label for="{{#if id}}{{id}}{{else}}myCustomCheckboxWrapper{{/if}}" class="control-label{{#if horizontal}} col-sm-2{{/if}}">{{#if label}}{{label}}{{/if}}</label>
 
 	<div class="{{#if inline}}checkbox{{/if}}{{#if horizontal}} col-sm-10{{/if}}"{{#if required}} required{{/if}}>

templates/handlebars/fuelux/combobox.hbs

@@ -1,9 +1,9 @@
-<div class="form-group{{#if horizontal}}{{#if inputsize}} form-group-{{inputsize}}{{/if}}{{/if}}">
+<div class="form-group{{#if horizontal}}{{#if inputsize}} form-group-{{inputsize}}{{/if}}{{/if}}{{#if validation}} has-{{validation}}{{#if feedback}} has-feedback{{/if}}{{/if}}">
 	<label for="{{#if id}}{{id}}{{else}}myCombobox{{/if}}Input" class="control-label{{#if horizontal}} col-sm-2{{/if}}">{{#if label}}{{label}}{{/if}}</label>
 
 	{{#if horizontal}}<div class="col-sm-10">{{/if}}
-	<div class="input-group dropdown combobox{{#if prependCombobox}} input-append{{else}} input-prepend{{/if}}{{#if inputsize}} input-group-{{inputsize}}{{/if}}" {{#unless doNotInit}}data-initialize="combobox"{{/unless}} id="{{#if id}}{{id}}{{else}}myCombobox{{/if}}">
-		{{#unless prependCombobox}}<input type="{{#if type}}{{type}}{{else}}text{{/if}}" class="{{#unless horizontal}}{{#if inputsize}}input-{{inputsize}} {{/if}}{{/unless}}form-control" id="{{#if id}}{{id}}{{else}}myCombobox{{/if}}Input" name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}myCombobox{{/if}}{{/if}}"{{#if placeholder}} placeholder="{{placeholder}}"{{/if}}{{#if required}} required{{/if}}{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}>{{/unless}}
+	<div class="input-group dropdown combobox{{#if prependCombobox}} input-append{{else}} input-prepend{{/if}}{{#if inputsize}} input-group-{{inputsize}}{{/if}}{{#if cols}} col-sm-{{cols}}{{/if}}" {{#unless doNotInit}}data-initialize="combobox"{{/unless}} id="{{#if id}}{{id}}{{else}}myCombobox{{/if}}">
+		{{#unless prependCombobox}}<input type="{{#if type}}{{type}}{{else}}text{{/if}}" class="{{#unless horizontal}}{{#if inputsize}}input-{{inputsize}} {{/if}}{{/unless}}form-control" id="{{#if id}}{{id}}{{else}}myCombobox{{/if}}Input" name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}myCombobox{{/if}}{{/if}}"{{#if placeholder}} placeholder="{{placeholder}}"{{/if}}{{#if required}} required{{/if}}{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}{{#if validation}}{{#if feedback}}aria-describedby="{{#if id}}{{id}}{{else}}myCombobox{{/if}}Status"{{/if}}{{/if}}>{{/unless}}
 		<div class="input-group-btn">
 			<button type="button" class="btn {{#if buttonstyle}}{{buttonstyle}}{{else}}btn-default{{/if}} dropdown-toggle{{#if inputsize}} btn-{{inputsize}}{{/if}}" data-toggle="dropdown"><span class="caret"></span></button>
 			<ul class="dropdown-menu{{#unless prependCombobox}} dropdown-menu-right{{/unless}}" role="menu">
@@ -12,8 +12,9 @@
 				{{/each}}
 			</ul>
 		</div>
-		{{#if prependCombobox}}<input type="{{#if type}}{{type}}{{else}}text{{/if}}" class="{{#unless horizontal}}{{#if inputsize}}input-{{inputsize}} {{/if}}{{/unless}}form-control" id="{{#if id}}{{id}}{{else}}myCombobox{{/if}}" name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}myCombobox{{/if}}{{/if}}"{{#if placeholder}} placeholder="{{placeholder}}"{{/if}}{{#if required}} required{{/if}}{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}>{{/if}}
+		{{#if prependCombobox}}<input type="{{#if type}}{{type}}{{else}}text{{/if}}" class="{{#unless horizontal}}{{#if inputsize}}input-{{inputsize}} {{/if}}{{/unless}}form-control" id="{{#if id}}{{id}}{{else}}myCombobox{{/if}}" name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}myCombobox{{/if}}{{/if}}"{{#if placeholder}} placeholder="{{placeholder}}"{{/if}}{{#if required}} required{{/if}}{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}{{#if validation}}{{#if feedback}}aria-describedby="{{#if id}}{{id}}{{else}}myCombobox{{/if}}Status"{{/if}}{{/if}}>{{/if}}
 	</div>
+	{{#if feedback}}<span class="glyphicon glyphicon-{{feedback}} form-control-feedback" aria-hidden="true"></span><span id="{{#if id}}{{id}}{{else}}myCombobox{{/if}}Status" class="sr-only">({{#if validation}}{{validation}}{{/if}})</span>{{/if}}
 	{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
 	{{#if horizontal}}</div>{{/if}}
 </div>

templates/handlebars/fuelux/radio.hbs

@@ -1,4 +1,4 @@
-<div class="form-group">
+<div class="form-group{{#if validation}} has-{{validation}}{{/if}}">
 	<label for="{{#if id}}{{id}}{{else}}myCustomRadioWrapper{{/if}}" class="control-label{{#if horizontal}} col-sm-2{{/if}}">{{#if label}}{{label}}{{/if}}</label>
 
 	<div class="{{#if inline}}radio{{/if}}{{#if horizontal}} col-sm-10{{/if}}"{{#if required}} required{{/if}}>

templates/handlebars/fuelux/search.hbs

@@ -1,17 +1,18 @@
-<div class="form-group{{#if horizontal}}{{#if inputsize}} form-group-{{inputsize}}{{/if}}{{/if}}">
+<div class="form-group{{#if horizontal}}{{#if inputsize}} form-group-{{inputsize}}{{/if}}{{/if}}{{#if validation}} has-{{validation}}{{#if feedback}} has-feedback{{/if}}{{/if}}">
 	<label for="{{#if id}}{{id}}{{else}}mySearch{{/if}}Input" class="control-label{{#if horizontal}} col-sm-2{{/if}}">{{#if label}}{{label}}{{/if}}</label>
 
 	{{#if horizontal}}<div class="col-sm-10">{{/if}}
 	<div class="search input-group{{#if inputsize}} input-group-{{inputsize}}{{/if}}" {{#unless doNotInit}}data-initialize="search"{{/unless}} role="search" id="{{#if id}}{{id}}{{else}}mySearch{{/if}}">
-		{{#unless prependSearch}}<input type="search" class="{{#unless horizontal}}{{#if inputsize}}input-{{inputsize}} {{/if}}{{/unless}}form-control" id="{{#if id}}{{id}}{{else}}mySearch{{/if}}Input" name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}mySearch{{/if}}{{/if}}Input"{{#if placeholder}} placeholder="{{placeholder}}"{{/if}}{{#if required}} required{{/if}}{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}>{{/unless}}
+		{{#unless prependSearch}}<input type="search" class="{{#unless horizontal}}{{#if inputsize}}input-{{inputsize}} {{/if}}{{/unless}}form-control" id="{{#if id}}{{id}}{{else}}mySearch{{/if}}Input" name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}mySearch{{/if}}{{/if}}Input"{{#if placeholder}} placeholder="{{placeholder}}"{{/if}}{{#if required}} required{{/if}}{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}{{#if validation}}{{#if feedback}}aria-describedby="{{#if id}}{{id}}{{else}}mySearch{{/if}}Status"{{/if}}{{/if}}>{{/unless}}
 		<span class="input-group-btn">
 			<button class="btn btn-default{{#if inputsize}} btn-{{inputsize}}{{/if}}" type="button"{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}>
 				<span class="glyphicon glyphicon-search"></span>
 				<span class="sr-only">Search</span>
 			</button>
 		</span>
-		{{#if prependSearch}}<input type="search" class="{{#unless horizontal}}{{#if inputsize}}input-{{inputsize}} {{/if}}{{/unless}}form-control" id="{{#if id}}{{id}}{{else}}mySearch{{/if}}Input" name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}mySearch{{/if}}{{/if}}Input"{{#if placeholder}} placeholder="{{placeholder}}"{{/if}}{{#if required}} required{{/if}}{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}>{{/if}}
+		{{#if prependSearch}}<input type="search" class="{{#unless horizontal}}{{#if inputsize}}input-{{inputsize}} {{/if}}{{/unless}}form-control" id="{{#if id}}{{id}}{{else}}mySearch{{/if}}Input" name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}mySearch{{/if}}{{/if}}Input"{{#if placeholder}} placeholder="{{placeholder}}"{{/if}}{{#if required}} required{{/if}}{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}{{#if validation}}{{#if feedback}}aria-describedby="{{#if id}}{{id}}{{else}}mySearch{{/if}}Status"{{/if}}{{/if}}>{{/if}}
 	</div>
 	{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
+	{{#if feedback}}<span class="glyphicon glyphicon-{{feedback}} form-control-feedback" aria-hidden="true"></span><span id="{{#if id}}{{id}}{{else}}mySearch{{/if}}Status" class="sr-only">({{#if validation}}{{validation}}{{/if}})</span>{{/if}}
 	{{#if horizontal}}</div>{{/if}}
 </div>

templates/handlebars/fuelux/selectlist.hbs

@@ -1,4 +1,4 @@
-<div class="form-group">
+<div class="form-group{{#if validation}} has-{{validation}}{{/if}}">
 	<label class="control-label{{#if horizontal}} col-sm-2{{/if}}" for="{{#if id}}{{id}}{{else}}mySelectlist{{/if}}">{{#if label}}{{label}}{{/if}}</label>
 	<div class="controls text-{{#if buttonalign}}{{buttonalign}}{{else}}left{{/if}}{{#if horizontal}} col-sm-10{{/if}}">
 		<div class="btn-group selectlist"{{#unless doNotInit}} data-initialize="selectlist"{{/unless}} data-resize="auto" id="{{#if id}}{{id}}{{else}}mySelectlist{{/if}}">

templates/handlebars/fuelux/spinbox.hbs

@@ -1,8 +1,8 @@
-<div class="form-group">
+<div class="form-group{{#if validation}} has-{{validation}}{{#if feedback}} has-feedback{{/if}}{{/if}}">
 	<label class="control-label{{#if horizontal}} col-sm-2{{/if}}" for="{{#if id}}{{id}}{{else}}mySpinbox{{/if}}Input">{{#if label}}{{label}}{{/if}}</label>
 	<div{{#if horizontal}} class="col-sm-10"{{/if}}>
 		<div class="spinbox" {{#unless doNotInit}}data-initialize="spinbox"{{/unless}} id="{{#if id}}{{id}}{{else}}mySpinbox{{/if}}">
-			<input id="{{#if id}}{{id}}Input{{else}}mySpinboxInput{{/if}}" name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}mySpinbox{{/if}}{{/if}}" {{#if default}}value="{{default}}"{{/if}} type="text" class="form-control input-mini spinbox-input"{{#if required}} required{{/if}}{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}>
+			<input id="{{#if id}}{{id}}Input{{else}}mySpinboxInput{{/if}}" name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}mySpinbox{{/if}}{{/if}}" {{#if default}}value="{{default}}"{{/if}} type="text" class="form-control input-mini spinbox-input"{{#if required}} required{{/if}}{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}{{#if validation}}{{#if feedback}}aria-describedby="{{#if id}}{{id}}{{else}}mySpinbox{{/if}}Status"{{/if}}{{/if}}>
 			<div class="spinbox-buttons btn-group btn-group-vertical">
 				<button type="button" class="btn btn-default spinbox-up btn-xs"{{#if disabled}} disabled{{/if}}>
 					<span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
@@ -11,6 +11,7 @@
 					<span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
 				</button>
 			</div>
+			{{#if feedback}}<span class="glyphicon glyphicon-{{feedback}} form-control-feedback" aria-hidden="true"></span><span id="{{#if id}}{{id}}{{else}}mySpinbox{{/if}}Status" class="sr-only">({{#if validation}}{{validation}}{{/if}})</span>{{/if}}
 		</div>
 		{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
 	</div>