refactor(button-group): update styles and simplify layout structure across all samples

live-editing/configs/ButtonGroupConfigGenerator.ts

@@ -69,7 +69,6 @@ export class ButtonGroupConfigGenerator implements IConfigGenerator {
         // 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/"
         }));

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

@@ -2,7 +2,7 @@
 @use "igniteui-theming/sass/typography" as *;
 
 :host {
-    --sample-accent: #0057a9;
+    --sample-accent: var(--ig-primary-800);
 
     display: grid;
     grid-auto-flow: column;
@@ -21,6 +21,10 @@ igx-badge {
     translate: -50% -50%;
 }
 
+igx-avatar.icon-anchor {
+    --ig-avatar-background: var(--ig-gray-300);
+}
+
 $anchors: icon, avatar;
 
 @each $anchor in $anchors {
@@ -70,7 +74,7 @@ $anchors: icon, avatar;
 }
 
 .unread {
-    color: var(--sample-accent);
+    color: var(--ig-gray-900);
     font-weight: 600;
 }
 

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

@@ -30,7 +30,12 @@ span {
 
     grid-row: 2;
     text-align: center;
-    color: var(--ig-gray-700);
+    color: var(--ig-gray-600);
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: rem(13px);
+    font-weight: 400;
+    line-height: rem(20px);
+    letter-spacing: rem(0.3px);
 }
 
 igx-badge:last-of-type {

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

@@ -13,7 +13,12 @@
 
 span {
     justify-self: end;
-    color: var(--ig-gray-700);
+    color: var(--ig-gray-600);
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: rem(13px);
+    font-weight: 400;
+    line-height: rem(20px);
+    letter-spacing: rem(0.3px);
 
     @include type-style("body-2") {
         margin: 0;

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

@@ -13,7 +13,12 @@
 
 span {
     justify-self: end;
-    color: var(--ig-gray-700);
+    color: var(--ig-gray-600);
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: rem(13px);
+    font-weight: 400;
+    line-height: rem(20px);
+    letter-spacing: rem(0.3px);
 
     @include type-style("body-2") {
         margin: 0;

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

@@ -24,7 +24,12 @@ igx-avatar {
 span {
     grid-row: 2;
     text-align: center;
-    color: var(--ig-gray-700);
+    color: var(--ig-gray-600);
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: rem(13px);
+    font-weight: 400;
+    line-height: rem(20px);
+    letter-spacing: rem(0.3px);
 
     @include type-style("caption") {
         margin: 0;

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

@@ -22,7 +22,12 @@ igx-avatar {
 span {
     grid-row: 2;
     text-align: center;
-    color: var(--ig-gray-700);
+    color: var(--ig-gray-600);
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: rem(13px);
+    font-weight: 400;
+    line-height: rem(20px);
+    letter-spacing: rem(0.3px);
 
     @include type-style("body-2") {
         margin: 0;

src/app/data-entries/buttonGroup/_bootstrap-button-group-theme.scss

@@ -0,0 +1,100 @@
+@use 'igniteui-angular/theming' as *;
+
+$bs-primary: color($light-bootstrap-palette, 'primary', 500);
+$bs-primary-hover: color($light-bootstrap-palette, 'primary', 600);
+$bs-primary-active: color($light-bootstrap-palette, 'primary', 700);
+$bs-primary-hover-light: mix(#fff, $bs-primary-hover, 3%);
+$bs-primary-focus-dark: mix(#000, color($light-bootstrap-palette, 'primary', 800), 8%);
+$bs-on-primary: #fff;
+
+:host,
+igx-buttongroup {
+    --ig-theme: bootstrap;
+    --ig-theme-variant: light;
+
+    @include typography(
+        $font-family: $bootstrap-typeface,
+        $type-scale: $bootstrap-type-scale
+    );
+
+    @include tokens(
+        button-group-theme(
+            $schema: $light-bootstrap-schema,
+            $item-background: $bs-primary,
+            $item-text-color: $bs-on-primary,
+            $item-icon-color: $bs-on-primary,
+            $item-border-color: $bs-primary,
+            $item-hover-background: $bs-primary-hover-light,
+            $item-hover-text-color: $bs-on-primary,
+            $item-hover-icon-color: $bs-on-primary,
+            $item-hover-border-color: $bs-primary-hover-light,
+            $item-focused-background: $bs-primary-hover-light,
+            $item-focused-text-color: $bs-on-primary,
+            $item-focused-border-color: $bs-primary-hover-light,
+            $item-focused-hover-background: $bs-primary-hover,
+            $item-focused-hover-text-color: $bs-on-primary,
+            $item-focused-hover-border-color: $bs-primary-hover,
+            $item-selected-background: $bs-primary-active,
+            $item-selected-text-color: $bs-on-primary,
+            $item-selected-icon-color: $bs-on-primary,
+            $item-selected-border-color: $bs-primary-active,
+            $item-selected-hover-background: $bs-primary-focus-dark,
+            $item-selected-hover-text-color: $bs-on-primary,
+            $item-selected-hover-icon-color: $bs-on-primary,
+            $item-selected-hover-border-color: $bs-primary-focus-dark,
+            $item-selected-focus-background: $bs-primary-focus-dark,
+            $item-selected-focus-hover-background: $bs-primary-hover
+        )
+    );
+}
+
+:host ::ng-deep igx-buttongroup button.igx-button-group__item {
+    background: $bs-primary;
+    color: $bs-on-primary;
+    border-color: $bs-primary;
+    border-radius: 0;
+    text-transform: none;
+}
+
+:host ::ng-deep igx-buttongroup .igx-button-group__buttons-container {
+    border-radius: 4px;
+}
+
+:host ::ng-deep igx-buttongroup button.igx-button-group__item:first-of-type {
+    border-start-start-radius: 4px;
+    border-end-start-radius: 4px;
+}
+
+:host ::ng-deep igx-buttongroup button.igx-button-group__item:last-of-type {
+    border-start-end-radius: 4px;
+    border-end-end-radius: 4px;
+}
+
+:host ::ng-deep igx-buttongroup button.igx-button-group__item:hover {
+    background: $bs-primary-hover;
+    color: $bs-on-primary;
+    border-color: $bs-primary-hover;
+}
+
+:host ::ng-deep igx-buttongroup button.igx-button-group__item--selected {
+    background: $bs-primary-active;
+    color: $bs-on-primary;
+    border-color: $bs-primary-active;
+}
+
+:host ::ng-deep igx-buttongroup button.igx-button-group__item:disabled {
+    background: color($light-bootstrap-palette, 'primary', 50);
+    color: color($light-bootstrap-palette, 'primary', 200);
+    border-color: color($light-bootstrap-palette, 'primary', 50);
+    cursor: not-allowed;
+}
+
+:host ::ng-deep igx-buttongroup button.igx-button-group__item--selected:disabled {
+    background: color($light-bootstrap-palette, 'primary', 100);
+    color: color($light-bootstrap-palette, 'primary', 200);
+    border-color: color($light-bootstrap-palette, 'primary', 100);
+}
+
+:host ::ng-deep igx-buttongroup button.igx-button-group__item igx-icon {
+    color: $bs-on-primary;
+}

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

@@ -1,6 +1,6 @@
-<article class="button-group-alignment">
+<div class="sample-layout">
     @for (alignment of alignments; track alignment.value) {
-        <div class="button-group-alignment-item">
+        <div class="sample-inner-layout">
             <span>{{ alignment.label }}</span>
             <igx-buttongroup [alignment]="alignment.value">
                 @for (city of cities; track city) {
@@ -9,4 +9,4 @@
             </igx-buttongroup>
         </div>
     }
-</article>
+</div>

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

@@ -1,35 +1,37 @@
-.button-group-alignment {
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    gap: 60px;
-    padding: 24px;
+@use '../_bootstrap-button-group-theme';
+@use 'igniteui-theming' as *;
+
+:host {
+    display: grid;
+    place-items: center;
+    height: 100vh;
 }
 
-.button-group-alignment-item {
+.sample-layout {
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 16px;
+    gap: rem(32px);
+    align-items: start;
+    justify-content: center;
+    flex-wrap: wrap;
 }
 
-.button-group-alignment-item igx-buttongroup {
-    width: 240px;
+.sample-inner-layout {
+    display: grid;
+    gap: rem(8px);
+    align-items: start;
 }
 
-.button-group-alignment-item:first-child igx-buttongroup {
-    width: 320px;
+igx-buttongroup {
+    min-width: rem(280px);
 }
 
-.button-group-alignment-item span {
-    width: 100%;
-    text-align: center;
-    color: #556c86;
+span {
+    color: var(--ig-gray-600);
     font-family: "Aktiv Grotesk", sans-serif;
-    font-size: 13px;
+    font-size: rem(13px);
     font-weight: 400;
-    font-style: normal;
-    line-height: 20px;
-    letter-spacing: 0.3px;
+    line-height: rem(20px);
+    letter-spacing: rem(0.3px);
+    margin: rem(8px);
+    text-align: center;
 }

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

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

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

@@ -1,11 +1,12 @@
-.button-group-custom-toggle {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 7rem;
+@use '../_bootstrap-button-group-theme';
+@use 'igniteui-theming' as *;
+
+:host {
+    display: grid;
+    place-items: center;
+    height: 100vh;
 }
 
 igx-buttongroup {
-    display: inline-block;
-    width: 300px;
+    inline-size: rem(180px);
 }

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

@@ -1,28 +1,31 @@
-<article class="button-group-interaction-states">
-    <div class="button-group-interaction-states-row">
+<article class="states-matrix" [style.--state-columns]="states.length">
+    <header class="states-row">
         <span class="row-label"></span>
         @for (state of states; track state) {
             <span class="column-label">{{ getLabel(state) }}</span>
         }
-    </div>
+    </header>
 
     @for (row of rows; track row.label) {
-        <div class="button-group-interaction-states-row">
+        <section class="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 class="state-cell">
+                    <span class="cell-label">{{ getLabel(state) }}</span>
+                    <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>
             }
-        </div>
+        </section>
     }
 </article>