Button: Adding classes option

Author: arschmitz

tests/unit/button/button_common.js

@@ -5,6 +5,11 @@ TestHelpers.commonWidgetTests( "button", {
 		label: null,
 		icon: null,
 		iconPosition: "beginning",
+		classes: {
+			"ui-button": "ui-corner-all",
+			"ui-button-icon-only": "",
+			"ui-button-icon": ""
+		},
 
 		// Callbacks
 		create: null

tests/unit/button/button_options.js

@@ -43,7 +43,8 @@ test( "showLabel false without icon", function() {
 	$( "#button" ).button({
 		showLabel: false
 	});
-	strictEqual( $( "#button" ).attr( "class" ), "ui-button ui-widget ui-corner-all" );
+	strictEqual( $( "#button" ).is( ":ui-button.ui-corner-all.ui-widget" ), true,
+		"Button has correct classes" );
 
 	$( "#button" ).button( "destroy" );
 });
@@ -54,8 +55,8 @@ test("showLabel false with icon", function() {
 		showLabel: false,
 		icon: "iconclass"
 	});
-	strictEqual( $( "#button" ).attr( "class" ), "ui-button ui-widget ui-corner-all ui-icon-beginning ui-button-icon-only" );
-
+	strictEqual( $( "#button" ).is( ".ui-button.ui-corner-all.ui-widget.ui-button-icon-only" ),
+		true, "Button has correct classes" );
 	$( "#button" ).button( "destroy" );
 });
 

themes/base/button.css

@@ -103,36 +103,6 @@ input.ui-button.ui-button-icon-only {
 	padding: .4em 1em 1.1em 1em;
 }
 
-.ui-button.ui-icon-notext .ui-icon {
-	padding: 0;
-	width: 2.1em;
-	height: 2.1em;
-	text-indent: -9999px;
-	white-space: nowrap;
-
-}
-
-input.ui-button.ui-icon-notext .ui-icon {
-	width: auto;
-	height: auto;
-	text-indent: 0;
-	white-space: normal;
-	padding: .4em 1em;
-}
-/* button sets */
-.ui-buttonset {
-	margin-right: 7px;
-}
-
-.ui-button.ui-icon-top {
-	padding: 1.1em 1em .4em 1em;
-}
-
-.ui-button.ui-icon-bottom {
-	padding: .4em 1em 1.1em 1em;
-}
-
->>>>>>> 06cac52... Button: fix css errors
 /* workarounds */
 /* reset extra padding in Firefox, see h5bp.com/l */
 input.ui-button::-moz-focus-inner,

ui/button.js

@@ -42,7 +42,12 @@ $.widget( "ui.button", {
 		showLabel: true,
 		label: null,
 		icon: null,
-		iconPosition: "beginning"
+		iconPosition: "beginning",
+		classes: {
+			"ui-button": "ui-corner-all",
+			"ui-button-icon-only": "",
+			"ui-button-icon": ""
+		}
 	},
 
 	_getCreateOptions: function() {
@@ -118,11 +123,11 @@ $.widget( "ui.button", {
 
 	_updateIcon: function( icon ) {
 		if ( !this.icon ) {
-			this.icon = $( "<span>" ).addClass( "ui-icon" );
+			this.icon = $( "<span>" ).addClass( this._classes( "ui-button-icon" ) + " ui-icon" );
 			this.element.addClass(  "ui-icon-" + this.options.iconPosition );
 
 			if ( !this.options.showLabel ){
-				this.element.addClass( "ui-button-icon-only" );
+				this.element.addClass( this._classes( "ui-button-icon-only" ) );
 			}
 		} else {
 			this.icon.removeClass( this.options.icon );
@@ -134,7 +139,7 @@ $.widget( "ui.button", {
 
 	_destroy: function() {
 		this.element
-			.removeClass( baseClasses + " ui-state-active " + typeClasses )
+			.removeClass( this._classes( "ui-button ui-button-icon-only" ) + " " + baseClasses + " ui-state-active " + typeClasses )
 			.removeAttr( "role" );
 
 		if ( this.icon ) {
@@ -151,14 +156,14 @@ $.widget( "ui.button", {
 				this._updateIcon( value );
 			} else {
 				this.icon.remove();
-				this.element.removeClass( "ui-icon-" + this.options.iconPosition );
+				this.element.removeClass( this._classes( "ui-button-icon" ) + " ui-icon-" + this.options.iconPosition );
 			}
 		}
 
 		// Make sure we cant end up with a button that has no text nor icon
 		if ( key === "showLabel" ) {
 			if ( ( !value && !this.options.icon ) || value ) {
-				this.element.toggleClass( "ui-button-icon-only", !value )
+				this.element.toggleClass( this._classes( "ui-button-icon-only" ), !value )
 					.toggleClass( this.options.iconPosition, !!value );
 				this._updateTooltip();
 			} else {