Add support for the classes option in Tabs and Dialog (#18015)

* Add support for the classes option in Tabs and Dialog.

* Add support for the classes option in Tabs and Dialog (Fix spacing).

types/jqueryui/index.d.ts

@@ -353,6 +353,7 @@ declare namespace JQueryUI {
         autoOpen?: boolean;
         buttons?: { [buttonText: string]: (event?: Event) => void } | DialogButtonOptions[];
         closeOnEscape?: boolean;
+        classes?: DialogClasses;
         closeText?: string;
         appendTo?: string;
         dialogClass?: string;
@@ -376,6 +377,20 @@ declare namespace JQueryUI {
 		open?: DialogEvent;
         close?: DialogEvent;
     }
+    
+    interface DialogClasses {
+        "ui-dialog"?: string;
+        "ui-dialog-content"?: string;
+        "ui-dialog-dragging"?: string;
+        "ui-dialog-resizing"?: string;
+        "ui-dialog-buttons"?: string;
+        "ui-dialog-titlebar"?: string;
+        "ui-dialog-title"?: string;
+        "ui-dialog-titlebar-close"?: string;
+        "ui-dialog-buttonpane"?: string;
+        "ui-dialog-buttonset"?: string;
+        "ui-widget-overlay"?: string;
+    }
 
     interface DialogButtonOptions {
         icons?: any;
@@ -802,6 +817,7 @@ declare namespace JQueryUI {
 
     interface TabsOptions extends TabsEvents {
         active?: any; // boolean or number
+        classes?: TabClasses;
         collapsible?: boolean;
         disabled?: any; // boolean or []
         event?: string;
@@ -810,6 +826,17 @@ declare namespace JQueryUI {
         show?: any; // boolean, number, string or object
     }
 
+    interface TabClasses {
+        "ui-tabs"?: string;
+        "ui-tabs-collapsible"?: string;
+        "ui-tabs-nav"?: string;
+        "ui-tabs-tab"?: string;
+        "ui-tabs-active"?: string;
+        "ui-tabs-loading"?: string;
+        "ui-tabs-anchor"?: string;
+        "ui-tabs-panel"?: string;
+    }
+
     interface TabsActivationUIParams {
         newTab: JQuery;
         oldTab: JQuery;

types/jqueryui/jqueryui-tests.ts

@@ -1432,6 +1432,7 @@ function test_dialog() {
     $(".selector").dialog({ autoOpen: false });
     $(".selector").dialog({ buttons: { Ok: function () { $(this).dialog("close"); } } });
     $(".selector").dialog({ buttons: [ { text: "Ok", click: function () { $(this).dialog("close"); } } ] } );
+    $(".selector").dialog({ classes: { "ui-dialog": "custom", "ui-dialog-content": "custom-content" } } );
     $(".selector").dialog({ closeOnEscape: false });
     $(".selector").dialog({ closeText: "hide" });
     $(".selector").dialog({ appendTo: "appendTo" });
@@ -1712,6 +1713,7 @@ function test_tabs() {
     $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
     $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
     $(".selector").tabs({ active: 1 });
+    $(".selector").tabs({ classes: { "ui-tabs": "custom", "ui-tabs-panel": "custom-panel" } } );
     $(".selector").tabs({ collapsible: true });
     $(".selector").tabs({ disabled: [0, 2] });
     $(".selector").tabs({ event: "mouseover" });