From db8dc5b915324f8ed2eb527cc27ca5d1c2533818 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Fri, 6 Jan 2017 21:43:16 +0100
Subject: [PATCH] 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.
---
 src/demo-app/dialog/dialog-demo.html |  8 ++++++++
 src/demo-app/dialog/dialog-demo.ts   | 10 +++++++---
 src/lib/dialog/README.md             |  2 +-
 src/lib/dialog/dialog.scss           | 10 +++++++++-
 4 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/demo-app/dialog/dialog-demo.html b/src/demo-app/dialog/dialog-demo.html
index 491e8031393f..01f61e31037c 100644
--- a/src/demo-app/dialog/dialog-demo.html
+++ b/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="middle">Middle</md-option>
+      </md-select>
+    </p>
+
     <md-checkbox [(ngModel)]="config.disableClose">Disable close</md-checkbox>
   </md-card-content>
 </md-card>
diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts
index 7323d8f67173..1efe194bd31d 100644
--- a/src/demo-app/dialog/dialog-demo.ts
+++ b/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;
+}
diff --git a/src/lib/dialog/README.md b/src/lib/dialog/README.md
index 1b0a150dbe33..7e0b34ae9c2c 100644
--- a/src/lib/dialog/README.md
+++ b/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 `middle` or the `end`. |
 
 ## Example
 The service can be injected in a component.
diff --git a/src/lib/dialog/dialog.scss b/src/lib/dialog/dialog.scss
index 71119a2d11f8..e8cb01660d5f 100644
--- a/src/lib/dialog/dialog.scss
+++ b/src/lib/dialog/dialog.scss
@@ -43,7 +43,7 @@ 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
@@ -51,4 +51,12 @@ md-dialog-actions, [md-dialog-actions], mat-dialog-actions, [mat-dialog-actions]
     // with the dialog's.
     margin-bottom: -$md-dialog-padding;
   }
+
+  &[align="end"] {
+    justify-content: flex-end;
+  }
+
+  &[align="middle"] {
+    justify-content: center;
+  }
 }