feature(dialog): support cancel and close events for dialog

demos/dialog/index.js

@@ -24,6 +24,11 @@ for (let i = 0; i < buttons.length; i++) {
   const listener = listenerFactory(buttonNum);
 
   button.addEventListener('click', listener);
+  const dialog = document.body.querySelector('#dialog' + buttonNum);
+  dialog.addEventListener('closing', () => console.log('Closing: ', event.detail));
+  dialog.addEventListener('closed', () => console.log('Closed: ', event.detail));
+  dialog.addEventListener('close', () => console.log('Close: ', event.detail));
+  dialog.addEventListener('cancel', () => console.log('Cancel: ', event.detail));
 }
 
 window.toggleActions.onclick = function() {
@@ -48,4 +53,4 @@ primaryButton.addEventListener('click', () => {
   }
 
   textField.reportValidity();
-});
+});

packages/dialog/src/mwc-dialog-base.ts

@@ -68,13 +68,13 @@ export class DialogBase extends BaseElement {
   @observer(function(this: DialogBase, newAction: string) {
     this.mdcFoundation.setScrimClickAction(newAction);
   })
-  scrimClickAction = 'close';
+  scrimClickAction = 'cancel';
 
   @property({type: String})
   @observer(function(this: DialogBase, newAction: string) {
     this.mdcFoundation.setEscapeKeyAction(newAction);
   })
-  escapeKeyAction = 'close';
+  escapeKeyAction = 'cancel';
 
   @property({type: Boolean, reflect: true})
   @observer(function(this: DialogBase, isOpen: boolean) {
@@ -218,6 +218,11 @@ export class DialogBase extends BaseElement {
           this.open = false;
         }
         this.emitNotification('closing', action);
+        if (action === 'cancel') {
+          this.emitNotification(action, action);
+        } else {
+          this.emitNotification('close', action);
+        }
       },
       notifyOpened: () => this.emitNotification('opened'),
       notifyOpening: () => {

packages/dialog/src/test/mwc-dialog.test.ts

@@ -33,6 +33,8 @@ const OPENING_EVENT = 'opening';
 const OPENED_EVENT = 'opened';
 const CLOSING_EVENT = 'closing';
 const CLOSED_EVENT = 'closed';
+const CLOSE_EVENT = 'close';
+const CANCEL_EVENT = 'cancel';
 
 interface HasKeyCode {
   keyCode: number;
@@ -130,11 +132,14 @@ suite('mwc-dialog:', () => {
       assert.strictEqual(titleTag!.textContent, 'This is my Title');
     });
 
-    test('Dialog fires open and close events', async () => {
+    test('Dialog fires open, close and cancel events', async () => {
       let openingCalled = false;
       let openedCalled = false;
       let closingCalled = false;
       let closedCalled = false;
+      let closeCalled = false;
+      let cancelCalled = false;
+
       const surfaceElement = element.shadowRoot!.querySelector(
                                  '.mdc-dialog__surface') as HTMLDivElement;
 
@@ -154,13 +159,23 @@ suite('mwc-dialog:', () => {
         closedCalled = true;
       });
 
+      element.addEventListener(CLOSE_EVENT, () => {
+        closeCalled = true;
+      });
+
+      element.addEventListener(CANCEL_EVENT, () => {
+        cancelCalled = true;
+      });
+
       const openedPromise = awaitEvent(element, OPENED_EVENT);
       const closedPromise = awaitEvent(element, CLOSED_EVENT);
 
       assert.isFalse(openingCalled);
       assert.isFalse(openedCalled);
       assert.isFalse(closingCalled);
       assert.isFalse(closedCalled);
+      assert.isFalse(closeCalled);
+      assert.isFalse(cancelCalled);
 
       assert.strictEqual(surfaceElement.offsetWidth, 0);
       assert.strictEqual(surfaceElement.offsetHeight, 0);
@@ -174,6 +189,8 @@ suite('mwc-dialog:', () => {
       assert.isTrue(openedCalled);
       assert.isFalse(closingCalled);
       assert.isFalse(closedCalled);
+      assert.isFalse(closeCalled);
+      assert.isFalse(cancelCalled);
 
       assert.isTrue(surfaceElement.offsetWidth > 0);
       assert.isTrue(surfaceElement.offsetHeight > 0);
@@ -188,14 +205,14 @@ suite('mwc-dialog:', () => {
       assert.isFalse(openedCalled);
       assert.isTrue(closingCalled);
       assert.isTrue(closedCalled);
+      assert.isTrue(closeCalled);
+      assert.isFalse(cancelCalled);
 
       assert.strictEqual(surfaceElement.offsetWidth, 0);
       assert.strictEqual(surfaceElement.offsetHeight, 0);
     });
 
-    test('Scrim closes dialog', async () => {
-      const SCRIM_ACTION = 'SCRIM_CLOSE';
-      element.scrimClickAction = SCRIM_ACTION;
+    test('Scrim cancels dialog', async () => {
       element.open = true;
 
       await awaitEvent(element, OPENED_EVENT);
@@ -208,12 +225,10 @@ suite('mwc-dialog:', () => {
       const event = await awaitEvent(element, CLOSED_EVENT);
 
       const action = event.detail.action;
-      assert.strictEqual(action, SCRIM_ACTION);
+      assert.strictEqual(action, 'cancel');
     });
 
-    test('Escape closes dialog', async () => {
-      const ESCAPE_ACTION = 'ESCAPE_CLOSE';
-      element.escapeKeyAction = ESCAPE_ACTION;
+    test('Escape cancles dialog', async () => {
       element.open = true;
 
       await awaitEvent(element, OPENED_EVENT);
@@ -231,7 +246,7 @@ suite('mwc-dialog:', () => {
       const event = await awaitEvent(element, CLOSED_EVENT);
 
       const action = event.detail.action;
-      assert.strictEqual(action, ESCAPE_ACTION);
+      assert.strictEqual(action, 'cancel');
     });
 
     test('Hide Actions hides empty whitespace', async () => {
@@ -294,11 +309,18 @@ suite('mwc-dialog:', () => {
       await awaitEvent(element, OPENED_EVENT);
 
       let closedCalled = false;
+      let cancelCalled = false;
+      let cancelAction = '';
 
       element.addEventListener(CLOSED_EVENT, () => {
         closedCalled = true;
       });
 
+      element.addEventListener(CANCEL_EVENT, (e) => {
+        cancelCalled = true;
+        cancelAction = e['detail'].action;
+      });
+
       const primary = element.querySelector('[slot="primaryAction"]') as Button;
       const secondary =
           element.querySelector('[slot="secondaryAction"]') as Button;
@@ -323,11 +345,9 @@ suite('mwc-dialog:', () => {
 
       secondary.click();
 
-      const secondaryAction = await awaitEvent(element, CLOSED_EVENT);
-
-      assert.isTrue(closedCalled);
-      assert.strictEqual(secondaryAction.detail.action, 'cancel');
-    });
+      assert.isTrue(cancelCalled);
+      assert.strictEqual(cancelAction, 'cancel');
+    }).timeout(5000);
 
     test('Initial focus attribute focuses', async () => {
       const button = element.firstElementChild as Button;