feat(tooltip): align with 2018 material design spec (#12310)

Adjusts the tooltip to align it with the new Material design spec.
angular · Jul 29, 2018 · 4e358c3 · 4e358c3
1 parent e074003
commit 4e358c3
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/src/lib/tooltip/_tooltip-theme.scss b/src/lib/tooltip/_tooltip-theme.scss
@@ -6,7 +6,7 @@ $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-target-height: 30px;
 $mat-tooltip-handset-font-size: 14px;
 $mat-tooltip-handset-vertical-padding:
     ($mat-tooltip-handset-target-height - $mat-tooltip-handset-font-size) / 2;

diff --git a/src/lib/tooltip/tooltip-animations.ts b/src/lib/tooltip/tooltip-animations.ts
@@ -7,11 +7,12 @@
  */
 import {
   animate,
+  AnimationTriggerMetadata,
+  keyframes,
   state,
   style,
   transition,
   trigger,
-  AnimationTriggerMetadata,
 } from '@angular/animations';
 
 /** Animations used by MatTooltip. */
@@ -20,9 +21,13 @@ export const matTooltipAnimations: {
 } = {
   /** Animation that transitions a tooltip in and out. */
   tooltipState: trigger('state', [
-    state('initial, void, hidden', style({transform: 'scale(0)'})),
+    state('initial, void, hidden', style({opacity: 0, transform: 'scale(0)'})),
     state('visible', style({transform: 'scale(1)'})),
-    transition('* => visible', animate('150ms cubic-bezier(0.0, 0.0, 0.2, 1)')),
-    transition('* => hidden', animate('150ms cubic-bezier(0.4, 0.0, 1, 1)')),
+    transition('* => visible', animate('200ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
+      style({opacity: 0, transform: 'scale(0)', offset: 0}),
+      style({opacity: 0.5, transform: 'scale(0.99)', offset: 0.5}),
+      style({opacity: 1, transform: 'scale(1)', offset: 1})
+    ]))),
+    transition('* => hidden', animate('100ms cubic-bezier(0, 0, 0.2, 1)', style({opacity: 0}))),
   ])
 };
diff --git a/src/lib/tooltip/tooltip.scss b/src/lib/tooltip/tooltip.scss
@@ -17,7 +17,7 @@ $mat-tooltip-handset-margin: 24px;
 
 .mat-tooltip {
   color: white;
-  border-radius: 2px;
+  border-radius: 4px;
   margin: $mat-tooltip-margin;
   max-width: $mat-tooltip-max-width;
   padding-left: $mat-tooltip-horizontal-padding;