From b5bcc6b1d1fdd452ed1b28f95b75a8f75a78e563 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Thu, 9 Apr 2026 08:30:17 +0300
Subject: [PATCH] feat(button-group): update button group styles and implement
 new properties

---
 .../button-group/_button-group-theme.scss     | 376 +++---------------
 1 file changed, 48 insertions(+), 328 deletions(-)

diff --git a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss
index 1cd13a4877e..8a5e4a56a75 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss
@@ -13,8 +13,6 @@
     $outline-btn-indent: rem(2px);
 
     $variant: map.get($theme, '_meta', 'theme');
-    $bootstrap-theme: $variant == 'bootstrap';
-    $indigo-theme: $variant == 'indigo';
     $group-item-min-width: map.get((
         'material': rem(42px),
         'fluent': rem(42px),
@@ -22,18 +20,6 @@
         'indigo': rem(32px),
     ), $variant);
 
-    %item-overlay {
-        &::before {
-            content: '';
-            z-index: -1;
-            position: absolute;
-            pointer-events: none;
-            width: 100%;
-            height: 100%;
-            background: var-get($theme, 'item-focused-background');
-        }
-    }
-
     %igx-group-display {
         display: flex;
         box-shadow: var-get($theme, 'elevation');
@@ -72,7 +58,11 @@
         }
 
         &:not(:nth-child(1)) {
-            margin-inline-start: rem(-1px);
+            @if $variant != 'fluent' {
+                margin-inline-start: rem(-1px);
+            } @else {
+                border-inline-start: 0;
+            }
         }
 
         &:first-of-type {
@@ -105,36 +95,13 @@
             }
         }
 
-        @if $variant != 'fluent' {
-            &:active {
-                color: var-get($theme, 'item-hover-text-color');
-                background: var-get($theme, 'item-hover-background');
-                border-color: var-get($theme, 'item-hover-border-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-hover-icon-color');
-                }
-            }
-        }
-
-        @if $variant == 'material' {
-            &:hover,
-            &:active {
-                @extend %item-overlay;
-
-                background: var-get($theme, 'item-background');
-            }
-
-            &:hover {
-                &::before {
-                    background: var-get($theme, 'item-hover-background');
-                }
-            }
-        }
+        &:active {
+            color: var-get($theme, 'item-hover-text-color');
+            background: var-get($theme, 'item-active-background');
+            border-color: var-get($theme, 'item-hover-border-color');
 
-        @if $variant == 'bootstrap' {
-            &:active {
-                @extend %item-overlay;
+            igx-icon {
+                color: var-get($theme, 'item-hover-icon-color');
             }
         }
 
@@ -144,11 +111,6 @@
 
                 --ig-icon-size: #{$icon-size};
             }
-
-            &:active {
-                background: var-get($theme, 'item-focused-background');
-                color: var-get($theme, 'item-text-color');
-            }
         }
 
         @if $variant == 'indigo' {
@@ -161,91 +123,30 @@
             }
 
             &:hover {
-                border-color: var-get($theme, 'item-hover-border-color');
                 z-index: 1;
             }
 
             &:active {
-                color: var-get($theme, 'item-hover-text-color');
-                background: var-get($theme, 'item-hover-background');
-                border-color: var-get($theme, 'item-hover-border-color');
                 z-index: 2;
             }
         }
 
         &[igxButton].igx-button--focused {
-            &:hover {
-                color: var-get($theme, 'item-hover-text-color');
-                background: var-get($theme, 'item-hover-background');
-
-                igx-icon {
-                    color: var-get($theme, 'item-hover-icon-color');
-                }
-            }
-
-            @if $variant != 'fluent' {
-                color: var-get($theme, 'item-hover-text-color');
-                background: var-get($theme, 'item-hover-background');
-                border-color: var-get($theme, 'item-hover-border-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-hover-icon-color');
-                }
-            }
-
-            @if $variant == 'material' {
-                @extend %item-overlay;
-
-                background: var-get($theme, 'item-background');
-
-                &::before {
-                    background: var-get($theme, 'item-hover-background');
-                }
-
-                &:hover {
-                    background: var-get($theme, 'item-background');
-
-                    &::before {
-                        background: var-get($theme, 'item-focused-hover-background');
-                    }
-                }
-
-                &:active {
-                    background: var-get($theme, 'item-background');
-                    color: var-get($theme, 'item-hover-text-color');
-
-                    igx-icon {
-                        color: var-get($theme, 'item-hover-icon-color');
-                    }
+            color: var-get($theme, 'item-focused-text-color');
+            background: var-get($theme, 'item-focused-background');
+            border-color: var-get($theme, 'item-focused-border-color');
 
-                    &::before {
-                        background: var-get($theme, 'item-focused-background');
-                    }
-                }
+            igx-icon {
+                color: var-get($theme, 'item-icon-color');
             }
 
             @if $variant == 'bootstrap' {
-                background: var-get($theme, 'item-background');
                 z-index: 1;
                 box-shadow: 0 0 0 rem(4px) var-get($theme, 'idle-shadow-color');
-
-                &:active {
-                    background: var-get($theme, 'item-hover-background');
-                    color: var-get($theme, 'item-hover-text-color');
-
-                    igx-icon {
-                        color: var-get($theme, 'item-hover-icon-color');
-                    }
-                }
             }
 
             @if $variant == 'fluent' {
-                background: var-get($theme, 'item-background');
-                color: var-get($theme, 'item-text-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-icon-color');
-                }
+                border-color: var-get($theme, 'item-border-color');
 
                 &::after {
                     content: '';
@@ -257,36 +158,20 @@
                     height: calc(100% - (#{$outline-btn-indent} * 2));
                     box-shadow: 0 0 0 rem(1px) var-get($theme, 'item-focused-border-color');
                 }
-
-                &:active {
-                    background: var-get($theme, 'item-focused-background');
-                }
             }
 
             @if $variant == 'indigo' {
-                color: var-get($theme, 'item-focused-text-color');
-                background: var-get($theme, 'item-focused-background');
-                border-color: var-get($theme, 'item-focused-border-color');
                 box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');
                 z-index: 2;
+            }
 
-                igx-icon {
-                    color: var-get($theme, 'item-icon-color');
-                }
-
-                &:hover {
-                    border-color: var-get($theme, 'item-hover-border-color');
-                }
-
-                &:active {
-                    color: var-get($theme, 'item-hover-text-color');
-                    background: var-get($theme, 'item-hover-background');
-                    border-color: var-get($theme, 'item-hover-border-color');
+            &:hover {
+                background: var-get($theme, 'item-focused-hover-background');
+                border-color: var-get($theme, 'item-focused-hover-border-color');
+            }
 
-                    igx-icon {
-                        color: var-get($theme, 'item-hover-icon-color');
-                    }
-                }
+            &:active {
+                background: var-get($theme, 'item-active-background');
             }
         }
     }
@@ -337,219 +222,54 @@
             }
         }
 
-        @if $variant == 'material' {
-            &:hover {
-                @extend %item-overlay;
-
-                background: var-get($theme, 'item-selected-background');
-
-                &::before {
-                    background: var-get($theme, 'item-selected-hover-background');
-                }
-            }
-
-            &:active {
-                @extend %item-overlay;
-
-                color: var-get($theme, 'item-selected-hover-text-color');
-                background: var-get($theme, 'item-selected-background');
-                border-color: var-get($theme, 'item-selected-border-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-selected-hover-icon-color');
-                }
+        &:active {
+            border-color: var-get($theme, 'item-selected-hover-border-color');
+            color: var-get($theme, 'item-selected-hover-text-color');
+            background: var-get($theme, 'item-selected-active-background');
 
-                &::before {
-                    background: var-get($theme, 'item-selected-focus-background');
-                }
+            igx-icon {
+                color: var-get($theme, 'item-selected-hover-icon-color');
             }
         }
 
-        @if $variant == 'bootstrap' {
-            &:active {
-                @extend %item-overlay;
+        &[igxButton].igx-button--focused {
+            background: var-get($theme, 'item-selected-focus-background');
+            border-color: var-get($theme, 'item-selected-hover-border-color');
 
+            @if $variant == 'indigo' {
                 color: var-get($theme, 'item-selected-text-color');
                 border-color: var-get($theme, 'item-selected-border-color');
-                background: var-get($theme, 'item-selected-hover-background');
-
-                &::before {
-                    background: var-get($theme, 'item-selected-focus-background');
-                }
+                box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');
+                z-index: 2;
             }
-        }
 
-        @if $variant == 'fluent' {
             &:hover {
-                background: var-get($theme, 'item-selected-background');
-                color: var-get($theme, 'item-selected-text-color');
-
-                @extend %item-overlay;
+                background: var-get($theme, 'item-selected-focus-hover-background');
 
-                &::before {
-                    background: var-get($theme, 'item-selected-hover-background');
-                }
-            }
-
-            &:active {
-                background: var-get($theme, 'item-selected-focus-background');
-                color: var-get($theme, 'item-selected-text-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-selected-icon-color');
+                @if $variant != 'indigo' {
+                    border-color: var-get($theme, 'item-selected-border-color');
+                } @else {
+                    border-color: var-get($theme, 'item-selected-hover-border-color');
                 }
             }
-        }
 
-        @if $variant == 'indigo' {
             &:active {
-                background: var-get($theme, 'item-selected-hover-background');
-                color: var-get($theme, 'item-selected-hover-text-color');
+                background: var-get($theme, 'item-selected-active-background');
                 border-color: var-get($theme, 'item-selected-hover-border-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-selected-hover-icon-color');
-                }
-            }
-        }
-
-        &[igxButton].igx-button--focused {
-            @if $variant != 'fluent' {
-                &:hover {
-                    color: var-get($theme, 'item-selected-hover-text-color');
-                    background: var-get($theme, 'item-selected-hover-background');
-                    border-color: var-get($theme, 'item-selected-hover-border-color');
-                }
-
-                &:active {
-                    background: var-get($theme, 'item-selected-hover-background');
-                    color: var-get($theme, 'item-selected-hover-text-color');
-
-                    &::before {
-                        background: var-get($theme, 'item-selected-focus-background');
-                    }
-
-                    igx-icon {
-                        color: var-get($theme, 'item-selected-hover-icon-color');
-                    }
-                }
-            }
-
-            @if $variant == 'material' or $variant == 'fluent' {
-                &:hover {
-                    @extend %item-overlay;
-
-                    &::before {
-                        background: var-get($theme, 'item-selected-focus-hover-background');
-                    }
-                }
-            }
-
-            @if $variant == 'material' {
-                background: var-get($theme, 'item-selected-background');
-                color: var-get($theme, 'item-selected-hover-text-color');
-                border-color: var-get($theme, 'item-selected-hover-border-color');
-
-                &::before {
-                    background: var-get($theme, 'item-selected-hover-background');
-                }
-
-                igx-icon {
-                    color: var-get($theme, 'item-selected-hover-icon-color');
-                }
-
-                &:hover {
-                    background: var-get($theme, 'item-selected-background');
-
-                    igx-icon {
-                        color: var-get($theme, 'item-selected-hover-icon-color');
-                    }
-                }
-
-                &:active {
-                    background: var-get($theme, 'item-selected-background');
-                }
-            }
-
-            @if $variant == 'bootstrap' {
-                color: var-get($theme, 'item-selected-text-color');
-                border-color: var-get($theme, 'item-selected-border-color');
-                background: var-get($theme, 'item-selected-background');
-                box-shadow: 0 0 0 rem(4px) var-get($theme, 'selected-shadow-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-selected-icon-color');
-                }
-            }
-
-            @if $variant == 'fluent' {
-                background: var-get($theme, 'item-selected-background');
-                color: var-get($theme, 'item-selected-text-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-selected-icon-color');
-                }
-
-                &:hover {
-                    background: var-get($theme, 'item-selected-background');
-                    color: var-get($theme, 'item-selected-text-color');
-
-                    igx-icon {
-                        color: var-get($theme, 'item-selected-hover-icon-color');
-                    }
-                }
-
-                &:active {
-                    background: var-get($theme, 'item-selected-focus-background');
-                }
-            }
-
-            @if $variant == 'indigo' {
-                box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');
-                border-color: var-get($theme, 'item-selected-border-color');
-                background: var-get($theme, 'item-selected-background');
-                color: var-get($theme, 'item-selected-text-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-selected-icon-color');
-                }
-
-                &:hover,
-                &:active {
-                    border-color: var-get($theme, 'item-selected-hover-border-color');
-
-                    igx-icon {
-                        color: var-get($theme, 'item-selected-hover-icon-color');
-                    }
-                }
             }
         }
 
         &[igxButton][disabled='true'] {
-            position: relative;
-
-            &::before {
-                position: absolute;
-                content: '';
-                top: 0;
-                bottom: 0;
-                inset-inline-end: 0;
-                inset-inline-start: 0;
-                background: var-get($theme, 'disabled-selected-background');
+            color: var-get($theme, 'disabled-selected-text-color');
+            background: var-get($theme, 'disabled-selected-background');
+            border-color: var-get($theme, 'disabled-selected-border-color');
+
+            igx-icon {
+                color: var-get($theme, 'disabled-selected-icon-color');
             }
 
             @if $variant == 'indigo' {
-                color: var-get($theme, 'disabled-selected-text-color');
-                background: var-get($theme, 'disabled-selected-background');
                 border: none;
-
-                igx-icon {
-                    color: var-get($theme, 'disabled-selected-icon-color');
-                }
-
-                &::before {
-                    display: none;
-                }
             }
         }
     }