From 63a5588e47a176a98cf35a655e42247860d05847 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 31 Jan 2018 01:08:20 +0100
Subject: [PATCH] fix(tooltip): match mobile dimensions from spec (#9181)

Updates the various tooltip dimensions to match [the spec on mobile](https://material.io/guidelines/components/tooltips.html#tooltips-tooltips-mobile).

Fixes #9039.
---
 src/lib/tooltip/BUILD.bazel         |  1 +
 src/lib/tooltip/_tooltip-theme.scss | 13 +++++++++++--
 src/lib/tooltip/tooltip-module.ts   |  2 ++
 src/lib/tooltip/tooltip.html        |  1 +
 src/lib/tooltip/tooltip.scss        |  9 +++++++++
 src/lib/tooltip/tooltip.spec.ts     |  2 +-
 src/lib/tooltip/tooltip.ts          |  8 +++++++-
 7 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/lib/tooltip/BUILD.bazel b/src/lib/tooltip/BUILD.bazel
index 8a59608c8ed..18db7a1828e 100644
--- a/src/lib/tooltip/BUILD.bazel
+++ b/src/lib/tooltip/BUILD.bazel
@@ -18,6 +18,7 @@ ng_module(
     "//src/cdk/keycodes",
     "//src/cdk/portal",
     "//src/cdk/scrolling",
+    "//src/cdk/layout",
     "@rxjs",
   ],
   tsconfig = ":tsconfig-build.json",
diff --git a/src/lib/tooltip/_tooltip-theme.scss b/src/lib/tooltip/_tooltip-theme.scss
index 43e929f51a2..240530cdf00 100644
--- a/src/lib/tooltip/_tooltip-theme.scss
+++ b/src/lib/tooltip/_tooltip-theme.scss
@@ -2,12 +2,15 @@
 @import '../core/theming/theming';
 @import '../core/typography/typography-utils';
 
-// TODO(crisbeto): these doesn't correspond to any typography levels
-// and the width/height appear to be off from the spec.
 $mat-tooltip-target-height: 22px;
 $mat-tooltip-font-size: 10px;
 $mat-tooltip-vertical-padding: ($mat-tooltip-target-height - $mat-tooltip-font-size) / 2;
 
+$mat-tooltip-handset-target-height: 32px;
+$mat-tooltip-handset-font-size: 14px;
+$mat-tooltip-handset-vertical-padding:
+    ($mat-tooltip-handset-target-height - $mat-tooltip-handset-font-size) / 2;
+
 @mixin mat-tooltip-theme($theme) {
   .mat-tooltip {
     background: mat-color($mat-grey, 700, 0.9);
@@ -21,4 +24,10 @@ $mat-tooltip-vertical-padding: ($mat-tooltip-target-height - $mat-tooltip-font-s
     padding-top: $mat-tooltip-vertical-padding;
     padding-bottom: $mat-tooltip-vertical-padding;
   }
+
+  .mat-tooltip-handset {
+    font-size: $mat-tooltip-handset-font-size;
+    padding-top: $mat-tooltip-handset-vertical-padding;
+    padding-bottom: $mat-tooltip-handset-vertical-padding;
+  }
 }
diff --git a/src/lib/tooltip/tooltip-module.ts b/src/lib/tooltip/tooltip-module.ts
index fe4db38a49f..f81e48cffd8 100644
--- a/src/lib/tooltip/tooltip-module.ts
+++ b/src/lib/tooltip/tooltip-module.ts
@@ -12,6 +12,7 @@ import {PlatformModule} from '@angular/cdk/platform';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatCommonModule} from '@angular/material/core';
+import {LayoutModule} from '@angular/cdk/layout';
 import {
   MAT_TOOLTIP_SCROLL_STRATEGY_PROVIDER,
   MAT_TOOLTIP_DEFAULT_OPTIONS,
@@ -27,6 +28,7 @@ import {
     MatCommonModule,
     PlatformModule,
     A11yModule,
+    LayoutModule,
   ],
   exports: [MatTooltip, TooltipComponent, MatCommonModule],
   declarations: [MatTooltip, TooltipComponent],
diff --git a/src/lib/tooltip/tooltip.html b/src/lib/tooltip/tooltip.html
index 8f9981cf2e2..22268ef9a94 100644
--- a/src/lib/tooltip/tooltip.html
+++ b/src/lib/tooltip/tooltip.html
@@ -1,5 +1,6 @@
 <div class="mat-tooltip"
      [ngClass]="tooltipClass"
+     [class.mat-tooltip-handset]="(_isHandset | async)!.matches"
      [style.transform-origin]="_transformOrigin"
      [@state]="_visibility"
      (@state.start)="_animationStart()"
diff --git a/src/lib/tooltip/tooltip.scss b/src/lib/tooltip/tooltip.scss
index e3bb19b162a..6fd498b0bc5 100644
--- a/src/lib/tooltip/tooltip.scss
+++ b/src/lib/tooltip/tooltip.scss
@@ -5,6 +5,9 @@ $mat-tooltip-horizontal-padding: 8px;
 $mat-tooltip-max-width: 250px;
 $mat-tooltip-margin: 14px;
 
+$mat-tooltip-handset-horizontal-padding: 16px;
+$mat-tooltip-handset-margin: 24px;
+
 .mat-tooltip-panel {
   // The overlay reference updates the pointer-events style property directly on the HTMLElement
   // depending on the state of the overlay. For tooltips the overlay panel should never enable
@@ -24,3 +27,9 @@ $mat-tooltip-margin: 14px;
     outline: solid 1px;
   }
 }
+
+.mat-tooltip-handset {
+  margin: $mat-tooltip-handset-margin;
+  padding-left: $mat-tooltip-handset-horizontal-padding;
+  padding-right: $mat-tooltip-handset-horizontal-padding;
+}
diff --git a/src/lib/tooltip/tooltip.spec.ts b/src/lib/tooltip/tooltip.spec.ts
index f892f6e0f05..65cdcac3c2a 100644
--- a/src/lib/tooltip/tooltip.spec.ts
+++ b/src/lib/tooltip/tooltip.spec.ts
@@ -481,7 +481,7 @@ describe('MatTooltip', () => {
     it('should have consistent right transform origin in any dir', () => {
       // Move the button away from the edge of the screen so
       // we don't get into the fallback positions.
-      fixture.componentInstance.button.nativeElement.style.margin = '200px';
+      fixture.componentInstance.button.nativeElement.style.margin = '300px';
 
       tooltipDirective.position = 'left';
       tooltipDirective.show();
diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts
index 6fb19295033..f949bad0d28 100644
--- a/src/lib/tooltip/tooltip.ts
+++ b/src/lib/tooltip/tooltip.ts
@@ -45,6 +45,7 @@ import {
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 import {matTooltipAnimations} from './tooltip-animations';
+import {BreakpointObserver, Breakpoints, BreakpointState} from '@angular/cdk/layout';
 
 
 export type TooltipPosition = 'left' | 'right' | 'above' | 'below' | 'before' | 'after';
@@ -516,7 +517,12 @@ export class TooltipComponent {
   /** Subject for notifying that the tooltip has been hidden from the view */
   private readonly _onHide: Subject<any> = new Subject();
 
-  constructor(private _changeDetectorRef: ChangeDetectorRef) {}
+  /** Stream that emits whether the user has a handset-sized display.  */
+  _isHandset: Observable<BreakpointState> = this._breakpointObserver.observe(Breakpoints.Handset);
+
+  constructor(
+    private _changeDetectorRef: ChangeDetectorRef,
+    private _breakpointObserver: BreakpointObserver) {}
 
   /**
    * Shows the tooltip with an animation originating from the provided origin