Merge branch 'master' into SIvanova/change-filtering-icon

Author: simeonoff

CHANGELOG.md

@@ -50,6 +50,8 @@ The following example shows how you can use the Indigo theme:
 
 
 ### New Features
+- `igxButton` directive
+    - Added styles to support extended fab buttons.
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - Introduced `showSummaryOnCollapse` grid property which allows you to control whether the summary row stays visible when the groupBy / parent row is collapsed.
     - Added support for tooltips on data cells default template and summary cells.

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,15 +516,15 @@
 
 
     $button-floating-padding: (
-        comfortable: rem(15px),
-        cosy: rem(11px),
-        compact: rem(7px)
+        comfortable: rem(8px) rem(16px),
+        cosy: rem(4px) rem(12px),
+        compact: 0 rem(8px)
     );
 
     $button-floating-size: (
-        comfortable: rem(56px),
-        cosy: rem(48px),
-        compact: rem(40px)
+        comfortable: rem(48px),
+        cosy: rem(40px),
+        compact: rem(32px)
     );
 
     $icon-in-button-size: rem(18px);
@@ -762,18 +764,37 @@
             background: --var($theme, 'fab-focus-background');
             box-shadow: $fab-shadow--focus;
         }
+
+        igx-icon {
+            display: inline-flex;
+            order: -1;
+            margin: rem(8px) 0;
+        }
+
+        * + igx-icon {
+            margin: 0;
+            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 {
@@ -849,4 +870,15 @@
             text-align: center;
         }
     }
+
+    %igx-button--fab {
+        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>