feat(dialog): add the ability to align the content of md-dialog-actions (#2557)

* feat(dialog): add the ability to align the content of md-dialog-actions

Adds the `align` attribute, which can be set to `end` or `middle`, that allows users to align the content of the `md-dialog-actions`.

Fixes #2483.

* Fix linter error.

* Rename "middle" to "center".

Author: crisbeto

src/demo-app/dialog/dialog-demo.html

@@ -26,6 +26,14 @@ <h2>Dialog position</h2>
 
     <h2>Other options</h2>
 
+    <p>
+      <md-select placeholder="Button alignment" [(ngModel)]="actionsAlignment">
+        <md-option>Start</md-option>
+        <md-option value="end">End</md-option>
+        <md-option value="center">Center</md-option>
+      </md-select>
+    </p>
+
     <md-checkbox [(ngModel)]="config.disableClose">Disable close</md-checkbox>
   </md-card-content>
 </md-card>

src/demo-app/dialog/dialog-demo.ts

@@ -10,6 +10,7 @@ import {MdDialog, MdDialogRef, MdDialogConfig} from '@angular/material';
 export class DialogDemo {
   dialogRef: MdDialogRef<JazzDialog>;
   lastCloseResult: string;
+  actionsAlignment: string;
   config: MdDialogConfig = {
     disableClose: false,
     width: '',
@@ -34,7 +35,8 @@ export class DialogDemo {
   }
 
   openContentElement() {
-    this.dialog.open(ContentElementDialog, this.config);
+    let dialogRef = this.dialog.open(ContentElementDialog, this.config);
+    dialogRef.componentInstance.actionsAlignment = this.actionsAlignment;
   }
 }
 
@@ -78,7 +80,7 @@ export class JazzDialog {
       </p>
     </md-dialog-content>
 
-    <md-dialog-actions>
+    <md-dialog-actions [attr.align]="actionsAlignment">
       <button
         md-raised-button
         color="primary"
@@ -92,4 +94,6 @@ export class JazzDialog {
     </md-dialog-actions>
   `
 })
-export class ContentElementDialog { }
+export class ContentElementDialog {
+  actionsAlignment: string;
+}

src/lib/dialog/README.md

@@ -37,7 +37,7 @@ A reference to the dialog created by the MdDialog `open` method.
 | `md-dialog-title`   | Marks the title of the dialog.
 | `md-dialog-content` | Scrollable content of the dialog.
 | `md-dialog-close`   | When added to a `button`, makes the element act as a close button for the dialog.
-| `md-dialog-actions` | Wrapper for the set of actions at the bottom of a dialog. Typically contains buttons.
+| `md-dialog-actions` | Wrapper for the set of actions at the bottom of a dialog. Typically contains buttons. The element's content can be aligned via the `align` attribute either to the `center` or the `end`. |
 
 ## Example
 The service can be injected in a component.

src/lib/dialog/dialog.scss

@@ -43,12 +43,20 @@ md-dialog-content, [md-dialog-content], mat-dialog-content, [mat-dialog-content]
 
 md-dialog-actions, [md-dialog-actions], mat-dialog-actions, [mat-dialog-actions] {
   padding: $md-dialog-padding / 2 0;
-  display: block;
+  display: flex;
 
   &:last-child {
     // If the actions are the last element in a dialog, we need to pull them down
     // over the dialog padding, in order to avoid the action's padding stacking
     // with the dialog's.
     margin-bottom: -$md-dialog-padding;
   }
+
+  &[align='end'] {
+    justify-content: flex-end;
+  }
+
+  &[align='center'] {
+    justify-content: center;
+  }
 }