Dialog: Add icons option to support titlebar icons

Fixes #15121

Author: scottgonzalez

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

@@ -27,6 +27,15 @@
 	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

@@ -58,6 +58,9 @@ return $.widget( "ui.dialog", {
 		draggable: true,
 		hide: null,
 		height: "auto",
+		icons: {
+			title: null
+		},
 		maxHeight: null,
 		maxWidth: null,
 		minHeight: 150,
@@ -446,6 +449,8 @@ return $.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 @@ return $.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 @@ return $.widget( "ui.dialog", {
 			}
 		}
 
+		if ( key === "icons" ) {
+			this._titleIcon( value.title );
+		}
+
 		if ( key === "position" ) {
 			this._position();
 		}