feat(button-group): update button group samples

live-editing/configs/ButtonGroupConfigGenerator.ts

@@ -10,45 +10,73 @@ export class ButtonGroupConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
 
-        // button group 1
+        // button group overview
         configs.push(new Config({
-            component: 'ButtonGroupSample1Component',
+            component: 'ButtonGroupOverviewComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
-        // button group 2
+        // button group layout
         configs.push(new Config({
-            component: 'ButtonGroupSample2Component',
+            component: 'ButtonGroupLayoutComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
-        // button group 3
+        // button group alignment
         configs.push(new Config({
-            component: 'ButtonGroupSample3Component',
+            component: 'ButtonGroupAlignmentComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
-        // button group 4
+        // button group custom toggle
         configs.push(new Config({
-            component: 'ButtonGroupSampleComponent',
+            component: 'ButtonGroupCustomToggleComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
-        // button group 5
+        // button group states
         configs.push(new Config({
-            component: 'ButtonGroupSample5Component',
+            component: 'ButtonGroupStatesComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 
-        // button group style
+        // button group interaction states
         configs.push(new Config({
-            component: 'ButtonGroupStyleComponent',
-            additionalFiles: ["/src/app/data-entries/buttonGroup/button-group-style/layout.scss"],
+            component: 'ButtonGroupInteractionStatesComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/buttonGroup/"
+        }));
+
+        // button group selection
+        configs.push(new Config({
+            component: 'ButtonGroupSelectionComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/buttonGroup/"
+        }));
+
+        // button group size
+        configs.push(new Config({
+            component: 'ButtonGroupSizeComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/buttonGroup/"
+        }));
+
+        // button group styling
+        configs.push(new Config({
+            component: 'ButtonGroupStylingComponent',
+            additionalFiles: ["/src/app/data-entries/buttonGroup/button-group-styling/layout.scss"],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/buttonGroup/"
+        }));
+
+        // button group tailwind styling
+        configs.push(new Config({
+            component: 'ButtonGroupTailwindStylingComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));

src/app/data-display/badge/badge-dot/badge-dot.component.scss

@@ -115,8 +115,13 @@ igx-avatar {
     align-items: center;
     gap: 4px;
     min-width: 56px;
-    color: var(--ig-gray-700);
-    font-size: 12px;
+    color: #556c86;
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+    letter-spacing: 0.3px;
 }
 
 .nav-item.active {

src/app/data-display/badge/badge-icon/badge-icon.component.scss

@@ -44,11 +44,20 @@ igx-avatar {
 }
 
 .badge-icon-item span {
-    color: var(--ig-gray-700);
-    font-size: 12px;
+    color: #556c86;
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+    letter-spacing: 0.3px;
     transform: translateY(4px);
 }
 
+.badge-icon-item:last-child span {
+    white-space: nowrap;
+}
+
 .avatar-wrapper {
     position: relative;
     display: flex;

src/app/data-display/badge/badge-outlined/badge-outlined.component.scss

@@ -110,6 +110,11 @@ igx-avatar {
 }
 
 .step-label {
-    color: var(--ig-gray-700);
+    color: #556c86;
+    font-family: "Aktiv Grotesk", sans-serif;
     font-size: 13px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+    letter-spacing: 0.3px;
 }

src/app/data-display/badge/badge-shape/badge-shape.component.scss

@@ -17,8 +17,13 @@
 
 .row-label {
     justify-self: end;
-    color: var(--ig-gray-700);
-    font-size: 14px;
+    color: #556c86;
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+    letter-spacing: 0.3px;
 }
 
 .badge-small {

src/app/data-display/badge/badge-size/badge-size.component.scss

@@ -17,8 +17,13 @@
 
 .row-label {
     justify-self: end;
-    color: var(--ig-gray-700);
-    font-size: 14px;
+    color: #556c86;
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+    letter-spacing: 0.3px;
 }
 
 .badge-large { --ig-size: var(--ig-size-large); }

src/app/data-display/badge/badge-type/badge-type.component.scss

@@ -38,7 +38,11 @@ igx-badge {
 }
 
 .badge-type-item span {
-    color: var(--ig-gray-700);
-    font-size: 12px;
-    line-height: 16px;
+    color: #556c86;
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+    letter-spacing: 0.3px;
 }

src/app/data-display/badge/badge-variants/badge-variants.component.scss

@@ -32,8 +32,13 @@ igx-avatar {
 }
 
 .variant-item span {
-    color: var(--ig-gray-700);
+    color: #556c86;
+    font-family: "Aktiv Grotesk", sans-serif;
     font-size: 13px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+    letter-spacing: 0.3px;
 }
 
 .avatar-wrapper {

src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.html

@@ -0,0 +1,12 @@
+<article class="button-group-alignment">
+    @for (alignment of alignments; track alignment.value) {
+        <div class="button-group-alignment-item">
+            <span>{{ alignment.label }}</span>
+            <igx-buttongroup [alignment]="alignment.value">
+                @for (city of cities; track city) {
+                    <button igxButton [igxRipple]="rippleColor">{{ city }}</button>
+                }
+            </igx-buttongroup>
+        </div>
+    }
+</article>

src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss

@@ -0,0 +1,35 @@
+.button-group-alignment {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 60px;
+    padding: 24px;
+}
+
+.button-group-alignment-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 16px;
+}
+
+.button-group-alignment-item igx-buttongroup {
+    width: 240px;
+}
+
+.button-group-alignment-item:first-child igx-buttongroup {
+    width: 320px;
+}
+
+.button-group-alignment-item span {
+    width: 100%;
+    text-align: center;
+    color: #556c86;
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+    letter-spacing: 0.3px;
+}

src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/button-group';
+import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
+
+@Component({
+    selector: 'app-button-group-alignment',
+    styleUrls: ['./button-group-alignment.component.scss'],
+    templateUrl: './button-group-alignment.component.html',
+    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
+})
+export class ButtonGroupAlignmentComponent {
+    public rippleColor = 'gray';
+    public cities = ['Sofia', 'London', 'New York'];
+
+    public alignments: { label: string; value: ButtonGroupAlignment }[] = [
+        { label: 'Horizontal', value: ButtonGroupAlignment.horizontal },
+        { label: 'Vertical', value: ButtonGroupAlignment.vertical }
+    ];
+}

src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.html

@@ -0,0 +1,3 @@
+<article class="button-group-custom-toggle">
+    <igx-buttongroup selectionMode="multi" [values]="bordersButtons"></igx-buttongroup>
+</article>

src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.scss

@@ -0,0 +1,11 @@
+.button-group-custom-toggle {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 7rem;
+}
+
+igx-buttongroup {
+    display: inline-block;
+    width: 300px;
+}

src/app/data-entries/buttonGroup/button-group-sample-3/button-group-sample-3.component.ts → src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.ts

@@ -11,7 +11,7 @@ interface IButton {
     icon?: string;
 }
 
-class ToggleButton {
+class CustomToggle {
     private ripple: string;
     private label: string;
     private disabled: boolean;
@@ -32,32 +32,20 @@ class ToggleButton {
 }
 
 @Component({
-    selector: 'app-button-group-sample-3',
-    styleUrls: ['./button-group-sample-3.component.scss'],
-    templateUrl: './button-group-sample-3.component.html',
+    selector: 'app-button-group-custom-toggle',
+    styleUrls: ['./button-group-custom-toggle.component.scss'],
+    templateUrl: './button-group-custom-toggle.component.html',
     imports: [IgxButtonGroupComponent]
 })
-export class ButtonGroupSample3Component implements OnInit {
-    public bordersButtons: ToggleButton[];
+export class ButtonGroupCustomToggleComponent implements OnInit {
+    public bordersButtons: CustomToggle[];
 
     public ngOnInit() {
         this.bordersButtons = [
-            new ToggleButton({
-                icon: 'border_top',
-                selected: true
-            }),
-            new ToggleButton({
-                icon: 'border_right',
-                selected: false
-            }),
-            new ToggleButton({
-                icon: 'border_bottom',
-                selected: false
-            }),
-            new ToggleButton({
-                icon: 'border_left',
-                selected: false
-            })
+            new CustomToggle({ icon: 'border_top', selected: true }),
+            new CustomToggle({ icon: 'border_right', selected: false }),
+            new CustomToggle({ icon: 'border_bottom', selected: false }),
+            new CustomToggle({ icon: 'border_left', selected: false })
         ];
     }
 }

src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.html

@@ -0,0 +1,28 @@
+<article class="button-group-interaction-states">
+    <div class="button-group-interaction-states-row">
+        <span class="row-label"></span>
+        @for (state of states; track state) {
+            <span class="column-label">{{ getLabel(state) }}</span>
+        }
+    </div>
+
+    @for (row of rows; track row.label) {
+        <div class="button-group-interaction-states-row">
+            <span class="row-label">{{ row.label }}</span>
+            @for (state of states; track state) {
+                <igx-buttongroup>
+                    <button
+                        igxButton
+                        [igxRipple]="rippleColor"
+                        [selected]="row.selected"
+                        [class]="'state-' + state"
+                        [class.state-selected]="row.selected">
+                        <igx-icon>notifications</igx-icon>
+                        Button
+                        <igx-icon>notifications</igx-icon>
+                    </button>
+                </igx-buttongroup>
+            }
+        </div>
+    }
+</article>