Merge branch 'master' into expose-grid-active-node-evt

Author: ddincheva

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;
+            }
+        }
+    }
 }

projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss

@@ -22,6 +22,7 @@
         flex-grow: 1;
         box-shadow: igx-elevation($elevations, 12);
         overflow: auto;
+        min-width: rem(320px);
     }
 
     %grid-excel-filter--inline {
@@ -58,10 +59,9 @@
         display: flex;
         flex-direction: column;
         height: 100%;
-        width: 320px;
-        min-width: 320px;
         background: --var($theme, 'filtering-row-background');
-        border-radius: 4px;
+        // TODO The border-radius should not be hardcoded.
+        border-radius: rem(4px);
 
         @include igx-button-group(igx-button-group-theme(
             $shadow: none,

projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html

@@ -7,7 +7,7 @@
     </ng-container>
 </span>
 <div class="igx-grid__th-icons" *ngIf="!column.columnGroup">
-    <igx-icon 
+    <igx-icon
         [attr.draggable]="false"
         [attr.data-sortIndex]="column.field | sortingIndex:grid.sortingExpressions"
         class="sort-icon"
@@ -18,6 +18,6 @@
 
     <igx-icon [ngClass]="filterIconClassName" [attr.draggable]="false" (click)="onFilteringIconClick($event)"
         *ngIf="grid.allowFiltering == true && column.filterable && grid.filterMode == 'excelStyleFilter'">
-        filter_list
+        more_vert
     </igx-icon>
 </div>

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>