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

@@ -216,6 +216,11 @@
         &[igxButton] {
             border-radius: 0;
             border-color: var-get($theme, 'item-border-color');
+
+            @if $bootstrap-theme {
+                margin: 0 !important;
+                border: none;
+            }
         }
 
         &:not(:nth-child(0)) {

projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts

@@ -627,6 +627,25 @@ describe('IgxGrid - GroupBy #grid', () => {
         expect(grid.groupingExpressionsChange.emit).toHaveBeenCalledTimes(0);
     }));
 
+    it('should emit groupingExpressionsChange when a group is sorted through the chip', fakeAsync(() => {
+        const fix = TestBed.createComponent(DefaultGridComponent);
+        fix.detectChanges();
+
+        // group by string column
+        const grid = fix.componentInstance.instance;
+        fix.detectChanges();
+        grid.groupBy({
+            fieldName: 'ReleaseDate', dir: SortingDirection.Asc, ignoreCase: false
+        }); 
+        fix.detectChanges();
+        spyOn(grid.groupingExpressionsChange, 'emit');
+        fix.detectChanges();
+        const chips = grid.groupArea.chips;
+        grid.groupArea.handleClick(chips.first.id);
+        fix.detectChanges();
+        expect(grid.groupingExpressionsChange.emit).toHaveBeenCalledTimes(1);
+    }));
+
     it('should group unbound column with custom grouping strategy', fakeAsync(() => {
         const fix = TestBed.createComponent(GroupableGridComponent);
         fix.componentInstance.data.forEach((r, i) => {

projects/igniteui-angular/src/lib/grids/grouping/group-by-area.directive.ts

@@ -24,7 +24,7 @@ import { IgxColumnMovingDragDirective } from '../moving/moving.drag.directive';
  *
  * @hidden @internal
  */
- @Directive()
+@Directive()
 export abstract class IgxGroupByAreaDirective {
     /**
      * The drop area template if provided by the parent grid.
@@ -37,7 +37,7 @@ export abstract class IgxGroupByAreaDirective {
     public density: DisplayDensity = DisplayDensity.comfortable;
 
     @HostBinding('class.igx-grid-grouparea')
-    public defaultClass =  true;
+    public defaultClass = true;
 
     @HostBinding('class.igx-grid-grouparea--cosy')
     public get cosyStyle() {
@@ -118,7 +118,7 @@ export abstract class IgxGroupByAreaDirective {
         this.updateGroupSorting(id);
     }
 
-     public onDragDrop(event) {
+    public onDragDrop(event) {
         const drag: IgxColumnMovingDragDirective = event.detail.owner;
         if (drag instanceof IgxColumnMovingDragDirective) {
             const column = drag.column;
@@ -161,6 +161,8 @@ export abstract class IgxGroupByAreaDirective {
     protected updateGroupSorting(id: string) {
         const expr = this.expressions.find(e => e.fieldName === id);
         expr.dir = 3 - expr.dir;
+        const expressionsChangeEvent = this.grid.groupingExpressionsChange || this.expressionsChange;
+        expressionsChangeEvent.emit(this.expressions);
         this.grid.pipeTrigger++;
         this.grid.notifyChanges();
     }