fix(button-group): Add ellipsis

Author: MPopov

projects/igniteui-angular/src/lib/buttonGroup/buttongroup-content.component.html

@@ -11,10 +11,10 @@
         [igxLabel]="button.label"
         [igxRipple]="button.ripple"
     >
-        <div class="igx-button-group__item-content {{ itemContentCssClass }}">
+        <span class="igx-button-group__item-content {{ itemContentCssClass }}">
             <igx-icon *ngIf="button.icon" fontSet="material">{{button.icon}}</igx-icon>
-            <span *ngIf="button.label">{{button.label}}</span>
-        </div>
+            <span class="igx-button-group__button-text" *ngIf="button.label">{{button.label}}</span>
+        </span>
     </button>
     <ng-content></ng-content>
 </div>

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

@@ -15,6 +15,10 @@
         @extend %igx-group-item !optional;
     }
 
+    @include e(button-text) {
+        @extend %igx-button-group__button-text !optional;
+    }
+
     @include e(item, $m: selected) {
         @extend %igx-group-item !optional;
         @extend %igx-group-item-selected !optional;

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

@@ -185,11 +185,10 @@
         display: flex;
         box-shadow: --var($theme, 'shadow');
         transition: $transition;
-        border-radius: --var($theme, 'border-radius')
+        border-radius: --var($theme, 'border-radius');
     }
 
     %igx-group-item {
-        @include ellipsis();
         border: $group-item-border-thickness solid --var($theme, 'item-border-color');
         color: --var($theme, 'item-text-color');
         background: --var($theme, 'item-background');
@@ -307,13 +306,16 @@
     %igx-group-item-content {
         display: flex;
         flex-flow: row nowrap;
-        justify-content: center;
-        align-items: center;
-        text-align: center;
+        min-width: 0;
 
         * ~ * {
             margin-#{$left}: $group-items-margin;
         }
     }
+
+    %igx-button-group__button-text {
+        width: 100%;
+        @include ellipsis();
+    }
 }
 

src/app/buttonGroup/buttonGroup.sample.html

@@ -46,8 +46,14 @@ <h4 class="sample-title">Custom class to style the content</h4>
         <article class="sample-column">
             <h4 class="sample-title">Templated buttons.</h4>
             <igx-buttongroup [multiSelection]="false">
-                <button igxButton><igx-icon>alarm_on</igx-icon>Button 1 text</button>
-                <button igxButton><igx-icon>autorenew</igx-icon>Button 2 text</button>
+                <button igxButton>
+                    <igx-icon>alarm_on</igx-icon>
+                    Button 1 text
+                </button>
+                <button igxButton>
+                    <igx-icon>autorenew</igx-icon>
+                    Button 2 text<
+                </button>
             </igx-buttongroup>
         </article>