From f2d7f7de59a14d7734eaaa10b11a923b48107f89 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Wed, 12 Sep 2018 19:07:17 +0200
Subject: [PATCH] feat(tabs): align with 2018 material design spec

Aligns the tabs component with the latest Material design spec and adds the ability to align the tab labels in the middle or the end of the container.
---
 src/lib/tabs/tab-header.scss                    |  8 ++++++++
 src/lib/tabs/tabs.md                            |  8 +++++++-
 .../tab-group-align/tab-group-align-example.css |  3 +++
 .../tab-group-align-example.html                | 17 +++++++++++++++++
 .../tab-group-align/tab-group-align-example.ts  | 11 +++++++++++
 5 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 src/material-examples/tab-group-align/tab-group-align-example.css
 create mode 100644 src/material-examples/tab-group-align/tab-group-align-example.html
 create mode 100644 src/material-examples/tab-group-align/tab-group-align-example.ts

diff --git a/src/lib/tabs/tab-header.scss b/src/lib/tabs/tab-header.scss
index 7cb991a472c5..3ecf4231fc6d 100644
--- a/src/lib/tabs/tab-header.scss
+++ b/src/lib/tabs/tab-header.scss
@@ -82,4 +82,12 @@
 
 .mat-tab-labels {
   display: flex;
+
+  [mat-align-tabs='center'] & {
+    justify-content: center;
+  }
+
+  [mat-align-tabs='end'] & {
+    justify-content: flex-end;
+  }
 }
diff --git a/src/lib/tabs/tabs.md b/src/lib/tabs/tabs.md
index 0685355dfce4..930b15738232 100644
--- a/src/lib/tabs/tabs.md
+++ b/src/lib/tabs/tabs.md
@@ -83,7 +83,7 @@ the `active` property to determine which tab is currently active. The correspond
 ### Lazy Loading
 By default, the tab contents are eagerly loaded. Eagerly loaded tabs
 will initalize the child components but not inject them into the DOM
-until the tab is activated. 
+until the tab is activated.
 
 
 If the tab contains several complex child components or the tab's contents
@@ -108,6 +108,12 @@ with the `matTabContent` attribute.
 </mat-tab-group>
 ```
 
+### Label alignment
+If you want to align the tab labels in the center or towards the end of the container, you can
+do so using the `[mat-align-tabs]` attribute.
+
+<!-- example(tab-group-align) -->
+
 ### Accessibility
 Tabs without text or labels should be given a meaningful label via `aria-label` or
 `aria-labelledby`. For `MatTabNav`, the `<nav>` element should have a label as well.
diff --git a/src/material-examples/tab-group-align/tab-group-align-example.css b/src/material-examples/tab-group-align/tab-group-align-example.css
new file mode 100644
index 000000000000..d0f47895f9f9
--- /dev/null
+++ b/src/material-examples/tab-group-align/tab-group-align-example.css
@@ -0,0 +1,3 @@
+.mat-tab-group {
+  margin-bottom: 48px;
+}
diff --git a/src/material-examples/tab-group-align/tab-group-align-example.html b/src/material-examples/tab-group-align/tab-group-align-example.html
new file mode 100644
index 000000000000..f01f02730a42
--- /dev/null
+++ b/src/material-examples/tab-group-align/tab-group-align-example.html
@@ -0,0 +1,17 @@
+<mat-tab-group mat-align-tabs="start">
+  <mat-tab label="First">Content 1</mat-tab>
+  <mat-tab label="Second">Content 2</mat-tab>
+  <mat-tab label="Third">Content 3</mat-tab>
+</mat-tab-group>
+
+<mat-tab-group mat-align-tabs="center">
+  <mat-tab label="First">Content 1</mat-tab>
+  <mat-tab label="Second">Content 2</mat-tab>
+  <mat-tab label="Third">Content 3</mat-tab>
+</mat-tab-group>
+
+<mat-tab-group mat-align-tabs="end">
+  <mat-tab label="First">Content 1</mat-tab>
+  <mat-tab label="Second">Content 2</mat-tab>
+  <mat-tab label="Third">Content 3</mat-tab>
+</mat-tab-group>
diff --git a/src/material-examples/tab-group-align/tab-group-align-example.ts b/src/material-examples/tab-group-align/tab-group-align-example.ts
new file mode 100644
index 000000000000..4a321ba38f0f
--- /dev/null
+++ b/src/material-examples/tab-group-align/tab-group-align-example.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Tab group with aligned labels
+ */
+@Component({
+  selector: 'tab-group-align-example',
+  templateUrl: 'tab-group-align-example.html',
+  styleUrls: ['tab-group-align-example.css'],
+})
+export class TabGroupAlignExample {}