feat(button): fix fluent flat button and focus visible hover states

IgniteUI · Feb 6, 2024 · 8df37e3 · 8df37e3
1 parent 4ffc07d
commit 8df37e3
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/src/components/button/themes/button/shared/button.common.scss b/src/components/button/themes/button/shared/button.common.scss
@@ -60,6 +60,11 @@ $outlined-theme: $material-outlined;
     &:focus-visible {
         color: var-get($flat-theme, 'focus-visible-foreground');
         background: var-get($flat-theme, 'focus-visible-background');
+
+        &:hover {
+            color: var-get($flat-theme, 'focus-hover-foreground');
+            background: var-get($flat-theme, 'focus-hover-background');
+        }
     }
 }
 

diff --git a/src/components/button/themes/button/shared/button.fluent.scss b/src/components/button/themes/button/shared/button.fluent.scss
@@ -63,7 +63,18 @@ $outline-btn-indent: rem(2px);
     }
 
     &:focus-visible {
-        border-color: var-get($flat-theme, 'focus-visible-border-color');
+        border-color: transparent;
+
+        &::after {
+            content: '';
+            position: absolute;
+            inset-block-start: $outline-btn-indent;
+            inset-inline-start: $outline-btn-indent;
+            pointer-events: none;
+            width: calc(100% - (#{$outline-btn-indent} * 2));
+            height: calc(100% - (#{$outline-btn-indent} * 2));
+            box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-visible-border-color');
+        }
     }
 }
 
@@ -84,7 +95,7 @@ $outline-btn-indent: rem(2px);
     }
 
     &:focus-visible {
-        border-color: var-get($outlined-theme, 'focus-visible-border-color');
+        border-color: var-get($outlined-theme, 'focus-border-color');
 
         &::after {
             content: '';
@@ -94,17 +105,13 @@ $outline-btn-indent: rem(2px);
             pointer-events: none;
             width: calc(100% - (#{$outline-btn-indent} * 2));
             height: calc(100% - (#{$outline-btn-indent} * 2));
-            box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-visible-foreground');
+            box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-visible-border-color');
         }
 
         &:hover {
             color: var-get($outlined-theme, 'hover-foreground');
             background: var-get($outlined-theme, 'hover-background');
             border-color: var-get($outlined-theme, 'hover-border-color');
-
-            &::after {
-                box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'hover-foreground');
-            }
         }
 
         &:active {