From f2f46d700fa958a770968059751a8d31f20777c2 Mon Sep 17 00:00:00 2001
From: Livvie Lin <livvielin@chromium.org>
Date: Fri, 6 Mar 2020 16:44:04 -0800
Subject: [PATCH 1/5] Spruce up the basic toolbar example

---
 .../material/toolbar/BUILD.bazel                   |  1 +
 src/components-examples/material/toolbar/index.ts  |  2 ++
 .../toolbar-overview/toolbar-overview-example.css  |  4 +++-
 .../toolbar-overview/toolbar-overview-example.html | 14 +++++++++++++-
 4 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components-examples/material/toolbar/BUILD.bazel b/src/components-examples/material/toolbar/BUILD.bazel
index 697af78b3d34..3e5860303aa7 100644
--- a/src/components-examples/material/toolbar/BUILD.bazel
+++ b/src/components-examples/material/toolbar/BUILD.bazel
@@ -11,6 +11,7 @@ ng_module(
     ]),
     module_name = "@angular/components-examples/material/toolbar",
     deps = [
+        "//src/material/button",
         "//src/material/icon",
         "//src/material/toolbar",
     ],
diff --git a/src/components-examples/material/toolbar/index.ts b/src/components-examples/material/toolbar/index.ts
index 46c434f8f024..5b288f01ecaf 100644
--- a/src/components-examples/material/toolbar/index.ts
+++ b/src/components-examples/material/toolbar/index.ts
@@ -1,4 +1,5 @@
 import {NgModule} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {ToolbarMultirowExample} from './toolbar-multirow/toolbar-multirow-example';
@@ -16,6 +17,7 @@ const EXAMPLES = [
 
 @NgModule({
   imports: [
+    MatButtonModule,
     MatIconModule,
     MatToolbarModule,
   ],
diff --git a/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.css b/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.css
index 7432308753e6..9633d1593c37 100644
--- a/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.css
+++ b/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+.example-spacer {
+  flex: 1 1 auto;
+}
diff --git a/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.html b/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.html
index 05520fda8642..8673c06f0ba9 100644
--- a/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.html
+++ b/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.html
@@ -1 +1,13 @@
-<mat-toolbar>My App</mat-toolbar>
+<mat-toolbar>
+	<button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
+		<mat-icon>menu</mat-icon>
+	</button>
+	<span>My App</span>
+	<span class="example-spacer"></span>
+	<button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
+		<mat-icon>favorite</mat-icon>
+	</button>
+	<button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
+	    <mat-icon>share</mat-icon>
+	</button>
+</mat-toolbar>

From 9a11697ccf97c02930809d534c479d251bb9feb1 Mon Sep 17 00:00:00 2001
From: Livvie Lin <livvielin@chromium.org>
Date: Fri, 20 Mar 2020 10:31:59 -0700
Subject: [PATCH 2/5] Add additional examples to overview and add to dev-app

---
 .../material/toolbar/index.ts                 |  3 ++
 .../toolbar-basic/toolbar-basic-example.css   |  3 ++
 .../toolbar-basic/toolbar-basic-example.html  | 13 ++++++
 .../toolbar-basic/toolbar-basic-example.ts    | 11 +++++
 .../toolbar-overview-example.html             | 41 +++++++++++++++++++
 .../toolbar-overview-example.ts               |  2 +-
 src/dev-app/toolbar/BUILD.bazel               |  1 +
 src/dev-app/toolbar/toolbar-demo-module.ts    |  2 +
 src/dev-app/toolbar/toolbar-demo.html         |  4 ++
 9 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.css
 create mode 100644 src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.html
 create mode 100644 src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.ts

diff --git a/src/components-examples/material/toolbar/index.ts b/src/components-examples/material/toolbar/index.ts
index 5b288f01ecaf..2a8e778d5600 100644
--- a/src/components-examples/material/toolbar/index.ts
+++ b/src/components-examples/material/toolbar/index.ts
@@ -2,15 +2,18 @@ import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {MatToolbarModule} from '@angular/material/toolbar';
+import {ToolbarBasicExample} from './toolbar-basic/toolbar-basic-example';
 import {ToolbarMultirowExample} from './toolbar-multirow/toolbar-multirow-example';
 import {ToolbarOverviewExample} from './toolbar-overview/toolbar-overview-example';
 
 export {
+  ToolbarBasicExample,
   ToolbarMultirowExample,
   ToolbarOverviewExample,
 };
 
 const EXAMPLES = [
+  ToolbarBasicExample,
   ToolbarMultirowExample,
   ToolbarOverviewExample,
 ];
diff --git a/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.css b/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.css
new file mode 100644
index 000000000000..9633d1593c37
--- /dev/null
+++ b/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.css
@@ -0,0 +1,3 @@
+.example-spacer {
+  flex: 1 1 auto;
+}
diff --git a/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.html b/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.html
new file mode 100644
index 000000000000..8673c06f0ba9
--- /dev/null
+++ b/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.html
@@ -0,0 +1,13 @@
+<mat-toolbar>
+	<button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
+		<mat-icon>menu</mat-icon>
+	</button>
+	<span>My App</span>
+	<span class="example-spacer"></span>
+	<button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
+		<mat-icon>favorite</mat-icon>
+	</button>
+	<button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
+	    <mat-icon>share</mat-icon>
+	</button>
+</mat-toolbar>
diff --git a/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.ts b/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.ts
new file mode 100644
index 000000000000..26926aeb7721
--- /dev/null
+++ b/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Basic toolbar
+ */
+@Component({
+  selector: 'toolbar-basic-example',
+  templateUrl: 'toolbar-basic-example.html',
+  styleUrls: ['toolbar-basic-example.css'],
+})
+export class ToolbarBasicExample {}
diff --git a/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.html b/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.html
index 8673c06f0ba9..333a5b136684 100644
--- a/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.html
+++ b/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.html
@@ -1,3 +1,4 @@
+<p>
 <mat-toolbar>
 	<button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
 		<mat-icon>menu</mat-icon>
@@ -11,3 +12,43 @@
 	    <mat-icon>share</mat-icon>
 	</button>
 </mat-toolbar>
+</p>
+
+<p>
+<mat-toolbar color="primary">
+  <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
+    <mat-icon>menu</mat-icon>
+  </button>
+  <span>My App</span>
+  <span class="example-spacer"></span>
+  <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
+    <mat-icon>favorite</mat-icon>
+  </button>
+  <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
+      <mat-icon>share</mat-icon>
+  </button>
+</mat-toolbar>
+</p>
+
+<p>
+<mat-toolbar color="primary">
+  <mat-toolbar-row>
+    <span>My App</span>
+    <span class="example-spacer"></span>
+    <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
+      <mat-icon>menu</mat-icon>
+    </button>
+  </mat-toolbar-row>
+
+  <mat-toolbar-row>
+    <span>Second Line</span>
+    <span class="example-spacer"></span>
+    <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
+      <mat-icon>favorite</mat-icon>
+    </button>
+    <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
+        <mat-icon>share</mat-icon>
+    </button>
+  </mat-toolbar-row>
+</mat-toolbar>
+</p>
\ No newline at end of file
diff --git a/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.ts b/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.ts
index a6de4d6ad2c5..c7b64540c9dc 100644
--- a/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.ts
+++ b/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.ts
@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 
 /**
- * @title Basic toolbar
+ * @title Overview toolbar
  */
 @Component({
   selector: 'toolbar-overview-example',
diff --git a/src/dev-app/toolbar/BUILD.bazel b/src/dev-app/toolbar/BUILD.bazel
index 78ffdcd42fc7..92be27a8927a 100644
--- a/src/dev-app/toolbar/BUILD.bazel
+++ b/src/dev-app/toolbar/BUILD.bazel
@@ -10,6 +10,7 @@ ng_module(
         ":toolbar_demo_scss",
     ],
     deps = [
+        "//src/components-examples/material/toolbar",
         "//src/material/button",
         "//src/material/form-field",
         "//src/material/icon",
diff --git a/src/dev-app/toolbar/toolbar-demo-module.ts b/src/dev-app/toolbar/toolbar-demo-module.ts
index 5626df14db3e..0529dcdae599 100644
--- a/src/dev-app/toolbar/toolbar-demo-module.ts
+++ b/src/dev-app/toolbar/toolbar-demo-module.ts
@@ -15,6 +15,7 @@ import {MatSelectModule} from '@angular/material/select';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {RouterModule} from '@angular/router';
 import {ToolbarDemo} from './toolbar-demo';
+import {ToolbarExamplesModule} from '@angular/components-examples/material/toolbar';
 
 @NgModule({
   imports: [
@@ -24,6 +25,7 @@ import {ToolbarDemo} from './toolbar-demo';
     MatInputModule,
     MatSelectModule,
     MatToolbarModule,
+    ToolbarExamplesModule,
     RouterModule.forChild([{path: '', component: ToolbarDemo}]),
   ],
   declarations: [ToolbarDemo],
diff --git a/src/dev-app/toolbar/toolbar-demo.html b/src/dev-app/toolbar/toolbar-demo.html
index bd84ff2b9895..a895623f5a70 100644
--- a/src/dev-app/toolbar/toolbar-demo.html
+++ b/src/dev-app/toolbar/toolbar-demo.html
@@ -1,4 +1,8 @@
 <div class="demo-toolbar">
+  <p>
+    <toolbar-overview-example></toolbar-overview-example>
+  </p>
+
   <p>
     <mat-toolbar>
       <button mat-icon-button>

From 0f8052391060a27db1267f3daff319d6adce2354 Mon Sep 17 00:00:00 2001
From: Livvie Lin <livvielin@chromium.org>
Date: Fri, 20 Mar 2020 10:43:18 -0700
Subject: [PATCH 3/5] Fix indentation

---
 .../toolbar-basic/toolbar-basic-example.html  |  2 +-
 .../toolbar-overview-example.html             | 64 +++++++++----------
 2 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.html b/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.html
index 8673c06f0ba9..59a97c37b899 100644
--- a/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.html
+++ b/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.html
@@ -8,6 +8,6 @@
 		<mat-icon>favorite</mat-icon>
 	</button>
 	<button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
-	    <mat-icon>share</mat-icon>
+		<mat-icon>share</mat-icon>
 	</button>
 </mat-toolbar>
diff --git a/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.html b/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.html
index 333a5b136684..885fbfccb41c 100644
--- a/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.html
+++ b/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.html
@@ -1,22 +1,6 @@
 <p>
-<mat-toolbar>
-	<button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
-		<mat-icon>menu</mat-icon>
-	</button>
-	<span>My App</span>
-	<span class="example-spacer"></span>
-	<button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
-		<mat-icon>favorite</mat-icon>
-	</button>
-	<button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
-	    <mat-icon>share</mat-icon>
-	</button>
-</mat-toolbar>
-</p>
-
-<p>
-<mat-toolbar color="primary">
-  <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
+  <mat-toolbar>
+   <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
     <mat-icon>menu</mat-icon>
   </button>
   <span>My App</span>
@@ -25,30 +9,46 @@
     <mat-icon>favorite</mat-icon>
   </button>
   <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
-      <mat-icon>share</mat-icon>
-  </button>
+   <mat-icon>share</mat-icon>
+ </button>
 </mat-toolbar>
 </p>
 
 <p>
-<mat-toolbar color="primary">
-  <mat-toolbar-row>
-    <span>My App</span>
-    <span class="example-spacer"></span>
+  <mat-toolbar color="primary">
     <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
       <mat-icon>menu</mat-icon>
     </button>
-  </mat-toolbar-row>
-
-  <mat-toolbar-row>
-    <span>Second Line</span>
+    <span>My App</span>
     <span class="example-spacer"></span>
     <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
       <mat-icon>favorite</mat-icon>
     </button>
     <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
-        <mat-icon>share</mat-icon>
+      <mat-icon>share</mat-icon>
     </button>
-  </mat-toolbar-row>
-</mat-toolbar>
-</p>
\ No newline at end of file
+  </mat-toolbar>
+</p>
+
+<p>
+  <mat-toolbar color="primary">
+    <mat-toolbar-row>
+      <span>My App</span>
+      <span class="example-spacer"></span>
+      <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
+        <mat-icon>menu</mat-icon>
+      </button>
+    </mat-toolbar-row>
+
+    <mat-toolbar-row>
+      <span>Second Line</span>
+      <span class="example-spacer"></span>
+      <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
+        <mat-icon>favorite</mat-icon>
+      </button>
+      <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
+        <mat-icon>share</mat-icon>
+      </button>
+    </mat-toolbar-row>
+  </mat-toolbar>
+</p>

From d320281dd90978005b54f87a9b8bfb45dbe31f76 Mon Sep 17 00:00:00 2001
From: Livvie Lin <livvielin@chromium.org>
Date: Fri, 20 Mar 2020 10:45:30 -0700
Subject: [PATCH 4/5] Convert tabs to spaces

---
 .../toolbar-basic/toolbar-basic-example.html  | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.html b/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.html
index 59a97c37b899..5499e0bd14e9 100644
--- a/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.html
+++ b/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.html
@@ -1,13 +1,13 @@
 <mat-toolbar>
-	<button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
-		<mat-icon>menu</mat-icon>
-	</button>
-	<span>My App</span>
-	<span class="example-spacer"></span>
-	<button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
-		<mat-icon>favorite</mat-icon>
-	</button>
-	<button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
-		<mat-icon>share</mat-icon>
-	</button>
+  <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
+    <mat-icon>menu</mat-icon>
+  </button>
+  <span>My App</span>
+  <span class="example-spacer"></span>
+  <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
+    <mat-icon>favorite</mat-icon>
+  </button>
+  <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
+    <mat-icon>share</mat-icon>
+  </button>
 </mat-toolbar>

From 3fd4bff27fff65be087fdacc5b66a30e04aa6b9f Mon Sep 17 00:00:00 2001
From: Livvie Lin <livvielin@chromium.org>
Date: Fri, 24 Apr 2020 10:24:45 -0700
Subject: [PATCH 5/5] Update toolbar-overview-example title

---
 .../toolbar/toolbar-overview/toolbar-overview-example.ts        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.ts b/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.ts
index c7b64540c9dc..c45e57c01bdb 100644
--- a/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.ts
+++ b/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.ts
@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 
 /**
- * @title Overview toolbar
+ * @title Toolbar overview
  */
 @Component({
   selector: 'toolbar-overview-example',