Dialog: Use button widget for close button (was already listed as dependency)

jzaefferer · jzaefferer · commit eae645c96516 · 2012-11-16T10:37:34.000+01:00
diff --git a/demos/dialog/animated.html b/demos/dialog/animated.html
@@ -11,6 +11,7 @@
 	<script src="../../ui/jquery.ui.draggable.js"></script>
 	<script src="../../ui/jquery.ui.position.js"></script>
 	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
 	<script src="../../ui/jquery.ui.dialog.js"></script>
 	<script src="../../ui/jquery.ui.effect.js"></script>
 	<script src="../../ui/jquery.ui.effect-blind.js"></script>
diff --git a/demos/dialog/default.html b/demos/dialog/default.html
@@ -11,6 +11,7 @@
 	<script src="../../ui/jquery.ui.draggable.js"></script>
 	<script src="../../ui/jquery.ui.position.js"></script>
 	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
 	<script src="../../ui/jquery.ui.dialog.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<script>
diff --git a/demos/dialog/modal-confirmation.html b/demos/dialog/modal-confirmation.html
@@ -11,6 +11,7 @@
 	<script src="../../ui/jquery.ui.button.js"></script>
 	<script src="../../ui/jquery.ui.draggable.js"></script>
 	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
 	<script src="../../ui/jquery.ui.dialog.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<script>
diff --git a/demos/dialog/modal-form.html b/demos/dialog/modal-form.html
@@ -12,6 +12,7 @@
 	<script src="../../ui/jquery.ui.draggable.js"></script>
 	<script src="../../ui/jquery.ui.position.js"></script>
 	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
 	<script src="../../ui/jquery.ui.dialog.js"></script>
 	<script src="../../ui/jquery.ui.effect.js"></script>
 	<link rel="stylesheet" href="../demos.css">
@@ -86,10 +87,10 @@
 
 					if ( bValid ) {
 						$( "#users tbody" ).append( "<tr>" +
-							"<td>" + name.val() + "</td>" + 
-							"<td>" + email.val() + "</td>" + 
+							"<td>" + name.val() + "</td>" +
+							"<td>" + email.val() + "</td>" +
 							"<td>" + password.val() + "</td>" +
-						"</tr>" ); 
+						"</tr>" );
 						$( this ).dialog( "close" );
 					}
 				},
diff --git a/demos/dialog/modal-message.html b/demos/dialog/modal-message.html
@@ -12,6 +12,7 @@
 	<script src="../../ui/jquery.ui.draggable.js"></script>
 	<script src="../../ui/jquery.ui.position.js"></script>
 	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
 	<script src="../../ui/jquery.ui.dialog.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<script>
diff --git a/demos/dialog/modal.html b/demos/dialog/modal.html
@@ -11,6 +11,7 @@
 	<script src="../../ui/jquery.ui.draggable.js"></script>
 	<script src="../../ui/jquery.ui.position.js"></script>
 	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
 	<script src="../../ui/jquery.ui.dialog.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<script>
diff --git a/tests/unit/dialog/dialog.html b/tests/unit/dialog/dialog.html
@@ -19,6 +19,7 @@
 			"ui/jquery.ui.mouse.js",
 			"ui/jquery.ui.draggable.js",
 			"ui/jquery.ui.resizable.js",
+			"ui/jquery.ui.button.js",
 			"ui/jquery.ui.dialog.js"
 		]
 	});
diff --git a/tests/unit/dialog/dialog_options.js b/tests/unit/dialog/dialog_options.js
@@ -35,7 +35,7 @@ test("buttons", function() {
 		},
 		el = $('<div></div>').dialog({ buttons: buttons });
 
-	btn = $("button", el.dialog('widget'));
+	btn = el.dialog( "widget" ).find( ".ui-dialog-buttonpane button" );
 	equal(btn.length, 2, "number of buttons");
 
 	i = 0;
@@ -61,7 +61,7 @@ test("buttons", function() {
 	el.dialog("option", "buttons", newButtons);
 	deepEqual(el.dialog("option", "buttons"), newButtons, '.dialog("option", "buttons", ...) setter');
 
-	btn = $("button", el.dialog('widget'));
+	btn = el.dialog( "widget" ).find( ".ui-dialog-buttonpane button" );
 	equal(btn.length, 1, "number of buttons after setter");
 	btn.trigger('click');
 
@@ -72,7 +72,7 @@ test("buttons", function() {
 	});
 
 	el.dialog("option", "buttons", null);
-	btn = $("button", el.dialog('widget'));
+	btn = el.dialog( "widget" ).find( ".ui-dialog-buttonpane button" );
 	equal(btn.length, 0, "all buttons have been removed");
 	equal(el.find(".ui-dialog-buttonset").length, 0, "buttonset has been removed");
 	equal(el.parent().hasClass('ui-dialog-buttons'), false, "dialog wrapper removes class about having buttons");
@@ -97,7 +97,7 @@ test("buttons - advanced", function() {
 			]
 		});
 
-	buttons = el.dialog('widget').find("button");
+	buttons = el.dialog( "widget" ).find( ".ui-dialog-buttonpane button" );
 	equal(buttons.length, 1, "correct number of buttons");
 	equal(buttons.attr("id"), "my-button-id", "correct id");
 	equal(buttons.text(), "a button", "correct label");
diff --git a/tests/visual/dialog/animated.html b/tests/visual/dialog/animated.html
@@ -11,6 +11,7 @@
 	<script src="../../../ui/jquery.ui.draggable.js"></script>
 	<script src="../../../ui/jquery.ui.position.js"></script>
 	<script src="../../../ui/jquery.ui.resizable.js"></script>
+	<script src="../../../ui/jquery.ui.button.js"></script>
 	<script src="../../../ui/jquery.ui.dialog.js"></script>
 	<script src="../../../ui/jquery.ui.effect.js"></script>
 	<script src="../../../ui/jquery.ui.effect-blind.js"></script>
diff --git a/tests/visual/dialog/complex-dialogs.html b/tests/visual/dialog/complex-dialogs.html
@@ -11,6 +11,7 @@
 	<script src="../../../ui/jquery.ui.draggable.js"></script>
 	<script src="../../../ui/jquery.ui.position.js"></script>
 	<script src="../../../ui/jquery.ui.resizable.js"></script>
+	<script src="../../../ui/jquery.ui.button.js"></script>
 	<script src="../../../ui/jquery.ui.dialog.js"></script>
 
 	<!-- stuff needed to make things complex -->
diff --git a/tests/visual/dialog/form.html b/tests/visual/dialog/form.html
@@ -11,6 +11,7 @@
 	<script src="../../../ui/jquery.ui.draggable.js"></script>
 	<script src="../../../ui/jquery.ui.position.js"></script>
 	<script src="../../../ui/jquery.ui.resizable.js"></script>
+	<script src="../../../ui/jquery.ui.button.js"></script>
 	<script src="../../../ui/jquery.ui.dialog.js"></script>
 	<script src="../../../ui/jquery.ui.effect.js"></script>
 	<script src="../../../ui/jquery.ui.effect-blind.js"></script>
diff --git a/tests/visual/dialog/performance.html b/tests/visual/dialog/performance.html
@@ -11,6 +11,7 @@
 	<script src="../../../ui/jquery.ui.mouse.js"></script>
 	<script src="../../../ui/jquery.ui.draggable.js"></script>
 	<script src="../../../ui/jquery.ui.resizable.js"></script>
+	<script src="../../../ui/jquery.ui.button.js"></script>
 	<script src="../../../ui/jquery.ui.dialog.js"></script>
 	<script>
 	$(function() {
diff --git a/themes/base/jquery.ui.dialog.css b/themes/base/jquery.ui.dialog.css
@@ -11,9 +11,7 @@
 .ui-dialog { position: absolute; top: 0; left: 0; padding: .2em; width: 300px; overflow: hidden; outline: 0; }
 .ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative;  }
 .ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; }
-.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
-.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
-.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
+.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 21px; margin: -10px 0 0 0; padding: 1px; height: 20px; }
 .ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
 .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
 .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
diff --git a/ui/jquery.ui.dialog.js b/ui/jquery.ui.dialog.js
@@ -99,7 +99,6 @@ $.widget("ui.dialog", {
 			uiDialog,
 			// TODO should use this.uiDialogTitlebar instead
 			uiDialogTitlebar,
-			uiDialogTitlebarClose,
 			uiDialogTitle,
 			uiDialogButtonPane;
 
@@ -139,20 +138,21 @@ $.widget("ui.dialog", {
 				})
 				.prependTo( uiDialog );
 
-			uiDialogTitlebarClose = $( "<a href='#'></a>" )
-				.addClass( "ui-dialog-titlebar-close  ui-corner-all" )
-				.attr( "role", "button" )
+			this.uiDialogTitlebarClose = $( "<button></button>" )
+				.button({
+					label: options.closeText,
+					icons: {
+						primary: "ui-icon-closethick"
+					},
+					text: false
+				})
+				.addClass( "ui-dialog-titlebar-close" )
 				.click(function( event ) {
 					event.preventDefault();
 					that.close( event );
 				})
 				.appendTo( uiDialogTitlebar );
 
-			( this.uiDialogTitlebarCloseText = $( "<span>" ) )
-				.addClass( "ui-icon ui-icon-closethick" )
-				.text( options.closeText )
-				.appendTo( uiDialogTitlebarClose );
-
 			uiDialogTitle = $( "<span>" )
 				.uniqueId()
 				.addClass( "ui-dialog-title" )
@@ -183,10 +183,6 @@ $.widget("ui.dialog", {
 			});
 		}
 
-		// TODO use button? or at least a button element, so that SPACE works?
-		this._hoverable( uiDialogTitlebarClose );
-		this._focusable( uiDialogTitlebarClose );
-
 		if ( options.draggable && $.fn.draggable ) {
 			this._makeDraggable();
 		}
@@ -575,7 +571,9 @@ $.widget("ui.dialog", {
 				break;
 			case "closeText":
 				// ensure that we always pass a string
-				this.uiDialogTitlebarCloseText.text( "" + value );
+				this.uiDialogTitlebarClose.button({
+					label: "" + value
+				});
 				break;
 			case "dialogClass":
 				uiDialog

Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,7 @@`
`19`	`19`	`"ui/jquery.ui.mouse.js",`
`20`	`20`	`"ui/jquery.ui.draggable.js",`
`21`	`21`	`"ui/jquery.ui.resizable.js",`
	`22`	`+ "ui/jquery.ui.button.js",`
`22`	`23`	`"ui/jquery.ui.dialog.js"`
`23`	`24`	`]`
`24`	`25`	`});`