fix(alert): match MD spec (#16145)

This updates our alert to match the updated Material Design spec, including enter/leave animations.
ionic-team · Oct 30, 2018 · 287aec8 · 287aec8
1 parent c2f5803
commit 287aec8
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 22 deletions.
diff --git a/core/src/components/alert/alert.md.scss b/core/src/components/alert/alert.md.scss
@@ -60,6 +60,10 @@
   @include padding($alert-md-message-empty-padding-top, $alert-md-message-empty-padding-end, $alert-md-message-empty-padding-bottom, $alert-md-message-empty-padding-start);
 }
 
+.alert-head + .alert-message {
+  padding-top: 0;
+}
+
 
 // Material Design Alert Input
 // --------------------------------------------------
@@ -255,7 +259,7 @@
 // --------------------------------------------------
 
 .alert-button-group {
-  @include padding($alert-md-button-group-padding-top, $alert-md-button-group-padding-end, $alert-md-button-group-padding-bottom, $alert-md-button-group-padding-start);
+  @include padding(8px);
 
   box-sizing: border-box;
 

diff --git a/core/src/components/alert/alert.md.vars.scss b/core/src/components/alert/alert.md.vars.scss
@@ -11,13 +11,13 @@ $alert-md-font-size:                          14px !default;
 $alert-md-max-width:                          280px !default;
 
 /// @prop - Border radius of the alert
-$alert-md-border-radius:                      2px !default;
+$alert-md-border-radius:                      4px !default;
 
 /// @prop - Background color of the alert
 $alert-md-background-color:                   $overlay-md-background-color !default;
 
 /// @prop - Box shadow color of the alert
-$alert-md-box-shadow:                         0 16px 20px rgba(0, 0, 0, .4) !default;
+$alert-md-box-shadow:                         0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12) !default;
 
 /// @prop - Padding top of the alert head
 $alert-md-head-padding-top:                   20px !default;
@@ -50,19 +50,19 @@ $alert-md-sub-title-font-size:                16px !default;
 $alert-md-sub-title-text-color:               $text-color !default;
 
 /// @prop - Padding top of the alert message
-$alert-md-message-padding-top:                0 !default;
+$alert-md-message-padding-top:                20px !default;
 
 /// @prop - Padding end of the alert message
 $alert-md-message-padding-end:                24px !default;
 
 /// @prop - Padding bottom of the alert message
-$alert-md-message-padding-bottom:             24px !default;
+$alert-md-message-padding-bottom:             $alert-md-message-padding-top !default;
 
 /// @prop - Padding start of the alert message
 $alert-md-message-padding-start:              $alert-md-message-padding-end !default;
 
 /// @prop - Font size of the alert message
-$alert-md-message-font-size:                  15px !default;
+$alert-md-message-font-size:                  16px !default;
 
 /// @prop - Text color of the alert message
 $alert-md-message-text-color:                 $text-color-step-450 !default;
@@ -121,18 +121,6 @@ $alert-md-input-placeholder-color:            $placeholder-text-color !default;
 /// @prop - Flex wrap of the alert button group
 $alert-md-button-group-flex-wrap:             wrap-reverse !default;
 
-/// @prop - Padding top of the alert button group
-$alert-md-button-group-padding-top:           5px !default;
-
-/// @prop - Padding end of the alert button group
-$alert-md-button-group-padding-end:           12px !default;
-
-/// @prop - Padding bottom of the alert button group
-$alert-md-button-group-padding-bottom:        7px !default;
-
-/// @prop - Padding start of the alert button group
-$alert-md-button-group-padding-start:         24px !default;
-
 /// @prop - Justify content of the alert button group
 $alert-md-button-group-justify-content:       flex-end !default;
 

diff --git a/core/src/components/alert/animations/md.enter.ts b/core/src/components/alert/animations/md.enter.ts
@@ -14,12 +14,12 @@ export function mdEnterAnimation(AnimationC: Animation, baseEl: HTMLElement): Pr
 
   backdropAnimation.fromTo('opacity', 0.01, 0.5);
 
-  wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1);
+  wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 0.9, 1);
 
   return Promise.resolve(baseAnimation
     .addElement(baseEl)
     .easing('ease-in-out')
-    .duration(200)
+    .duration(150)
     .add(backdropAnimation)
     .add(wrapperAnimation));
 }
diff --git a/core/src/components/alert/animations/md.leave.ts b/core/src/components/alert/animations/md.leave.ts
@@ -14,12 +14,12 @@ export function mdLeaveAnimation(AnimationC: Animation, baseEl: HTMLElement): Pr
 
   backdropAnimation.fromTo('opacity', 0.5, 0);
 
-  wrapperAnimation.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9);
+  wrapperAnimation.fromTo('opacity', 0.99, 0);
 
   return Promise.resolve(baseAnimation
     .addElement(baseEl)
     .easing('ease-in-out')
-    .duration(200)
+    .duration(150)
     .add(backdropAnimation)
     .add(wrapperAnimation));
 }