Spinner: Introduce icons option to make button icons customizable, mostly for consistency

Author: jzaefferer

tests/unit/spinner/spinner_common.js

@@ -2,6 +2,10 @@ TestHelpers.commonWidgetTests( "spinner", {
 	defaults: {
 		culture: null,
 		disabled: false,
+		icons: {
+			down: "ui-icon-triangle-1-s",
+			up: "ui-icon-triangle-1-n"
+		},
 		incremental: true,
 		max: null,
 		min: null,

tests/unit/spinner/spinner_options.js

@@ -6,6 +6,25 @@ module( "spinner: options" );
 
 // culture is tested after numberFormat, since it depends on numberFormat
 
+test( "icons: default ", function() {
+	expect( 2 );
+	var element = $( "#spin" ).val( 0 ).spinner().spinner( "widget" );
+	equal( element.find( ".ui-icon:first" ).attr( "class" ), "ui-icon ui-icon-triangle-1-n" );
+	equal( element.find( ".ui-icon:last" ).attr( "class" ), "ui-icon ui-icon-triangle-1-s" );
+});
+
+test( "icons: custom ", function() {
+	expect( 2 );
+	var element = $( "#spin" ).val( 0 ).spinner({
+		icons: {
+			down: "custom-down",
+			up: "custom-up"
+		}
+	}).spinner( "widget" );
+	equal( element.find( ".ui-icon:first" ).attr( "class" ), "ui-icon custom-up" );
+	equal( element.find( ".ui-icon:last" ).attr( "class" ), "ui-icon custom-down" );
+});
+
 test( "incremental, false", function() {
 	expect( 100 );
 

ui/jquery.ui.spinner.js

@@ -32,6 +32,10 @@ $.widget( "ui.spinner", {
 	widgetEventPrefix: "spin",
 	options: {
 		culture: null,
+		icons: {
+			down: "ui-icon-triangle-1-s",
+			up: "ui-icon-triangle-1-n"
+		},
 		incremental: true,
 		max: null,
 		min: null,
@@ -244,10 +248,10 @@ $.widget( "ui.spinner", {
 	_buttonHtml: function() {
 		return "" +
 			"<a class='ui-spinner-button ui-spinner-up ui-corner-tr'>" +
-				"<span class='ui-icon ui-icon-triangle-1-n'>&#9650;</span>" +
+				"<span class='ui-icon " + this.options.icons.up + "'>&#9650;</span>" +
 			"</a>" +
 			"<a class='ui-spinner-button ui-spinner-down ui-corner-br'>" +
-				"<span class='ui-icon ui-icon-triangle-1-s'>&#9660;</span>" +
+				"<span class='ui-icon " + this.options.icons.down + "'>&#9660;</span>" +
 			"</a>";
 	},