From 5c304aeecbab9178b01245212d11289216ec2586 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Fri, 11 Feb 2022 13:52:09 +0100
Subject: [PATCH] refactor: test changes

---
 src/dev-app/dialog/dialog-demo.ts                |  6 +++---
 src/dev-app/mdc-dialog/mdc-dialog-demo.ts        |  6 +++---
 .../mdc-dialog/dialog-content-directives.ts      | 13 +++++++++++--
 src/material-experimental/mdc-dialog/dialog.scss | 11 ++++++-----
 .../mdc-dialog/dialog.spec.ts                    | 15 +++++++++++++--
 src/material/dialog/dialog-content-directives.ts | 13 +++++++++++--
 src/material/dialog/dialog.scss                  | 11 ++++++-----
 src/material/dialog/dialog.spec.ts               | 16 ++++++++++++++--
 tools/public_api_guard/material/dialog.md        |  3 ++-
 9 files changed, 69 insertions(+), 25 deletions(-)

diff --git a/src/dev-app/dialog/dialog-demo.ts b/src/dev-app/dialog/dialog-demo.ts
index 09779b331133..cc2ce89bcabd 100644
--- a/src/dev-app/dialog/dialog-demo.ts
+++ b/src/dev-app/dialog/dialog-demo.ts
@@ -21,7 +21,7 @@ export class DialogDemo {
   dialogRef: MatDialogRef<JazzDialog> | null;
   lastAfterClosedResult: string;
   lastBeforeCloseResult: string;
-  actionsAlignment: string;
+  actionsAlignment: 'start' | 'center' | 'end';
   config = {
     disableClose: false,
     panelClass: 'custom-overlay-pane-class',
@@ -156,7 +156,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"
@@ -177,7 +177,7 @@ export class JazzDialog {
   `,
 })
 export class ContentElementDialog {
-  actionsAlignment: string;
+  actionsAlignment: 'start' | 'center' | 'end';
 
   constructor(public dialog: MatDialog) {}
 
diff --git a/src/dev-app/mdc-dialog/mdc-dialog-demo.ts b/src/dev-app/mdc-dialog/mdc-dialog-demo.ts
index f294b14f4293..92e750ea9738 100644
--- a/src/dev-app/mdc-dialog/mdc-dialog-demo.ts
+++ b/src/dev-app/mdc-dialog/mdc-dialog-demo.ts
@@ -29,7 +29,7 @@ export class DialogDemo {
   dialogRef: MatDialogRef<JazzDialog> | null;
   lastAfterClosedResult: string;
   lastBeforeCloseResult: string;
-  actionsAlignment: string;
+  actionsAlignment: 'start' | 'center' | 'end';
   config = {
     disableClose: false,
     panelClass: 'custom-overlay-pane-class',
@@ -173,7 +173,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"
@@ -194,7 +194,7 @@ export class JazzDialog {
   `,
 })
 export class ContentElementDialog {
-  actionsAlignment: string;
+  actionsAlignment: 'start' | 'center' | 'end';
 
   constructor(public dialog: MatDialog) {}
 
diff --git a/src/material-experimental/mdc-dialog/dialog-content-directives.ts b/src/material-experimental/mdc-dialog/dialog-content-directives.ts
index 3daa9f0db283..ea444e87addc 100644
--- a/src/material-experimental/mdc-dialog/dialog-content-directives.ts
+++ b/src/material-experimental/mdc-dialog/dialog-content-directives.ts
@@ -141,9 +141,18 @@ export class MatDialogContent {}
  */
 @Directive({
   selector: `[mat-dialog-actions], mat-dialog-actions, [matDialogActions]`,
-  host: {'class': 'mat-mdc-dialog-actions mdc-dialog__actions'},
+  host: {
+    'class': 'mat-mdc-dialog-actions mdc-dialog__actions',
+    '[class.mat-mdc-dialog-actions-align-center]': 'align === "center"',
+    '[class.mat-mdc-dialog-actions-align-end]': 'align === "end"',
+  },
 })
-export class MatDialogActions {}
+export class MatDialogActions {
+  /**
+   * Horizontal alignment of action buttons.
+   */
+  @Input() align?: 'start' | 'center' | 'end' = 'start';
+}
 
 /**
  * Finds the closest MatDialogRef to an element by looking at the DOM.
diff --git a/src/material-experimental/mdc-dialog/dialog.scss b/src/material-experimental/mdc-dialog/dialog.scss
index 1479e5f62eaa..0eec7117019e 100644
--- a/src/material-experimental/mdc-dialog/dialog.scss
+++ b/src/material-experimental/mdc-dialog/dialog.scss
@@ -29,13 +29,14 @@ $mat-dialog-button-horizontal-margin: 8px !default;
   // aligns actions at the end of the container.
   justify-content: start;
 
-  &[align='end'] {
-    justify-content: flex-end;
-  }
-
-  &[align='center'] {
+  // .mat-mdc-dialog-actions-align-{center|end} are set by directive input "align"
+  // [align='center'] and [align='right'] are kept for backwards compability
+  &.mat-mdc-dialog-actions-align-center, &[align='center'] {
     justify-content: center;
   }
+  &.mat-mdc-dialog-actions-align-end, &[align='end'] {
+    justify-content: flex-end;
+  }
 
   // MDC applies horizontal margin to buttons that have an explicit `mdc-dialog__button`
   // class applied. We can't set this class for projected buttons that consumers of the
diff --git a/src/material-experimental/mdc-dialog/dialog.spec.ts b/src/material-experimental/mdc-dialog/dialog.spec.ts
index dbe52a813f74..6c51b2dd8763 100644
--- a/src/material-experimental/mdc-dialog/dialog.spec.ts
+++ b/src/material-experimental/mdc-dialog/dialog.spec.ts
@@ -1670,6 +1670,17 @@ describe('MDC-based MatDialog', () => {
           .withContext('Expected the aria-labelledby to match the title id.')
           .toBe(title.id);
       }));
+
+      it('should add correct css class according to given [align] input in [mat-dialog-actions]', () => {
+        let actions = overlayContainerElement.querySelector('mat-dialog-actions')!;
+
+        expect(actions)
+          .withContext('Expected action buttons to not have class align-center')
+          .not.toHaveClass('mat-mdc-dialog-actions-align-center');
+        expect(actions)
+          .withContext('Expected action buttons to have class align-end')
+          .toHaveClass('mat-mdc-dialog-actions-align-end');
+      });
     }
   });
 
@@ -2072,7 +2083,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
@@ -2091,7 +2102,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
diff --git a/src/material/dialog/dialog-content-directives.ts b/src/material/dialog/dialog-content-directives.ts
index 5c782353e57a..2b5f44715da0 100644
--- a/src/material/dialog/dialog-content-directives.ts
+++ b/src/material/dialog/dialog-content-directives.ts
@@ -145,9 +145,18 @@ 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 {
+  /**
+   * Horizontal alignment of action buttons.
+   */
+  @Input() align?: 'start' | 'center' | 'end' = 'start';
+}
 
 /**
  * Finds the closest MatDialogRef to an element by looking at the DOM.
diff --git a/src/material/dialog/dialog.scss b/src/material/dialog/dialog.scss
index ca5f92cde2af..6ba8ad382925 100644
--- a/src/material/dialog/dialog.scss
+++ b/src/material/dialog/dialog.scss
@@ -56,13 +56,14 @@ $button-margin: 8px !default;
   // Pull the actions down to avoid their padding stacking with the dialog's padding.
   margin-bottom: -$padding;
 
-  &[align='end'] {
-    justify-content: flex-end;
-  }
-
-  &[align='center'] {
+  // .mat-dialog-actions-align-{center|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 1bcd69157086..c874e01e4389 100644
--- a/src/material/dialog/dialog.spec.ts
+++ b/src/material/dialog/dialog.spec.ts
@@ -1733,6 +1733,18 @@ describe('MatDialog', () => {
           .withContext('Expected the aria-labelledby to match the title id.')
           .toBe(title.id);
       }));
+
+      it('should add correct css class according to given [align] input in [mat-dialog-actions]', () => {
+        let actions = overlayContainerElement.querySelector('mat-dialog-actions')!;
+
+        expect(actions)
+          .withContext('Expected action buttons to not have class mat-dialog-actions-align-center')
+          .not.toHaveClass('mat-dialog-actions-align-center');
+
+        expect(actions)
+          .withContext('Expected action buttons to have class mat-dialog-actions-align-end')
+          .toHaveClass('mat-dialog-actions-align-end');
+      });
     }
   });
 
@@ -2116,7 +2128,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
@@ -2135,7 +2147,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
diff --git a/tools/public_api_guard/material/dialog.md b/tools/public_api_guard/material/dialog.md
index 35da0a953e73..dbebade3802a 100644
--- a/tools/public_api_guard/material/dialog.md
+++ b/tools/public_api_guard/material/dialog.md
@@ -96,8 +96,9 @@ export class MatDialog extends _MatDialogBase<MatDialogContainer> {
 
 // @public
 export class MatDialogActions {
+    align?: 'start' | 'center' | 'end';
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogActions, "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogActions, "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", never, { "align": "align"; }, {}, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogActions, never>;
 }