refactor: address comments

packages/application-extension/src/index.tsx

@@ -149,14 +149,14 @@ const main: JupyterFrontEndPlugin<void> = {
             buttons: [
               Dialog.cancelButton({
                 label: 'Reload Without Saving',
-                reload: true
+                actions: ['reload']
               }),
               Dialog.okButton({ label: 'Save and Reload' })
             ],
             hasClose: true
           });
         })
-        .then(({ button: { accept, reload } }) => {
+        .then(({ button: { accept, actions } }) => {
           if (accept) {
             void app.commands
               .execute('docmanager:save')
@@ -168,7 +168,7 @@ const main: JupyterFrontEndPlugin<void> = {
                   message: <pre>{err.message}</pre>
                 });
               });
-          } else if (reload) {
+          } else if (actions.includes('reload')) {
             router.reload();
           }
         })

packages/apputils/src/dialog.tsx

@@ -9,7 +9,7 @@ import { Message, MessageLoop } from '@lumino/messaging';
 
 import { PanelLayout, Panel, Widget } from '@lumino/widgets';
 
-import { closeIcon } from '@jupyterlab/ui-components';
+import { closeIcon, Button, LabIcon } from '@jupyterlab/ui-components';
 
 import * as React from 'react';
 
@@ -18,7 +18,6 @@ import { Styling } from './styling';
 import { ReactWidget } from './vdom';
 
 import { WidgetTracker } from './widgettracker';
-import { ToolbarButtonComponent } from './toolbar';
 
 /**
  * Create and show a dialog.
@@ -433,9 +432,9 @@ export namespace Dialog {
     accept: boolean;
 
     /**
-     * The dialog action to perform a reload when the button is clicked.
+     * The additional dialog actions to perform when the button is clicked.
      */
-    reload: boolean;
+    actions: Array<string>;
 
     /**
      * The button display type.
@@ -565,7 +564,6 @@ export namespace Dialog {
    */
   export function createButton(value: Partial<IButton>): Readonly<IButton> {
     value.accept = value.accept !== false;
-    value.reload = Boolean(value.reload);
     const defaultLabel = value.accept ? 'OK' : 'Cancel';
     return {
       label: value.label || defaultLabel,
@@ -574,7 +572,7 @@ export namespace Dialog {
       caption: value.caption || '',
       className: value.className || '',
       accept: value.accept,
-      reload: value.reload,
+      actions: value.actions || [],
       displayType: value.displayType || 'default'
     };
   }
@@ -639,16 +637,41 @@ export namespace Dialog {
       options: Partial<Dialog.IOptions<T>> = {}
     ): Widget {
       let header: Widget;
+
+      const handleMouseDown = (event: React.MouseEvent) => {
+        // Fire action only when left button is pressed.
+        if (event.button === 0) {
+          event.preventDefault();
+          reject();
+        }
+      };
+
+      const handleKeyDown = (event: React.KeyboardEvent) => {
+        const { key } = event;
+        if (key === 'Enter' || key === ' ') {
+          reject();
+        }
+      };
+
       if (typeof title === 'string') {
         header = ReactWidget.create(
           <>
             {title}
             {options.hasClose && (
-              <ToolbarButtonComponent
-                icon={closeIcon}
-                onClick={reject}
-                tooltip="Cancel"
-              />
+              <Button
+                className="jp-Dialog-close-button"
+                onMouseDown={handleMouseDown}
+                onKeyDown={handleKeyDown}
+                title="Cancel"
+                minimal
+              >
+                <LabIcon.resolveReact
+                  icon={closeIcon}
+                  iconClass="jp-Icon"
+                  className="jp-ToolbarButtonComponent-icon"
+                  tag="span"
+                />
+              </Button>
             )}
           </>
         );

packages/apputils/style/dialog.css

@@ -57,6 +57,13 @@ button.jp-Dialog-button:focus::-moz-focus-inner {
   border: 0;
 }
 
+button.jp-Dialog-close-button {
+  padding: 0;
+  height: 100%;
+  min-width: unset;
+  min-height: unset;
+}
+
 .jp-Dialog-header {
   display: flex;
   justify-content: space-between;

packages/apputils/test/dialog.spec.tsx

@@ -342,7 +342,7 @@ describe('@jupyterlab/apputils', () => {
         className: 'baz',
         accept: false,
         displayType: 'warn',
-        reload: false
+        actions: []
       };
 
       describe('#createHeader()', () => {
@@ -539,14 +539,14 @@ describe('@jupyterlab/apputils', () => {
 
       await waitForDialog();
 
-      expect(node.querySelector('.jp-ToolbarButtonComponent')).toBeFalsy();
+      expect(node.querySelector('.jp-Dialog-close-button')).toBeFalsy();
 
       await acceptDialog();
 
       const result = await prompt;
 
       expect(result.button.accept).toBe(false);
-      expect(result.button.reload).toBe(false);
+      expect(result.button.actions).toEqual([]);
       expect(result.value).toBe(null);
 
       document.body.removeChild(node);
@@ -568,14 +568,14 @@ describe('@jupyterlab/apputils', () => {
 
       await waitForDialog();
 
-      expect(node.querySelector('.jp-ToolbarButtonComponent')).toBeTruthy();
+      expect(node.querySelector('.jp-Dialog-close-button')).toBeTruthy();
 
       await acceptDialog();
 
       const result = await prompt;
 
       expect(result.button.accept).toBe(false);
-      expect(result.button.reload).toBe(false);
+      expect(result.button.actions).toEqual([]);
       expect(result.value).toBe(null);
 
       document.body.removeChild(node);
@@ -591,7 +591,10 @@ describe('@jupyterlab/apputils', () => {
         body: 'Hello',
         host: node,
         defaultButton: 0,
-        buttons: [Dialog.cancelButton({ reload: true }), Dialog.okButton()],
+        buttons: [
+          Dialog.cancelButton({ actions: ['reload'] }),
+          Dialog.okButton()
+        ],
         hasClose: true
       });
 
@@ -600,7 +603,7 @@ describe('@jupyterlab/apputils', () => {
       const result = await prompt;
 
       expect(result.button.accept).toBe(false);
-      expect(result.button.reload).toBe(true);
+      expect(result.button.actions).toEqual(['reload']);
       expect(result.value).toBe(null);
       document.body.removeChild(node);
     });

packages/extensionmanager/src/build-helper.tsx

@@ -34,14 +34,14 @@ export function doBuild(
           buttons: [
             Dialog.cancelButton({
               label: 'Reload Without Saving',
-              reload: true
+              actions: ['reload']
             }),
             Dialog.okButton({ label: 'Save and Reload' })
           ],
           hasClose: true
         });
       })
-      .then(({ button: { accept, reload } }) => {
+      .then(({ button: { accept, actions } }) => {
         if (accept) {
           void app.commands
             .execute('docmanager:save')
@@ -53,7 +53,7 @@ export function doBuild(
                 message: <pre>{err.message}</pre>
               });
             });
-        } else if (reload) {
+        } else if (actions.includes('reload')) {
           location.reload();
         }
       })