Progressbar: use the _classes method.

Fixes #7053

Author: petersendidit

tests/unit/progressbar/progressbar_common.js

@@ -1,5 +1,12 @@
 TestHelpers.commonWidgetTests( "progressbar", {
 	defaults: {
+		classes: {
+			"ui-progressbar": "ui-corner-all",
+			"ui-progressbar-value": "ui-corner-left",
+			"ui-progressbar-overlay": null,
+			"ui-progressbar-indeterminate": null,
+			"ui-progressbar-complete": "ui-corner-right"
+		},
 		disabled: false,
 		max: 100,
 		value: 0,

tests/unit/progressbar/progressbar_core.js

@@ -1,9 +1,19 @@
 module( "progressbar: core" );
 
 test( "markup structure", function() {
-	expect( 5 );
-	var element = $( "#progressbar" ).progressbar();
+	expect( 12 );
+	var element = $( "#progressbar" ).progressbar(),
+		value = element.children().eq( 0 );
 	ok( element.hasClass( "ui-progressbar" ), "main element is .ui-progressbar" );
+	ok( element.hasClass( "ui-widget" ), "main element is .ui-widget" );
+	ok( element.hasClass( "ui-widget-content" ), "main element is .ui-widget-content" );
+	ok( element.hasClass( "ui-corner-all" ), "main element is .ui-corner-all" );
+	ok( !value.hasClass( "ui-progressbar-complete" ), "value is not .ui-progressbar-complete" );
+	ok( !value.hasClass( "ui-corner-right" ), "value is not .ui-corner-right" );
+	element.progressbar( "option", "value", 100 );
+	ok( value.hasClass( "ui-progressbar-complete" ), "value is .ui-progressbar-complete" );
+	ok( value.hasClass( "ui-corner-right" ), "value is .ui-corner-right" );
+
 	ok( !element.hasClass( "ui-progressbar-indeterminate" ),
 		"main element is not .ui-progressbar-indeterminate" );
 	equal( element.children().length, 1, "main element contains one child" );

ui/progressbar.js

@@ -27,6 +27,13 @@
 return $.widget( "ui.progressbar", {
 	version: "@VERSION",
 	options: {
+		classes: {
+			"ui-progressbar": "ui-corner-all",
+			"ui-progressbar-value": "ui-corner-left",
+			"ui-progressbar-overlay": null,
+			"ui-progressbar-indeterminate": null,
+			"ui-progressbar-complete": "ui-corner-right"
+		},
 		max: 100,
 		value: 0,
 
@@ -41,23 +48,24 @@ return $.widget( "ui.progressbar", {
 		this.oldValue = this.options.value = this._constrainedValue();
 
 		this.element
-			.addClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" )
+			.addClass( this._classes( "ui-progressbar" ) + " ui-widget ui-widget-content" )
 			.attr({
 				// Only set static values, aria-valuenow and aria-valuemax are
 				// set inside _refreshValue()
 				role: "progressbar",
 				"aria-valuemin": this.min
 			});
 
-		this.valueDiv = $( "<div class='ui-progressbar-value ui-widget-header ui-corner-left'></div>" )
+		this.valueDiv = $( "<div>" )
+			.addClass( this._classes( "ui-progressbar-value" ) + " ui-widget-header" )
 			.appendTo( this.element );
 
 		this._refreshValue();
 	},
 
 	_destroy: function() {
 		this.element
-			.removeClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" )
+			.removeClass( this._classes( "ui-progressbar" ) + " ui-widget ui-widget-content" )
 			.removeAttr( "role" )
 			.removeAttr( "aria-valuemin" )
 			.removeAttr( "aria-valuemax" )
@@ -125,15 +133,17 @@ return $.widget( "ui.progressbar", {
 
 		this.valueDiv
 			.toggle( this.indeterminate || value > this.min )
-			.toggleClass( "ui-corner-right", value === this.options.max )
+			.toggleClass( this._classes( "ui-progressbar-complete" ), value === this.options.max )
 			.width( percentage.toFixed(0) + "%" );
 
-		this.element.toggleClass( "ui-progressbar-indeterminate", this.indeterminate );
+		this.element.toggleClass( this._classes( "ui-progressbar-indeterminate" ), this.indeterminate );
 
 		if ( this.indeterminate ) {
 			this.element.removeAttr( "aria-valuenow" );
 			if ( !this.overlayDiv ) {
-				this.overlayDiv = $( "<div class='ui-progressbar-overlay'></div>" ).appendTo( this.valueDiv );
+				this.overlayDiv = $( "<div>" )
+					.addClass( this._classes( "ui-progressbar-overlay" ) )
+					.appendTo( this.valueDiv );
 			}
 		} else {
 			this.element.attr({