refactor(btn-group): update focus styles

IgniteUI · Apr 29, 2024 · ab0b81b · ab0b81b
1 parent f631dd3
commit ab0b81b
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 31 deletions.
diff --git a/src/components/button-group/button-group.ts b/src/components/button-group/button-group.ts
@@ -171,6 +171,7 @@ export default class IgcButtonGroupComponent extends EventEmitterMixin<
     );
 
     if (button) {
+      button.focused = false;
       this.isMultiple
         ? this.handleMultipleSelection(button)
         : this.handleSingleSelection(button);

diff --git a/src/components/button-group/themes/shared/button/button.bootstrap.scss b/src/components/button-group/themes/shared/button/button.bootstrap.scss
@@ -22,8 +22,9 @@ $group-item-border-thickness: rem(1px);
         }
     }
 
-    [part~='toggle']:focus-visible {
+    [part='toggle focused'] {
         box-shadow: 0 0 0 rem(4px) var-get($theme, 'idle-shadow-color');
+        z-index: 1;
     }
 }
 

diff --git a/src/components/button-group/themes/shared/button/button.fluent.scss b/src/components/button-group/themes/shared/button/button.fluent.scss
@@ -9,37 +9,37 @@ $outline-btn-indent: rem(2px);
     [part~='toggle'] {
         min-height: $fluent-flat-btn-size;
         border-width: $group-item-border-thickness;
+    }
 
-        &:focus-visible {
-            background: var-get($theme, 'item-background');
+    [part='toggle focused'] {
+        background: var-get($theme, 'item-background');
 
-            &::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($theme, 'item-focused-border-color');
-            }
+        &::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($theme, 'item-focused-border-color');
         }
     }
 }
 
 :host(:hover) {
-    [part~='toggle']:focus-visible {
+    [part='toggle focused'] {
         background: var-get($theme, 'item-hover-background');
     }
 }
 
 :host(:active) {
     [part~='toggle'] {
         background: var-get($theme, 'item-focused-background');
+    }
 
-        &:focus-visible {
-            background: var-get($theme, 'item-focused-background');
-        }
+    [part='toggle focused'] {
+        background: var-get($theme, 'item-focused-background');
     }
 }
 
@@ -60,7 +60,7 @@ $outline-btn-indent: rem(2px);
 }
 
 :host([selected]) {
-    [part~='toggle']:focus-visible {
+    [part='toggle focused'] {
         background: var-get($theme, 'item-selected-background');
     }
 }

diff --git a/src/components/button-group/themes/shared/button/button.indigo.scss b/src/components/button-group/themes/shared/button/button.indigo.scss
@@ -19,7 +19,7 @@ $group-item-border-thickness: rem(1px);
         --size: var(--button-icon) !important;
     }
 
-    [part~='toggle']:focus-visible {
+    [part='toggle focused'] {
         z-index: 2;
         box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');
         border-color: var-get($theme, 'item-border-color');
@@ -32,7 +32,7 @@ $group-item-border-thickness: rem(1px);
         z-index: 1;
     }
 
-    [part~='toggle']:focus-visible {
+    [part='toggle focused'] {
         border-color: var-get($theme, 'item-hover-border-color');
         color: var-get($theme, 'item-hover-text-color');
     }
@@ -52,13 +52,13 @@ $group-item-border-thickness: rem(1px);
 }
 
 :host([selected]:hover) {
-    [part~='toggle']:focus-visible {
+    [part='toggle focused'] {
         border-color: var-get($theme, 'item-selected-hover-border-color');
     }
 }
 
 :host([selected]) {
-    [part~='toggle']:focus-visible {
+    [part='toggle focused'] {
         box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');
         border-color: var-get($theme, 'item-selected-border-color');
         color: var-get($theme, 'item-selected-hover-text-color');

diff --git a/src/components/button-group/themes/shared/button/button.material.scss b/src/components/button-group/themes/shared/button/button.material.scss
@@ -12,7 +12,7 @@ $theme: $material;
         z-index: -1;
     }
 
-    [part~='toggle']:focus-visible {
+    [part='toggle focused'] {
         color: var-get($theme, 'item-hover-text-color');
         border-color: var-get($theme, 'item-hover-border-color');
 
@@ -35,11 +35,11 @@ $theme: $material;
             content: '';
             background: var-get($theme, 'item-hover-background');
         }
+    }
 
-        &:focus-visible {
-            &::before {
-                background: var-get($theme, 'item-focused-hover-background');
-            }
+    [part='toggle focused'] {
+        &::before {
+            background: var-get($theme, 'item-focused-hover-background');
         }
     }
 }
@@ -76,15 +76,15 @@ $theme: $material;
         }
     }
 
-    [part~='toggle']:focus-visible {
+    [part='toggle focused'] {
         &::before {
             background: var-get($theme, 'item-selected-focus-hover-background');
         }
     }
 }
 
 :host([selected]) {
-    [part~='toggle']:focus-visible {
+    [part='toggle focused'] {
         color: var-get($theme, 'item-selected-hover-text-color');
         border-color: var-get($theme, 'item-selected-hover-border-color');
 

diff --git a/src/components/button-group/toggle-button.ts b/src/components/button-group/toggle-button.ts
@@ -1,8 +1,9 @@
 import { LitElement, html } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
+import { partNameMap } from '../common/util.js';
 import { styles } from './themes/button.base.css.js';
 import { all } from './themes/button.js';
 import { styles as shared } from './themes/shared/button/button.common.css.js';
@@ -35,6 +36,9 @@ export default class IgcToggleButtonComponent extends LitElement {
   @query('[part="toggle"]', true)
   private _nativeButton!: HTMLButtonElement;
 
+  @state()
+  public focused = false;
+
   /**
    * The value attribute of the control.
    * @attr
@@ -56,6 +60,11 @@ export default class IgcToggleButtonComponent extends LitElement {
   @property({ type: Boolean, reflect: true })
   public disabled = false;
 
+  constructor() {
+    super();
+    this.addEventListener('keyup', this.handleKeyUp);
+  }
+
   /* alternateName: focusComponent */
   /** Sets focus on the button. */
   public override focus(options?: FocusOptions) {
@@ -73,15 +82,29 @@ export default class IgcToggleButtonComponent extends LitElement {
     this._nativeButton.click();
   }
 
+  protected handleBlur() {
+    this.focused = false;
+  }
+
+  protected handleKeyUp() {
+    if (!this.focused) {
+      this.focused = true;
+    }
+  }
+
   protected override render() {
     return html`
       <button
-        part="toggle"
+        part=${partNameMap({
+          toggle: true,
+          focused: this.focused,
+        })}
         type="button"
         ?disabled=${this.disabled}
         .ariaLabel=${this.ariaLabel}
         aria-pressed=${this.selected}
         aria-disabled=${this.disabled}
+        @blur=${this.handleBlur}
       >
         <slot></slot>
       </button>