feat(toolbar): support dense mode

* Adds support for the dense mode that is being shown in the Material Design specifications.

Closes #11878

Author: devversion

src/demo-app/toolbar/toolbar-demo.html

@@ -1,6 +1,9 @@
 <div class="demo-toolbar">
   <p>
-    <mat-toolbar>
+    <mat-checkbox [(ngModel)]="dense">Toggle Dense Mode</mat-checkbox>
+  </p>
+  <p>
+    <mat-toolbar [dense]="dense">
       <button mat-icon-button>
         <mat-icon>menu</mat-icon>
       </button>
@@ -20,7 +23,7 @@
   </p>
 
   <p>
-    <mat-toolbar color="primary">
+    <mat-toolbar color="primary" [dense]="dense">
       <button mat-icon-button>
         <mat-icon>menu</mat-icon>
       </button>
@@ -35,7 +38,7 @@
   </p>
 
   <p>
-    <mat-toolbar color="accent">
+    <mat-toolbar color="accent" [dense]="dense">
       <button mat-icon-button>
         <mat-icon>menu</mat-icon>
       </button>
@@ -55,7 +58,7 @@
   </p>
 
   <p>
-    <mat-toolbar>
+    <mat-toolbar [dense]="dense">
       <mat-toolbar-row>First Row</mat-toolbar-row>
       <mat-toolbar-row>Second Row</mat-toolbar-row>
     </mat-toolbar>

src/demo-app/toolbar/toolbar-demo.ts

@@ -15,4 +15,6 @@ import {Component} from '@angular/core';
   templateUrl: 'toolbar-demo.html',
   styleUrls: ['toolbar-demo.css'],
 })
-export class ToolbarDemo {}
+export class ToolbarDemo {
+  dense = false;
+}

src/lib/toolbar/toolbar.scss

@@ -2,17 +2,31 @@
 @import '../../cdk/a11y/a11y';
 
 $mat-toolbar-height-desktop: 64px !default;
-$mat-toolbar-height-mobile-portrait: 56px !default;
-$mat-toolbar-height-mobile-landscape: 48px !default;
+$mat-toolbar-height-mobile: 56px !default;
+$mat-toolbar-height-dense: 48px !default;
 
 $mat-toolbar-row-padding: 16px !default;
 
+/** @deprecated @deletion-target 8.0.0 */
+$mat-toolbar-height-mobile-portrait: 56px !default;
+
+/** @deprecated @deletion-target 8.0.0 */
+$mat-toolbar-height-mobile-landscape: 48px !default;
+
 
-@mixin mat-toolbar-height($height) {
-  .mat-toolbar-multiple-rows {
+// In order to avoid breaking changes with an increase of specificity, we introduce the
+// `$target-selector` parameter. This allows us to target specific toolbars with a selector
+// (e.g. `.mat-toolbar-dense`), or just set the height for the default toolbar classes.
+@mixin mat-toolbar-height($height, $target-selector: '') {
+  // If the toolbar has multiple rows, only set a minimum height to not limit the height of the
+  // toolbar because it should grow based on the amount of rows.
+  #{$target-selector}.mat-toolbar-multiple-rows {
     min-height: $height;
   }
-  .mat-toolbar-row, .mat-toolbar-single-row {
+
+  // If the toolbar element itself acts as the first row, set the height to the same value
+  // as an actual toolbar row would have.
+  .mat-toolbar-row, #{$target-selector}.mat-toolbar-single-row {
     height: $height;
   }
 }
@@ -49,10 +63,12 @@ $mat-toolbar-row-padding: 16px !default;
 // Set the default height for the toolbar.
 @include mat-toolbar-height($mat-toolbar-height-desktop);
 
-// As per specs, mobile devices will use a different height for toolbars than for desktop.
-// The height for mobile landscape devices has been ignored since relying on `@media orientation`
-// is causing issues on devices with a soft-keyboard.
-// See: https://material.io/guidelines/layout/structure.html#structure-app-bar
+// Set the toolbar height for toolbar's displaying in dense mode.
+@include mat-toolbar-height($mat-toolbar-height-dense, '.mat-toolbar-dense');
+
+// As per specs, toolbars should have a different height in mobile devices. This has been
+// specified in the old guidelines and is still observable in the new specifications by looking at
+// the spec images. See: https://material.io/design/components/app-bars-top.html#anatomy
 @media ($mat-xsmall) {
-  @include mat-toolbar-height($mat-toolbar-height-mobile-portrait);
+  @include mat-toolbar-height($mat-toolbar-height-mobile);
 }

src/lib/toolbar/toolbar.spec.ts

@@ -44,6 +44,19 @@ describe('MatToolbar', () => {
       expect(toolbarElement.classList.contains('mat-warn')).toBe(true);
     });
 
+    it('should apply proper class based on dense input binding', () => {
+      fixture.detectChanges();
+
+      expect(toolbarElement.classList)
+        .not.toContain('mat-toolbar-dense', 'Expected the toolbar to not show in dense mode.');
+
+      testComponent.dense = true;
+      fixture.detectChanges();
+
+      expect(toolbarElement.classList)
+        .toContain('mat-toolbar-dense', 'Expected the toolbar to show in dense mode.');
+    });
+
     it('should not wrap the first row contents inside of a generated element', () => {
       expect(toolbarElement.firstElementChild!.tagName).toBe('SPAN',
           'Expected the <span> element of the first row to be a direct child of the toolbar');
@@ -91,13 +104,14 @@ describe('MatToolbar', () => {
 
 @Component({
   template: `
-    <mat-toolbar [color]="toolbarColor">
+    <mat-toolbar [color]="toolbarColor" [dense]="dense">
       <span>First Row</span>
     </mat-toolbar>
   `
 })
 class ToolbarSingleRow {
   toolbarColor: string;
+  dense = false;
 }
 
 @Component({

src/lib/toolbar/toolbar.ts

@@ -6,21 +6,23 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import {Platform} from '@angular/cdk/platform';
+import {DOCUMENT} from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
   Component,
   ContentChildren,
   Directive,
   ElementRef,
+  Inject,
+  Input,
   isDevMode,
   QueryList,
   ViewEncapsulation,
-  Inject,
 } from '@angular/core';
 import {CanColor, mixinColor} from '@angular/material/core';
-import {Platform} from '@angular/cdk/platform';
-import {DOCUMENT} from '@angular/common';
 
 // Boilerplate for applying mixins to MatToolbar.
 /** @docs-private */
@@ -45,18 +47,29 @@ export class MatToolbarRow {}
   inputs: ['color'],
   host: {
     'class': 'mat-toolbar',
-    '[class.mat-toolbar-multiple-rows]': 'this._toolbarRows.length',
-    '[class.mat-toolbar-single-row]': '!this._toolbarRows.length'
+    '[class.mat-toolbar-multiple-rows]': '_toolbarRows.length > 0',
+    '[class.mat-toolbar-single-row]': '_toolbarRows.length === 0',
+    '[class.mat-toolbar-dense]': 'dense'
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
 export class MatToolbar extends _MatToolbarMixinBase implements CanColor, AfterViewInit {
+
   private _document: Document;
+  private _dense: boolean = false;
 
   /** Reference to all toolbar row elements that have been projected. */
   @ContentChildren(MatToolbarRow) _toolbarRows: QueryList<MatToolbarRow>;
 
+  /**
+   * Whether the toolbar should display in dense mode. It is recommended to only enable
+   * this mode on desktop devices.
+   */
+  @Input()
+  get dense(): boolean { return this._dense; }
+  set dense(value: boolean) { this._dense = coerceBooleanProperty(value); }
+
   constructor(
     elementRef: ElementRef,
     private _platform: Platform,