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-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,32 @@
-.button-group-alignment {
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    gap: 60px;
-    padding: 24px;
+@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%;
+span {
+    @include type-style('body-2');
+
+    color: var(--ig-gray-700);
     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-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,11 @@
-.button-group-custom-toggle {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 7rem;
+@use 'igniteui-theming' as *;
+
+:host {
+    display: grid;
+    place-items: center;
+    height: 100vh;
 }
 
 igx-buttongroup {
-    display: inline-block;
-    width: 300px;
+    max-width: rem(300px);
 }

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>

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

@@ -1,73 +1,118 @@
-.button-group-interaction-states {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    gap: 20px;
-    padding: 20px;
+@use "igniteui-theming/sass/typography" as *;
+
+:host {
+    container-type: inline-size;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-content: center;
+    height: 100vh;
 }
 
-.button-group-interaction-states-row {
+.states-matrix {
     display: grid;
-    grid-template-columns: 120px 164px 164px 164px;
+    grid-template-columns: auto repeat(3, minmax(rem(124px), 1fr));
+    gap: rem(16px);
+    inline-size: 100%;
+    max-inline-size: rem(680px);
+    margin-inline: auto;
+}
+
+.states-row {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
     align-items: center;
-    gap: 16px;
 }
 
-.button-group-interaction-states .row-label,
-.button-group-interaction-states .column-label {
-    color: #556c86;
-    font-family: "Aktiv Grotesk", sans-serif;
-    font-size: 13px;
-    font-weight: 400;
-    font-style: normal;
-    line-height: 20px;
-    letter-spacing: 0.3px;
+.row-label,
+.column-label,
+.cell-label {
+    @include type-style("body-2") {
+        margin: 0;
+    }
+
+    color: var(--ig-gray-700);
 }
 
-.button-group-interaction-states .column-label {
+.column-label,
+.cell-label {
     text-align: center;
 }
 
-.button-group-interaction-states igx-buttongroup {
-    width: 164px;
+.cell-label {
+    display: none;
 }
 
-.button-group-interaction-states button {
-    width: 100%;
-    gap: 4px;
+.state-cell {
+    display: grid;
+    gap: rem(4px);
+}
+
+igx-icon {
+    --ig-icon-size: #{rem(16px)};
+}
+
+@container (width < 34rem) {
+    .states-matrix {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .states-row {
+        grid-template-columns: repeat(auto-fit, minmax(rem(150px), 1fr));
+    }
+
+    header.states-row {
+        display: none;
+    }
+
+    .row-label {
+        grid-column: 1 / -1;
+    }
+
+    .cell-label {
+        display: block;
+        text-align: start;
+        margin-block-start: rem(16px);
+    }
+
+    .state-cell {
+        margin-inline-end: rem(8px);
+    }
 }
 
-.button-group-interaction-states igx-icon {
-    --ig-icon-size: 16px;
+// WARNING START: Demo overrides only. Do not copy to production.
+// Forced state classes are used here solely to present all component states visually.
+igx-buttongroup{
+    pointer-events: none;
 }
 
-.button-group-interaction-states button.state-hover:not(.state-selected) {
+.state-hover:not(.state-selected) {
     background: var(--item-hover-background);
     border-color: var(--item-hover-border-color);
     color: var(--item-hover-text-color);
 }
 
-.button-group-interaction-states button.state-idle.state-selected {
+.state-idle.state-selected {
     background: var(--item-active-background);
     border-color: var(--item-active-border-color);
     color: var(--item-active-text-color);
 }
 
-.button-group-interaction-states button.state-focused:not(.state-selected) {
+.state-focused:not(.state-selected) {
     background: var(--item-focused-hover-background);
     border-color: var(--item-focused-hover-border-color);
     color: var(--item-focused-hover-text-color);
 }
 
-.button-group-interaction-states button.state-hover.state-selected {
+.state-hover.state-selected {
     background: var(--item-selected-active-background);
     border-color: var(--item-selected-active-border-color);
     color: var(--item-selected-hover-text-color);
 }
 
-.button-group-interaction-states button.state-focused.state-selected {
+.state-focused.state-selected {
     background: var(--item-selected-active-background);
     border-color: var(--item-selected-active-border-color);
     color: var(--item-focused-hover-text-color);
 }
+// WARNING END

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

@@ -1,15 +1,14 @@
-<article class="sample-column button-group-layout">
+<div class="sample-layout">
     <igx-buttongroup>
         @for (layout of layouts; track layout.value) {
             <button igxButton [igxRipple]="rippleColor">{{ layout.label }}</button>
         }
     </igx-buttongroup>
-
     <igx-buttongroup>
         @for (layout of layouts; track layout.value) {
             <button igxButton [igxRipple]="rippleColor">
                 <igx-icon>{{ layout.icon }}</igx-icon>
             </button>
         }
     </igx-buttongroup>
-</article>
+</div>

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

@@ -1,21 +1,20 @@
-.button-group-layout {
+@use 'igniteui-theming' as *;
+
+:host {
+    display: grid;
+    place-items: center;
+    height: 100vh;
+}
+
+.sample-layout {
     display: flex;
-    flex-direction: row;
     align-items: center;
     justify-content: center;
-    gap: 80px;
-    min-height: 5.5rem;
+    flex-wrap: wrap;
+    gap: rem(60px);
 }
 
 igx-buttongroup {
-    display: inline-block;
     max-width: 400px;
-}
-
-.button-group-layout button {
-    min-width: 100px;
-}
-
-.button-group-layout igx-icon {
-    --ig-icon-size: 20px;
+    min-width: 280px;
 }

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

@@ -1,4 +1,4 @@
-<article class="sample-column button-group-overview">
+<div class="sample-layout">
     <igx-buttongroup selectionMode="singleRequired">
         <button igxButton [igxRipple]="rippleColor" [selected]="source === 'device'" (click)="selectSource('device')">
             Device
@@ -9,11 +9,11 @@
     </igx-buttongroup>
 
     <div class="album">
-        <span class="album-title">{{ album.title }}</span>
+        <p class="album-title">{{ album.title }}</p>
         <div class="album-photos">
             @for (photo of album.photos; track photo) {
                 <img [src]="photo" [alt]="album.title" />
             }
         </div>
     </div>
-</article>
+</div>