fix(material/dialog): Use align as @input() in MatDialogActions

Squashed commit of the following: commit 1d6daeadf8e06e38c64fec724d5a8d2899b502d3 Merge: 3276432 3a98da8 Author: Jean-Philippe Green <[email protected]> Date: Mon Jan 31 19:24:24 2022 +0100 Merge branch 'master' into align-attr-as-input-in-dialog-actions-angular#18479-2 commit 3276432 Merge: 815cf8f 1f40b7d Author: Jean-Philippe <[email protected]> Date: Mon Jan 31 18:54:42 2022 +0100 Merge branch 'angular:master' into align-attr-as-input-in-dialog-actions-angular#18479-2 commit 815cf8f Author: Jean-Philippe Green <[email protected]> Date: Mon Jan 10 01:23:12 2022 +0100 Use directive binding in mdc-dialog demo for align commit 77fca70 Author: Jean-Philippe Green <[email protected]> Date: Mon Jan 10 01:20:43 2022 +0100 Change actionsAlignment type in dialog demo commit c87c4aa Author: Jean-Philippe Green <[email protected]> Date: Mon Jan 10 00:21:57 2022 +0100 Revert weird changes to dialog.spec.ts commit d6deb45 Author: Jean-Philippe <[email protected]> Date: Sun Jan 9 23:30:24 2022 +0100 Use 'start' as default instead of undefined for align attribute in dialog actions commit 8d367c1 Author: Jean-Philippe <[email protected]> Date: Sun Jan 9 23:05:54 2022 +0100 Update comments in dialog.scss for more clarity commit 9d2ac16 Merge: 54d0a60 3de4ab8 Author: Jean-Philippe <[email protected]> Date: Sun Jan 9 22:33:13 2022 +0100 Merge branch 'angular:master' into align-attr-as-input-in-dialog-actions-angular#18479 commit 54d0a60 Merge: 462d407 c79e1d1 Author: Jean-Philippe Green <[email protected]> Date: Wed Jan 5 21:30:29 2022 +0100 Merge branch 'angular-master' into align-attr-as-input-in-dialog-actions-angular#18479 commit c79e1d1 Merge: 462d407 03485cd Author: Jean-Philippe Green <[email protected]> Date: Wed Jan 5 21:23:17 2022 +0100 Merge branch 'master' of https://github.com/angular/components into angular-master commit 462d407 Author: Jean-Philippe Green <[email protected]> Date: Fri Dec 25 16:18:08 2020 +0100 fix(material-experimental/mdc-dialog): make align attr into an input of dialog actions directive 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 angular#18479 for material-experimental commit c101f7f Author: Jean-Philippe Green <[email protected]> Date: Fri Dec 25 16:15:01 2020 +0100 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 angular#18479
forsti0506 · Feb 1, 2022 · d7a9cbb · d7a9cbb
1 parent a74d92e
commit d7a9cbb
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 24 deletions.
diff --git 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
@@ -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
@@ -141,9 +141,15 @@ 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 {
+  @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
@@ -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
@@ -1670,6 +1670,17 @@ describe('MDC-based MatDialog', () => {
           .withContext('Expected the aria-labelledby to match the title id.')
           .toBe(title.id);
       }));
+
+      it('should add mat-mdc-dialog-actions-align-* 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')
+          .not.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
@@ -145,9 +145,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?: '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
@@ -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
@@ -1733,6 +1733,18 @@ describe('MatDialog', () => {
           .withContext('Expected the aria-labelledby to match the title id.')
           .toBe(title.id);
       }));
+
+      it('should add mat-dialog-actions-align-* 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