fix(fab-button): use correct background in list and update the md ico…

…n color (#16092)

* fix(fab): separate the mode colors and update the md icon color

-md icon color matches spec by adding 0.54 opacity to the color

fixes #16091

* fix(fab): update the font size for buttons in a fab list

* fix(fab-button): update box-shadow for both states

* fix(fab-button): update transition to match md spec

core/src/components/fab-button/fab-button.ios.scss

@@ -5,6 +5,12 @@
 // --------------------------------------------------
 
 :host {
+  --background: #{$fab-ios-background-color};
+  --background-activated: #{$fab-ios-background-color-activated};
+  --background-focused: var(--background-activated);
+  --color: #{$fab-ios-text-color};
+  --color-activated: #{$fab-ios-text-color};
+  --color-focused: var(--color-activated);
   --box-shadow: #{$fab-ios-box-shadow};
   --transition: #{$fab-ios-transition};
 }
@@ -25,13 +31,17 @@
 
 :host(.fab-button-in-list) {
   --background: #{$fab-ios-list-button-background-color};
+  --background-activated: #{$fab-ios-list-button-background-color-activated};
+  --background-focused: var(--background-activated);
   --color: #{$fab-ios-list-button-text-color};
+  --color-activated: #{$fab-ios-list-button-text-color};
+  --color-focused: var(--color-activated);
   --transition: #{transform 200ms ease 10ms,
               opacity 200ms ease 10ms};
 }
 
-:host(.fab-button-in-list.activated) {
-  --background: #{$fab-ios-list-button-background-color-activated};
+:host(.fab-button-in-list) ::slotted(ion-icon) {
+  font-size: $fab-ios-list-button-icon-font-size;
 }
 
 

core/src/components/fab-button/fab-button.ios.vars.scss

@@ -21,6 +21,9 @@ $fab-ios-transition-activated:                                .2s transform ease
 /// @prop - Background color of the button
 $fab-ios-background-color:                                    ion-color(primary, base) !default;
 
+/// @prop - Background color of the activated button
+$fab-ios-background-color-activated:                          ion-color(primary, shade) !default;
+
 /// @prop - Background color alpha of the button in translucent mode
 $fab-ios-translucent-background-color-alpha:                  .9 !default;
 
@@ -36,26 +39,23 @@ $fab-ios-icon-fill-color:                                     $fab-ios-text-colo
 /// @prop - Font size of the button icon
 $fab-ios-icon-font-size:                                      28px !default;
 
-/// @prop - Background color of the activated button
-$fab-ios-background-color-activated:                          ion-color(primary, tint) !default;
-
 /// @prop - Background color of the button in a list
 $fab-ios-list-button-background-color:                        ion-color(light, base) !default;
 
-/// @prop - Background color of the button in a list
-$fab-ios-list-button-translucent-background-color-alpha:      .8 !default;
-
-/// @prop - Background color of the button in a list
-$fab-ios-list-button-translucent-background-color:            rgba(var(--ion-background-color-rgb, $background-color-rgb), $fab-ios-list-button-translucent-background-color-alpha) !default;
+/// @prop - Background color of the activated button in a list
+$fab-ios-list-button-background-color-activated:              ion-color(light, shade) !default;
 
 /// @prop - Text color of the button in a list
 $fab-ios-list-button-text-color:                              ion-color(light, contrast) !default;
 
-/// @prop - Color of the button icon in a list
-$fab-ios-list-button-icon-fill-color:                         $fab-ios-list-button-text-color !default;
+/// @prop - Font size of the button icon in a list
+$fab-ios-list-button-icon-font-size:                          18px !default;
 
-/// @prop - Background color of the activated button in a list
-$fab-ios-list-button-background-color-activated:              ion-color(primary, tint) !default;
+/// @prop - Background color of the button in a list
+$fab-ios-list-button-translucent-background-color-alpha:      .8 !default;
+
+/// @prop - Background color of the button in a list
+$fab-ios-list-button-translucent-background-color:            rgba(var(--ion-background-color-rgb, $background-color-rgb), $fab-ios-list-button-translucent-background-color-alpha) !default;
 
 /// @prop - Filter of the translucent fab
 $fab-ios-translucent-filter:                                  saturate(180%) blur(20px) !default;

core/src/components/fab-button/fab-button.md.scss

@@ -5,11 +5,19 @@
 // --------------------------------------------------
 
 :host {
+  --background: #{$fab-md-background-color};
+  --background-activated: #{$fab-md-background-color-activated};
+  --background-focused: var(--background-activated);
+  --color: #{$fab-md-text-color};
+  --color-activated: #{$fab-md-text-color};
+  --color-focused: var(--color-activated);
   --box-shadow: #{$fab-md-box-shadow};
   --transition: #{
-    box-shadow 300ms cubic-bezier(.4, 0, .2, 1),
-    background-color 300ms cubic-bezier(.4, 0, .2, 1),
-    color 300ms cubic-bezier(.4, 0, .2, 1)
+    box-shadow 280ms cubic-bezier(.4, 0, .2, 1),
+    background-color 280ms cubic-bezier(.4, 0, .2, 1),
+    color 280ms cubic-bezier(.4, 0, .2, 1),
+    opacity 15ms linear 30ms,
+    transform 270ms cubic-bezier(0, 0, .2, 1) 0ms
   };
 }
 
@@ -19,7 +27,7 @@
 
 ::slotted(ion-icon),
 .close-icon {
-  font-size: 24px;
+  font-size: $fab-md-icon-font-size;
 }
 
 
@@ -28,16 +36,13 @@
 
 :host(.fab-button-in-list) {
   --color: #{$fab-md-list-button-text-color};
+  --color-activated: #{$fab-md-list-button-text-color};
+  --color-focused: var(--color-activated);
   --background: #{$fab-md-list-button-background-color};
-  --transition: #{
-    transform 200ms ease 10ms ease 10ms
-    opacity 200ms ease 10ms ease 10ms
-    box-shadow 300ms cubic-bezier(.4, 0, .2, 1)
-    background-color 300ms cubic-bezier(.4, 0, .2, 1)
-    color 300ms cubic-bezier(.4, 0, .2, 1)
-  };
+  --background-activated: #{$fab-md-list-button-background-color-activated};
+  --background-focused: var(--background-activated);
 }
 
-:host(.fab-button-in-list.activated) {
-  --background: #{$fab-md-list-button-background-color-activated};
-}
+:host(.fab-button-in-list) ::slotted(ion-icon) {
+  font-size: $fab-md-list-button-icon-font-size;
+}

core/src/components/fab-button/fab-button.md.vars.scss

@@ -4,31 +4,31 @@
 // --------------------------------------------------
 
 /// @prop - Box shadow of the FAB button
-$fab-md-box-shadow:                               0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;
+$fab-md-box-shadow:                               0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12) !default;
 
 /// @prop - Box shadow of the activated FAB button
-$fab-md-box-shadow-activated:                     0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;
+$fab-md-box-shadow-activated:                     0 7px 8px -4px rgba(0, 0, 0, .2), 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12) !default;
 
 /// @prop - Background color of the button
 $fab-md-background-color:                         ion-color(primary, base) !default;
 
+/// @prop - Background color of the activated button
+$fab-md-background-color-activated:               ion-color(primary, shade) !default;
+
 /// @prop - Text color of the button
 $fab-md-text-color:                               ion-color(primary, contrast) !default;
 
-/// @prop - Color of the button icon
-$fab-md-icon-fill-color:                          $fab-md-text-color !default;
-
-/// @prop - Background color of the activated button
-$fab-md-background-color-activated:               ion-color(primary, tint) !default;
+/// @prop - Font size of the button icon
+$fab-md-icon-font-size:                           24px !default;
 
 /// @prop - Background color of the button in a list
 $fab-md-list-button-background-color:             ion-color(light, base) !default;
 
-/// @prop - Text color of the button in a list
-$fab-md-list-button-text-color:                   ion-color(light, contrast) !default;
+/// @prop - Background color of the activated button in a list
+$fab-md-list-button-background-color-activated:   ion-color(light, shade) !default;
 
-/// @prop - Color of the button icon in a list
-$fab-md-list-button-icon-fill-color:              $fab-md-list-button-text-color !default;
+/// @prop - Text color of the button in a list
+$fab-md-list-button-text-color:                   rgba(var(--ion-text-color-rgb, $text-color-rgb), 0.54) !default;
 
-/// @prop - Background color of the activated button in a list
-$fab-md-list-button-background-color-activated:   ion-color(primary, tint) !default;
+/// @prop - Font size of the button icon in a list
+$fab-md-list-button-icon-font-size:               18px !default;

core/src/components/fab-button/fab-button.scss

@@ -37,12 +37,6 @@
    * @prop --padding-bottom: Padding bottom of the button
    * @prop --padding-start: Padding start of the button
    */
-  --background: #{ion-color(primary, base)};
-  --background-activated: #{ion-color(primary, shade)};
-  --background-focused: #{ion-color(primary, shade)};
-  --color: #{ion-color(primary, contrast)};
-  --color-activated: #{ion-color(primary, contrast)};
-  --color-focused: var(--color-activated);
   --width: #{$fab-size};
   --height: var(--width);
   --margin-start: calc((#{$fab-size} - var(--width)) / 2);

core/src/components/fab-button/test/standalone/index.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8">
   <title>Floating Action Button - Standalone</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../css/core.css" rel="stylesheet">
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../dist/ionic.js"></script>
 </head>
@@ -14,8 +14,14 @@
   <h3>Default</h3>
   <p>
     <ion-fab-button>Default</ion-fab-button>
-    <ion-fab-button mini>Mini</ion-fab-button>
     <ion-fab-button><ion-icon name="star"></ion-icon></ion-fab-button>
+    <ion-fab-button mini>Mini</ion-fab-button>
+    <ion-fab-button mini><ion-icon name="star"></ion-icon></ion-fab-button>
+    <ion-fab-button class="fab-button-in-list">In List</ion-fab-button>
+    <ion-fab-button class="fab-button-in-list"><ion-icon name="heart"></ion-icon></ion-fab-button>
+    <ion-fab-button mini class="fab-button-in-list"><ion-icon name="star"></ion-icon></ion-fab-button>
+    <ion-fab-button class="fab-button-in-list activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
+    <ion-fab-button mini class="fab-button-in-list activated"><ion-icon name="star"></ion-icon></ion-fab-button>
   </p>
 
   <h3>Colors</h3>
@@ -52,6 +58,14 @@ <h3>Custom</h3>
   <ion-fab-button class="custom activated"><ion-icon name="star"></ion-icon></ion-fab-button>
   <ion-fab-button color="secondary" class="custom"><ion-icon name="heart"></ion-icon></ion-fab-button>
 
+  <!-- Custom Colors Fab In List -->
+  <ion-fab-button class="fab-button-in-list custom-white">White</ion-fab-button>
+  <ion-fab-button class="fab-button-in-list custom-white activated">White</ion-fab-button>
+  <ion-fab-button class="fab-button-in-list custom-white"><ion-icon name="heart"></ion-icon></ion-fab-button>
+  <ion-fab-button class="fab-button-in-list custom-white activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
+  <ion-fab-button class="fab-button-in-list custom-blue"><ion-icon name="star"></ion-icon></ion-fab-button>
+  <ion-fab-button class="fab-button-in-list custom-blue activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+
   <style>
     ion-fab-button {
       display: inline-block;
@@ -68,6 +82,16 @@ <h3>Custom</h3>
       --color: blue;
       --color-activated: white;
     }
+
+    .custom-white {
+      --background: white;
+      --background-activated: #f6f6f6;
+    }
+
+    .custom-blue {
+      --background: #add8e6;
+      --background-activated: #7cb2c4;
+    }
   </style>
 </body>
 </html>

core/src/components/fab/test/basic/index.html

@@ -41,8 +41,8 @@
           <ion-fab-button onclick="openSocial('vimeo', 'fab1')">
             <ion-icon name="logo-vimeo"></ion-icon>
           </ion-fab-button>
-          <ion-fab-button onclick="openSocial('googleplus', 'fab1')">
-            <ion-icon name="logo-googleplus"></ion-icon>
+          <ion-fab-button onclick="openSocial('instagram', 'fab1')">
+            <ion-icon name="logo-instagram"></ion-icon>
           </ion-fab-button>
         </ion-fab-list>
       </ion-fab>
@@ -61,8 +61,8 @@
           <ion-fab-button onclick="openSocial('vimeo', 'fab2')">
             <ion-icon name="logo-vimeo"></ion-icon>
           </ion-fab-button>
-          <ion-fab-button onclick="openSocial('googleplus', 'fab2')">
-            <ion-icon name="logo-googleplus"></ion-icon>
+          <ion-fab-button onclick="openSocial('instagram', 'fab2')">
+            <ion-icon name="logo-instagram"></ion-icon>
           </ion-fab-button>
         </ion-fab-list>
       </ion-fab>
@@ -81,8 +81,8 @@
           <ion-fab-button onclick="openSocial('vimeo', 'fab3')">
             <ion-icon name="logo-vimeo"></ion-icon>
           </ion-fab-button>
-          <ion-fab-button onclick="openSocial('googleplus', 'fab3')">
-            <ion-icon name="logo-googleplus"></ion-icon>
+          <ion-fab-button onclick="openSocial('instagram', 'fab3')">
+            <ion-icon name="logo-instagram"></ion-icon>
           </ion-fab-button>
         </ion-fab-list>
       </ion-fab>
@@ -101,8 +101,8 @@
           <ion-fab-button onclick="openSocial('vimeo', 'fab4')">
             <ion-icon name="logo-vimeo"></ion-icon>
           </ion-fab-button>
-          <ion-fab-button onclick="openSocial('googleplus', 'fab4')">
-            <ion-icon name="logo-googleplus"></ion-icon>
+          <ion-fab-button onclick="openSocial('instagram', 'fab4')">
+            <ion-icon name="logo-instagram"></ion-icon>
           </ion-fab-button>
         </ion-fab-list>
       </ion-fab>
@@ -122,8 +122,8 @@
           </ion-fab-button>
         </ion-fab-list>
         <ion-fab-list side="start">
-          <ion-fab-button onclick="openSocial('googleplus', 'fab5')" color="light">
-            <ion-icon name="logo-googleplus"></ion-icon>
+          <ion-fab-button onclick="openSocial('instagram', 'fab5')" color="light">
+            <ion-icon name="logo-instagram"></ion-icon>
           </ion-fab-button>
         </ion-fab-list>
         <ion-fab-list side="end">

core/src/components/fab/test/preview/index.html

@@ -41,8 +41,8 @@
           <ion-fab-button onclick="openSocial('vimeo', 'fab1')">
             <ion-icon name="logo-vimeo"></ion-icon>
           </ion-fab-button>
-          <ion-fab-button onclick="openSocial('googleplus', 'fab1')">
-            <ion-icon name="logo-googleplus"></ion-icon>
+          <ion-fab-button onclick="openSocial('instagram', 'fab1')">
+            <ion-icon name="logo-instagram"></ion-icon>
           </ion-fab-button>
         </ion-fab-list>
       </ion-fab>
@@ -61,8 +61,8 @@
           <ion-fab-button onclick="openSocial('vimeo', 'fab2')">
             <ion-icon name="logo-vimeo"></ion-icon>
           </ion-fab-button>
-          <ion-fab-button onclick="openSocial('googleplus', 'fab2')">
-            <ion-icon name="logo-googleplus"></ion-icon>
+          <ion-fab-button onclick="openSocial('instagram', 'fab2')">
+            <ion-icon name="logo-instagram"></ion-icon>
           </ion-fab-button>
         </ion-fab-list>
       </ion-fab>
@@ -81,8 +81,8 @@
           <ion-fab-button onclick="openSocial('vimeo', 'fab3')">
             <ion-icon name="logo-vimeo"></ion-icon>
           </ion-fab-button>
-          <ion-fab-button onclick="openSocial('googleplus', 'fab3')">
-            <ion-icon name="logo-googleplus"></ion-icon>
+          <ion-fab-button onclick="openSocial('instagram', 'fab3')">
+            <ion-icon name="logo-instagram"></ion-icon>
           </ion-fab-button>
         </ion-fab-list>
       </ion-fab>
@@ -101,8 +101,8 @@
           <ion-fab-button onclick="openSocial('vimeo', 'fab4')">
             <ion-icon name="logo-vimeo"></ion-icon>
           </ion-fab-button>
-          <ion-fab-button onclick="openSocial('googleplus', 'fab4')">
-            <ion-icon name="logo-googleplus"></ion-icon>
+          <ion-fab-button onclick="openSocial('instagram', 'fab4')">
+            <ion-icon name="logo-instagram"></ion-icon>
           </ion-fab-button>
         </ion-fab-list>
       </ion-fab>
@@ -122,8 +122,8 @@
           </ion-fab-button>
         </ion-fab-list>
         <ion-fab-list side="start">
-          <ion-fab-button onclick="openSocial('googleplus', 'fab5')" color="light">
-            <ion-icon name="logo-googleplus"></ion-icon>
+          <ion-fab-button onclick="openSocial('instagram', 'fab5')" color="light">
+            <ion-icon name="logo-instagram"></ion-icon>
           </ion-fab-button>
         </ion-fab-list>
         <ion-fab-list side="end">

core/src/components/fab/test/standalone/index.html

@@ -18,7 +18,7 @@
       <ion-fab-button onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
       <ion-fab-button onclick="openSocial('twitter', 'fab2')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
       <ion-fab-button onclick="openSocial('vimeo', 'fab2')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
-      <ion-fab-button onclick="openSocial('googleplus', 'fab2')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
+      <ion-fab-button onclick="openSocial('instagram', 'fab2')"><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
     </ion-fab-list>
   </ion-fab>
 
@@ -28,7 +28,7 @@
       <ion-fab-button onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
       <ion-fab-button onclick="openSocial('twitter', 'fab3')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
       <ion-fab-button onclick="openSocial('vimeo', 'fab3')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
-      <ion-fab-button onclick="openSocial('googleplus', 'fab3')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
+      <ion-fab-button onclick="openSocial('instagram', 'fab3')"><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
     </ion-fab-list>
   </ion-fab>
 
@@ -38,7 +38,7 @@
       <ion-fab-button onclick="openSocial('facebook', 'fab4')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
       <ion-fab-button onclick="openSocial('twitter', 'fab4')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
       <ion-fab-button onclick="openSocial('vimeo', 'fab4')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
-      <ion-fab-button onclick="openSocial('googleplus', 'fab4')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
+      <ion-fab-button onclick="openSocial('instagram', 'fab4')"><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
     </ion-fab-list>
   </ion-fab>
 
@@ -51,7 +51,7 @@
       <ion-fab-button onclick="openSocial('facebook', 'fab5')" color="secondary"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
     </ion-fab-list>
     <ion-fab-list side="start">
-      <ion-fab-button onclick="openSocial('googleplus', 'fab5')" color="light"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
+      <ion-fab-button onclick="openSocial('instagram', 'fab5')" color="light"><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
     </ion-fab-list>
     <ion-fab-list side="end">
       <ion-fab-button onclick="openSocial('twitter', 'fab5')" color="dark"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>