Spinner: use the _classes method.

Fixes #7053

Author: petersendidit

tests/unit/spinner/spinner_common.js

@@ -1,5 +1,12 @@
 TestHelpers.commonWidgetTests( "spinner", {
 	defaults: {
+		classes: {
+			"ui-spinner-input": null,
+			"ui-spinner": "ui-corner-all",
+			"ui-spinner-button": null,
+			"ui-spinner-up": "ui-corner-tr",
+			"ui-spinner-down": "ui-corner-br"
+		},
 		culture: null,
 		disabled: false,
 		icons: {

tests/unit/spinner/spinner_core.js

@@ -4,6 +4,27 @@ var simulateKeyDownUp = TestHelpers.spinner.simulateKeyDownUp;
 
 module( "spinner: core" );
 
+test( "markup structure", function() {
+	expect( 9 );
+	var element = $( "#spin" ).spinner(),
+		spinner = element.spinner( "widget" ),
+		up = spinner.find( ".ui-spinner-up" ),
+		down = spinner.find( ".ui-spinner-down" );
+
+	ok( element.hasClass( "ui-spinner-input" ), "input is .ui-spinner-input" );
+
+	ok( spinner.hasClass( "ui-spinner" ), "main element is .ui-spinner" );
+	ok( spinner.hasClass( "ui-widget" ), "main element is .ui-widget" );
+	ok( spinner.hasClass( "ui-widget-content" ), "main element is .ui-widget-content" );
+	ok( spinner.hasClass( "ui-corner-all" ), "main element is .ui-corner-all" );
+
+	ok( up.hasClass( "ui-spinner-button" ), "up button is .ui-spinner-button" );
+	ok( up.hasClass( "ui-corner-tr" ), "up button is .ui-corner-tr" );
+
+	ok( down.hasClass( "ui-spinner-button" ), "down button is .ui-spinner-button" );
+	ok( down.hasClass( "ui-corner-br" ), "down button is .ui-corner-br" );
+});
+
 test( "keydown UP on input, increases value not greater than max", function() {
 	expect( 5 );
 	var element = $( "#spin" ).val( 70 ).spinner({

ui/spinner.js

@@ -41,6 +41,13 @@ return $.widget( "ui.spinner", {
 	defaultElement: "<input>",
 	widgetEventPrefix: "spin",
 	options: {
+		classes: {
+			"ui-spinner-input": null,
+			"ui-spinner": "ui-corner-all",
+			"ui-spinner-button": null,
+			"ui-spinner-up": "ui-corner-tr",
+			"ui-spinner-down": "ui-corner-br"
+		},
 		culture: null,
 		icons: {
 			down: "ui-icon-triangle-1-s",
@@ -203,7 +210,7 @@ return $.widget( "ui.spinner", {
 
 	_draw: function() {
 		var uiSpinner = this.uiSpinner = this.element
-			.addClass( "ui-spinner-input" )
+			.addClass( this._classes( "ui-spinner-input" ) )
 			.attr( "autocomplete", "off" )
 			.wrap( this._uiSpinnerHtml() )
 			.parent()
@@ -254,15 +261,15 @@ return $.widget( "ui.spinner", {
 	},
 
 	_uiSpinnerHtml: function() {
-		return "<span class='ui-spinner ui-widget ui-widget-content ui-corner-all'></span>";
+		return "<span class='" + this._classes( "ui-spinner" ) + " ui-widget ui-widget-content'></span>";
 	},
 
 	_buttonHtml: function() {
 		return "" +
-			"<a class='ui-spinner-button ui-spinner-up ui-corner-tr'>" +
+			"<a class='" + this._classes( "ui-spinner-button ui-spinner-up" ) + "'>" +
 				"<span class='ui-icon " + this.options.icons.up + "'>&#9650;</span>" +
 			"</a>" +
-			"<a class='ui-spinner-button ui-spinner-down ui-corner-br'>" +
+			"<a class='" + this._classes( "ui-spinner-button ui-spinner-down" ) + "'>" +
 				"<span class='ui-icon " + this.options.icons.down + "'>&#9660;</span>" +
 			"</a>";
 	},
@@ -461,7 +468,7 @@ return $.widget( "ui.spinner", {
 
 	_destroy: function() {
 		this.element
-			.removeClass( "ui-spinner-input" )
+			.removeClass( this._classes( "ui-spinner-input" ) )
 			.prop( "disabled", false )
 			.removeAttr( "autocomplete" )
 			.removeAttr( "role" )