Merge pull request #13853 from IgniteUI/didimmova/update-button-states

feat(button/icon-button): refactor buttons and add new states

Author: kdinev

package-lock.json

@@ -72,7 +72,7 @@
     "express": "^4.18.2",
     "fflate": "^0.8.1",
     "hammerjs": "^2.0.8",
-    "igniteui-theming": "^4.2.0",
+    "igniteui-theming": "^4.4.0",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.0",

package.json

@@ -76,7 +76,7 @@
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
         "uuid": "^9.0.0",
-        "igniteui-theming": "^4.2.0",
+        "igniteui-theming": "^4.4.0",
         "@igniteui/material-icons-extended": "^3.0.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -250,6 +250,16 @@
             }
         }
 
+        @if $variant != 'fluent' {
+            &:focus,
+            &:focus-visible {
+                &:hover {
+                    color: var-get($theme, 'item-hover-text-color');
+                    background: var-get($theme, 'item-hover-background');
+                }
+            }
+        }
+
         @if $variant == 'fluent' {
             min-width: rem(50px);
             min-height: rem(32px);
@@ -263,17 +273,20 @@
                 --igx-icon-size: #{$icon-size};
             }
 
-            &:focus {
+            &:focus,
+            &:focus-visible {
                 background: var-get($theme, 'item-background');
-            }
 
-            &:active {
-                background: var-get($theme, 'item-focused-background');
+                &:hover {
+                    background: var-get($theme, 'item-hover-background');
+                }
+
+                &:active {
+                    background: var-get($theme, 'item-focused-background');
+                }
             }
 
             &:focus-visible {
-                background: var-get($theme, 'item-background');
-    
                 &::after {
                     content: '';
                     position: absolute;
@@ -284,14 +297,6 @@
                     height: calc(100% - (#{$outline-btn-indent} * 2));
                     box-shadow: 0 0 0 rem(1px) var-get($theme, 'item-focused-border-color');
                 }
-    
-                &:hover {
-                    background: var-get($theme, 'item-hover-background');
-                }
-    
-                &:active {
-                    background: var-get($theme, 'item-focused-background');
-                }
             }
         }
     }
@@ -342,6 +347,20 @@
             }
         }
 
+        @if $variant != 'fluent' {
+            &:focus,
+            &:focus-visible {
+                &:hover {
+                    color: var-get($theme, 'item-selected-text-color');
+                    background: var-get($theme, 'item-selected-hover-background');
+                }
+
+                &:active {
+                    background: var-get($theme, 'item-selected-hover-background');
+                }
+            }
+        }
+
         @if $variant == 'fluent' {
             &:hover,
             &:focus,
@@ -353,6 +372,7 @@
                 background: var-get($theme, 'item-selected-hover-background');
             }
 
+            &:focus,
             &:focus-visible {
                 &:hover {
                     background: var-get($theme, 'item-selected-background');