Button: Switch to placing contents in the flow rather then positioning

Author: arschmitz

demos/button/icons.html

@@ -41,25 +41,24 @@ <h1>Widget</h1>
 <div class="css">
 	<h1>CSS</h1>
 	<button class="ui-button ui-widget ui-corner-all ui-button-icon-only" title="Button with icon only">
-		<span class="ui-icon ui-icon-gear"></span>
-		Button with icon only
+		<span class="ui-icon ui-icon-gear"></span>Button with icon only
 	</button>
 	<button class="ui-button ui-widget ui-corner-all ui-icon-beginning">
-		<span class="ui-icon ui-icon-triangle-1-w"></span>
-		Button with icon on the left
+		Button with no text
+	</button>
+	<button class="ui-button ui-widget ui-corner-all ui-icon-beginning">
+		<span class="ui-icon ui-icon-triangle-1-w"></span>Button with icon on the left
 	</button>
 	<button class="ui-button ui-widget ui-corner-all ui-icon-end">
-		<span class="ui-icon ui-icon-triangle-1-e"></span>
-		Button with icon on the right
+		Button with icon on the right<span class="ui-icon ui-icon-triangle-1-e"></span>
 	</button>
-	<button class="ui-button ui-widget ui-corner-all ui-icon-bottom">
-		<span class="ui-icon ui-icon-triangle-1-s"></span>
-		Button with icon on bottom
+	<button class="ui-button ui-widget ui-corner-all">
+		Button with icon on bottom<span class="ui-icon ui-icon-triangle-1-s ui-icon-display-block"></span>
 	</button>
-	<button class="ui-button ui-widget ui-corner-all ui-icon-top">
-		<span class="ui-icon ui-icon-triangle-1-n"></span>
-		Button with icon on top
+	<button class="ui-button ui-widget ui-corner-all">
+		<span class="ui-icon ui-icon-triangle-1-n ui-icon-display-block"></span>Button with icon on top
 	</button>
+	<button class="ui-button ui-widget ui-corner-all"><span class="ui-icon ui-icon-triangle-1-n ui-icon-display-block"></span><span class="ui-icon ui-icon-triangle-1-w"></span>Button with <span class="ui-icon ui-icon-arrow-4"></span> many icons<span class="ui-icon ui-icon-triangle-1-e"></span><span class="ui-icon ui-icon-triangle-1-s ui-icon-display-block"></span></button>
 
 </div>
 <div class="demo-description">

themes/base/accordion.css

@@ -16,18 +16,6 @@
 	padding: .5em .5em .5em .7em;
 	font-size: 100%;
 }
-.ui-accordion .ui-accordion-icons {
-	padding-left: 2.2em;
-}
-.ui-accordion .ui-accordion-icons .ui-accordion-icons {
-	padding-left: 2.2em;
-}
-.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
-	position: absolute;
-	left: .5em;
-	top: 50%;
-	margin-top: -8px;
-}
 .ui-accordion .ui-accordion-content {
 	padding: 1em 2.2em;
 	border-top: 0;

themes/base/button.css

@@ -9,7 +9,7 @@
  * http://api.jqueryui.com/button/#theming
  */
 .ui-button {
-	padding: .4em 1em;
+	padding: .4em;
 	display: inline-block;
 	position: relative;
 	line-height: normal;
@@ -34,93 +34,24 @@
 
 /* to make room for the icon, a width needs to be set here */
 .ui-button-icon-only {
-	width: 2.2em;
+	width: 2em;
 	box-sizing: border-box;
 	text-indent: -9999px;
 	white-space: nowrap;
 }
 
-.ui-icon {
-	position: absolute;
-	display: block;
-}
-
 /* no icon support for input elements, provide padding by default */
-input.ui-button.ui-icon-end,
-input.ui-button.ui-icon-beginning,
-input.ui-button.ui-icon-top,
-input.ui-button.ui-icon-bottom{
-	padding: .4em 1em;
-}
 input.ui-button.ui-button-icon-only {
 	text-indent: 0;
 }
 
 /* button icon element(s) */
-.ui-button.ui-icon-end .ui-icon {
-	left: auto;
-	right: .5em;
-}
-
-.ui-button.ui-icon-top .ui-icon,
-.ui-button.ui-icon-bottom .ui-icon {
-	left: 50%;
-	margin-left: -11px;
-}
-
-.ui-button.ui-icon-top .ui-icon {
-	top: .6em;
-}
-
-.ui-button.ui-icon-bottom .ui-icon {
-	top: auto;
-	bottom: .05em;
-
-}
-
 .ui-button-icon-only .ui-icon {
-	left: 50%;
-	margin-left: -8px;
-}
-
-.ui-button .ui-icon {
 	position: absolute;
-	display: block;
 	top: 50%;
+	left: 50%;
 	margin-top: -8px;
-}
-
-.ui-button.ui-icon-beginning {
-	padding-left: 2.4em;
-}
-
-.ui-button.ui-icon-end {
-	padding: .4em 2.1em .4em 1em;
-}
-
-.ui-button.ui-icon-top {
-	padding: 1.1em 1em .4em 1em;
-}
-
-.ui-button.ui-icon-bottom {
-	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;
+	margin-left: -8px;
 }
 
 /* workarounds */

themes/base/core.css

@@ -68,17 +68,18 @@
 
 /* Icons
 ----------------------------------*/
-
 .ui-icon {
-	display: block;
-	text-indent: -99999px;
-	overflow: hidden;
-	background-repeat: no-repeat;
-	left: .5em;
-	top: .3em;
+	display: inline-block;
+	vertical-align: middle;
+	margin-top: -.25em;
+	position: relative;
 }
 
-
+.ui-icon-display-block {
+	left: 50%;
+	margin-left: -8px;
+	display: block;
+}
 
 /* Misc visuals
 ----------------------------------*/

themes/base/datepicker.css

@@ -173,3 +173,14 @@
 	border-right-width: 0;
 	border-left-width: 1px;
 }
+
+/* Icons */
+.ui-datepicker .ui-icon {
+	display: block;
+	text-indent: -99999px;
+	overflow: hidden;
+	background-repeat: no-repeat;
+	left: .5em;
+	top: .3em;
+}
+

ui/button.js

@@ -127,20 +127,28 @@ $.widget( "ui.button", {
 	},
 
 	_updateIcon: function( icon ) {
+		var placementMethod =
+				( this.options.iconPosition === "top" ||
+				this.options.iconPosition === "beginning" ) ?
+				"prependTo" :
+				"appendTo",
+			displayBlock =
+				( this.options.iconPosition === "top" ||
+				this.options.iconPosition === "bottom" );
 		if ( !this.icon ) {
 			this.icon = $( "<span>" );
 			this._addClass( this.icon, "ui-button-icon", " ui-icon" );
 
 			if ( !this.options.showLabel ) {
 				this._addClass( "ui-button-icon-only" );
-			} else {
-				this._addClass( null, "ui-icon-" + this.options.iconPosition );
+			} else if ( displayBlock ) {
+				this._addClass( this.icon, null, "ui-icon-display-block" );
 			}
 		} else {
 			this._removeClass( this.icon, null, this.options.icon );
 		}
 		this._addClass( this.icon, null, icon );
-		this.icon.appendTo( this.element );
+		this.icon[ placementMethod ]( this.element );
 		return this;
 	},