From c101f7ff75acdd624e1e599f1f33a67252e36558 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Green <jeanphilippe.green@gmail.com>
Date: Fri, 25 Dec 2020 16:15:01 +0100
Subject: [PATCH] fix(material/dialog): make align attribute into an input of
 dialog actions directive instead of css

Fixes multiple issues, such as self-documentation of the align attribute, type checking, better
bindings, and IDE support. Because align is not standard for HTMLDivElement, it doesn't make much
sense to assume end users to know they can use the align attribute.

Fixes #18479
---
 src/dev-app/dialog/dialog-demo.ts             | 18 +++++++--------
 .../dialog/dialog-content-directives.ts       | 22 ++++++++++++-------
 src/material/dialog/dialog.scss               | 11 +++++-----
 src/material/dialog/dialog.spec.ts            | 12 ++++++++--
 4 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/src/dev-app/dialog/dialog-demo.ts b/src/dev-app/dialog/dialog-demo.ts
index 5223f841c918..7a28213edfad 100644
--- a/src/dev-app/dialog/dialog-demo.ts
+++ b/src/dev-app/dialog/dialog-demo.ts
@@ -22,7 +22,7 @@ export class DialogDemo {
   dialogRef: MatDialogRef<JazzDialog> | null;
   lastAfterClosedResult: string;
   lastBeforeCloseResult: string;
-  actionsAlignment: string;
+  actionsAlignment: 'end' | 'center' | undefined;
   config = {
     disableClose: false,
     panelClass: 'custom-overlay-pane-class',
@@ -110,20 +110,20 @@ export class JazzDialog {
   private _dimesionToggle = false;
 
   constructor(
-    public dialogRef: MatDialogRef<JazzDialog>,
-    @Inject(MAT_DIALOG_DATA) public data: any) { }
+      public dialogRef: MatDialogRef<JazzDialog>,
+      @Inject(MAT_DIALOG_DATA) public data: any) { }
 
   togglePosition(): void {
     this._dimesionToggle = !this._dimesionToggle;
 
     if (this._dimesionToggle) {
       this.dialogRef
-        .updateSize('500px', '500px')
-        .updatePosition({ top: '25px', left: '25px' });
+      .updateSize('500px', '500px')
+      .updatePosition({ top: '25px', left: '25px' });
     } else {
       this.dialogRef
-        .updateSize()
-        .updatePosition();
+      .updateSize()
+      .updatePosition();
     }
   }
 
@@ -160,7 +160,7 @@ export class JazzDialog {
       </p>
     </mat-dialog-content>
 
-    <mat-dialog-actions [attr.align]="actionsAlignment">
+    <mat-dialog-actions [align]="actionsAlignment">
       <button
         mat-raised-button
         color="primary"
@@ -181,7 +181,7 @@ export class JazzDialog {
   `
 })
 export class ContentElementDialog {
-  actionsAlignment: string;
+  actionsAlignment: 'end' | 'center' | undefined;
 
   constructor(public dialog: MatDialog) { }
 
diff --git a/src/material/dialog/dialog-content-directives.ts b/src/material/dialog/dialog-content-directives.ts
index 73121c0cc08e..a4ab16b3d9ee 100644
--- a/src/material/dialog/dialog-content-directives.ts
+++ b/src/material/dialog/dialog-content-directives.ts
@@ -77,7 +77,7 @@ export class MatDialogClose implements OnInit, OnChanges {
     // dialog, and therefore clicking the button won't result in a focus change. This means that
     // the FocusMonitor won't detect any origin change, and will always output `program`.
     _closeDialogVia(this.dialogRef,
-        event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse', this.dialogResult);
+      event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse', this.dialogResult);
   }
 }
 
@@ -96,11 +96,11 @@ export class MatDialogTitle implements OnInit {
   @Input() id: string = `mat-dialog-title-${dialogElementUid++}`;
 
   constructor(
-      // The dialog title directive is always used in combination with a `MatDialogRef`.
-      // tslint:disable-next-line: lightweight-tokens
-      @Optional() private _dialogRef: MatDialogRef<any>,
-      private _elementRef: ElementRef<HTMLElement>,
-      private _dialog: MatDialog) {}
+    // The dialog title directive is always used in combination with a `MatDialogRef`.
+    // tslint:disable-next-line: lightweight-tokens
+    @Optional() private _dialogRef: MatDialogRef<any>,
+    private _elementRef: ElementRef<HTMLElement>,
+    private _dialog: MatDialog) {}
 
   ngOnInit() {
     if (!this._dialogRef) {
@@ -136,9 +136,15 @@ export class MatDialogContent {}
  */
 @Directive({
   selector: `[mat-dialog-actions], mat-dialog-actions, [matDialogActions]`,
-  host: {'class': 'mat-dialog-actions'}
+  host: {
+    'class': 'mat-dialog-actions',
+    '[class.mat-dialog-actions-align-center]': 'align === "center"',
+    '[class.mat-dialog-actions-align-end]': 'align === "end"'
+  }
 })
-export class MatDialogActions {}
+export class MatDialogActions {
+  @Input() align?: 'center' | 'end' = undefined;
+}
 
 
 /**
diff --git a/src/material/dialog/dialog.scss b/src/material/dialog/dialog.scss
index a7db73658d5e..473abc4b1e65 100644
--- a/src/material/dialog/dialog.scss
+++ b/src/material/dialog/dialog.scss
@@ -57,13 +57,14 @@ $mat-dialog-button-margin: 8px !default;
   // Pull the actions down to avoid their padding stacking with the dialog's padding.
   margin-bottom: -$mat-dialog-padding;
 
-  &[align='end'] {
-    justify-content: flex-end;
-  }
-
-  &[align='center'] {
+  // .align-center and .align-end are set by directive input "align"
+  // [align='center'] and [align='right'] are kept for backwards compability
+  &.mat-dialog-actions-align-center, &[align='center'] {
     justify-content: center;
   }
+  &.mat-dialog-actions-align-end, &[align='end'] {
+    justify-content: flex-end;
+  }
 
   .mat-button-base + .mat-button-base,
   .mat-mdc-button-base + .mat-mdc-button-base {
diff --git a/src/material/dialog/dialog.spec.ts b/src/material/dialog/dialog.spec.ts
index 8a8a8e6edb26..cd7c1e72a571 100644
--- a/src/material/dialog/dialog.spec.ts
+++ b/src/material/dialog/dialog.spec.ts
@@ -1493,6 +1493,14 @@ describe('MatDialog', () => {
         expect(container.getAttribute('aria-labelledby'))
             .toBe(title.id, 'Expected the aria-labelledby to match the title id.');
       }));
+
+      it('should add align-* class according to given [align] input in [mat-dialog-actions]', () => {
+        let actions =
+          overlayContainerElement.querySelector('mat-dialog-actions')!;
+
+        expect(actions).not.toHaveClass('mat-dialog-actions-align-center', 'Expected action buttons to not have class align-center');
+        expect(actions).toHaveClass('mat-dialog-actions-align-end', 'Expected action buttons to have class align-end');
+      });
     }
   });
 
@@ -1876,7 +1884,7 @@ class PizzaMsg {
   template: `
     <h1 mat-dialog-title>This is the title</h1>
     <mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
-    <mat-dialog-actions>
+    <mat-dialog-actions align="end">
       <button mat-dialog-close>Close</button>
       <button class="close-with-true" [mat-dialog-close]="true">Close and return true</button>
       <button
@@ -1895,7 +1903,7 @@ class ContentElementDialog {}
     <ng-template>
       <h1 mat-dialog-title>This is the title</h1>
       <mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
-      <mat-dialog-actions>
+      <mat-dialog-actions align="end">
         <button mat-dialog-close>Close</button>
         <button class="close-with-true" [mat-dialog-close]="true">Close and return true</button>
         <button