[1.13] Dialog: Add icons option to support titlebar icons

tests/unit/dialog/common.js

@@ -18,6 +18,9 @@ common.testWidget( "dialog", {
 		draggable: true,
 		height: "auto",
 		hide: null,
+		icons: {
+			title: null
+		},
 		maxHeight: null,
 		maxWidth: null,
 		minHeight: 150,

tests/unit/dialog/options.js

@@ -269,6 +269,30 @@ QUnit.test( "height", function( assert ) {
 	element.remove();
 } );
 
+QUnit.test( "icons", function( assert ) {
+	assert.expect( 5 );
+
+	var element = $( "<div></div>" ).dialog( {
+		icons: {
+			title: "ui-icon-disk"
+		}
+	} );
+	var titleBar = element.dialog( "widget" ).find( ".ui-dialog-titlebar" );
+
+	var icon = titleBar.find( ".ui-dialog-title-icon" );
+	assert.equal( 1, icon.length, "title icon exists after init" );
+	assert.hasClasses( icon, "ui-icon-disk", "correct icon after init" );
+
+	element.dialog( "option", "icons.title", null );
+	icon = titleBar.find( ".ui-dialog-title-icon" );
+	assert.equal( 0, icon.length, "title icon removed when null" );
+
+	element.dialog( "option", "icons.title", "ui-icon-gear" );
+	icon = titleBar.find( ".ui-dialog-title-icon" );
+	assert.equal( 1, icon.length, "title icon exists after update" );
+	assert.hasClasses( icon, "ui-icon-gear", "correct icon after update" );
+} );
+
 QUnit.test( "maxHeight", function( assert ) {
 	assert.expect( 3 );
 

themes/base/dialog.css

@@ -16,17 +16,26 @@
 	outline: 0;
 }
 .ui-dialog .ui-dialog-titlebar {
-	padding: .4em 1em;
+	padding: .4em 2em .4em 1em;
 	position: relative;
 }
 .ui-dialog .ui-dialog-title {
 	float: left;
 	margin: .1em 0;
 	white-space: nowrap;
-	width: 90%;
+	width: 100%;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
+.ui-dialog .ui-dialog-title-icon {
+	position: absolute;
+	left: 0.3em;
+	top: 50%;
+	margin-top: -10px;
+}
+.ui-dialog-title-icon + .ui-dialog-title {
+	padding-left: 10px;
+}
 .ui-dialog .ui-dialog-titlebar-close {
 	position: absolute;
 	right: .3em;

ui/widgets/dialog.js

@@ -43,7 +43,7 @@
 	}
 }( function( $ ) {
 
-$.widget( "ui.dialog", {
+return $.widget( "ui.dialog", {
 	version: "@VERSION",
 	options: {
 		appendTo: "body",
@@ -58,6 +58,9 @@ $.widget( "ui.dialog", {
 		draggable: true,
 		hide: null,
 		height: "auto",
+		icons: {
+			title: null
+		},
 		maxHeight: null,
 		maxWidth: null,
 		minHeight: 150,
@@ -446,6 +449,8 @@ $.widget( "ui.dialog", {
 		this._addClass( uiDialogTitle, "ui-dialog-title" );
 		this._title( uiDialogTitle );
 
+		this._titleIcon( this.options.icons.title );
+
 		this.uiDialogTitlebar.prependTo( this.uiDialog );
 
 		this.uiDialog.attr( {
@@ -461,6 +466,20 @@ $.widget( "ui.dialog", {
 		}
 	},
 
+	_titleIcon: function( icon ) {
+		if ( this.uiDialogTitleIcon ) {
+			this.uiDialogTitleIcon.remove();
+			delete this.uiDialogTitleIcon;
+		}
+
+		if ( icon ) {
+			this.uiDialogTitleIcon = $( "<span>" );
+			this._addClass( this.uiDialogTitleIcon, "ui-dialog-title-icon",
+				"ui-icon " + this.options.icons.title );
+			this.uiDialogTitleIcon.prependTo( this.uiDialogTitlebar );
+		}
+	},
+
 	_createButtonPane: function() {
 		this.uiDialogButtonPane = $( "<div>" );
 		this._addClass( this.uiDialogButtonPane, "ui-dialog-buttonpane",
@@ -742,6 +761,10 @@ $.widget( "ui.dialog", {
 			}
 		}
 
+		if ( key === "icons" ) {
+			this._titleIcon( value.title );
+		}
+
 		if ( key === "position" ) {
 			this._position();
 		}
@@ -911,30 +934,4 @@ $.widget( "ui.dialog", {
 	}
 } );
 
-// DEPRECATED
-// TODO: switch return back to widget declaration at top of file when this is removed
-if ( $.uiBackCompat !== false ) {
-
-	// Backcompat for dialogClass option
-	$.widget( "ui.dialog", $.ui.dialog, {
-		options: {
-			dialogClass: ""
-		},
-		_createWrapper: function() {
-			this._super();
-			this.uiDialog.addClass( this.options.dialogClass );
-		},
-		_setOption: function( key, value ) {
-			if ( key === "dialogClass" ) {
-				this.uiDialog
-					.removeClass( this.options.dialogClass )
-					.addClass( value );
-			}
-			this._superApply( arguments );
-		}
-	} );
-}
-
-return $.ui.dialog;
-
 } ) );