refactor(button): add some touches to the expanded fab

Author: simeonoff

projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss

@@ -429,6 +429,8 @@
 @mixin igx-button($theme) {
     @include igx-root-css-vars($theme);
 
+    $left: if-ltr(left, right);
+    $right: if-ltr(right, left);
     $button-border: 1px solid transparent;
     $button-width: rem(88px);
 
@@ -514,9 +516,9 @@
 
 
     $button-floating-padding: (
-        comfortable: rem(8px) rem(20px) rem(8px) rem(12px),
-        cosy: rem(4px) rem(16px) rem(4px) rem(8px),
-        compact: 0 rem(12px) 0 rem(4px)
+        comfortable: rem(8px) rem(16px),
+        cosy: rem(4px) rem(12px),
+        compact: 0 rem(8px)
     );
 
     $button-floating-size: (
@@ -766,26 +768,33 @@
         igx-icon {
             display: inline-flex;
             order: -1;
-            margin: 7px 0;
-            padding-left: 4px;
+            margin: rem(8px) 0;
         }
 
         * + igx-icon {
             margin: 0;
-            margin-right: 12px;
+            margin-#{$right}: rem(12px);
         }
     }
 
     %igx-button--fab-cosy {
         padding: map-get($button-floating-padding, 'cosy');
         min-width: map-get($button-floating-size, 'cosy');
         min-height: map-get($button-floating-size, 'cosy');
+
+        * + igx-icon {
+            margin-#{$right}: rem(8px);
+        }
     }
 
     %igx-button--fab-compact {
         padding: map-get($button-floating-padding, 'compact');
         min-width: map-get($button-floating-size, 'compact');
         min-height: map-get($button-floating-size, 'compact');
+
+        * + igx-icon {
+            margin-#{$right}: rem(4px);
+        }
     }
 
     %igx-button--icon {
@@ -863,15 +872,11 @@
     }
 
     %igx-button--fab {
-        p,
-        span,
-        div
-        {
-            font-size: rem(12px);
-            letter-spacing: rem(.75px);
-            text-transform: uppercase;
-            font-weight: 700;
-            margin: 0;
+        p, span, div {
+            @include igx-type-style($type-scale, $text) {
+                text-align: center;
+                margin: 0;
+            }
         }
     }
 }

src/app/button/button.sample.html

@@ -24,7 +24,7 @@ <h4 class="sample-title">Flat Buttons</h4>
                     </div>
                 </div>
             </article>
-    
+
             <article class="sample-column">
                 <h4 class="sample-title">Raised Buttons</h4>
                 <div class="buttons-sample">
@@ -48,7 +48,7 @@ <h4 class="sample-title">Raised Buttons</h4>
                     </div>
                 </div>
             </article>
-    
+
             <article class="sample-column">
                 <h4 class="sample-title">Outlined Buttons</h4>
                 <div class="buttons-sample">
@@ -72,7 +72,7 @@ <h4 class="sample-title">Outlined Buttons</h4>
                     </div>
                 </div>
             </article>
-    
+
             <article class="sample-column">
                 <h4 class="sample-title">Floating Action Buttons</h4>
                 <div class="buttons-sample">
@@ -108,7 +108,7 @@ <h4 class="sample-title">Floating Action Buttons</h4>
                     </div>
                 </div>
             </article>
-    
+
             <article class="sample-column">
                 <h4 class="sample-title">Icon Buttons</h4>
                 <div class="buttons-sample">
@@ -179,7 +179,18 @@ <h4 class="sample-title">Buttons based on Display Density</h4>
                     </div>
                     <div class="button-sample">
                         <button igxRipple igxButton="fab" [displayDensity]="density">
-                            <igx-icon fontSet="material" >favorite</igx-icon>
+                            <igx-icon fontSet="material">favorite</igx-icon>
+                        </button>
+                    </div>
+                    <div class="button-sample">
+                        <button igxRipple igxButton="fab" [displayDensity]="density">
+                            <span>Favorite</span>
+                            <igx-icon fontSet="material">favorite</igx-icon>
+                        </button>
+                    </div>
+                    <div class="button-sample">
+                        <button igxRipple igxButton="fab" [displayDensity]="density">
+                            <span>Favorite</span>
                         </button>
                     </div>
                 </div>