refactor(button): add focused part

IgniteUI · Apr 26, 2024 · 0730732 · 0730732
1 parent d7c0e71
commit 0730732
Show file tree

Hide file tree

Showing 12 changed files with 94 additions and 69 deletions.
diff --git a/src/components/button-group/themes/shared/button/button.bootstrap.scss b/src/components/button-group/themes/shared/button/button.bootstrap.scss
@@ -12,7 +12,6 @@ $group-item-border-thickness: rem(1px);
         border-width: $group-item-border-thickness;
         padding-inline: pad-inline(rem(8px), rem(10px), rem(12px));
         padding-block: pad-block(rem(2px), rem(4px), rem(7px));
-        min-width: var(--button-min-width);
 
         &::before {
             position: absolute;

diff --git a/src/components/button-group/themes/shared/button/button.common.scss b/src/components/button-group/themes/shared/button/button.common.scss
@@ -23,6 +23,7 @@ $theme: $material;
         --igx-icon-size: #{$icon-size};
 
         min-height: $material-flat-btn-size;
+        min-width: var(--button-min-width);
         color: var-get($theme, 'item-text-color');
         background: var-get($theme, 'item-background');
         padding-inline: rem(16px);

diff --git a/src/components/button-group/themes/shared/group/group.bootstrap.scss b/src/components/button-group/themes/shared/group/group.bootstrap.scss
@@ -5,5 +5,4 @@ $theme: $bootstrap;
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
-    --button-min-width: #{rem(42px)};
 }
diff --git a/src/components/button-group/themes/shared/group/group.common.scss b/src/components/button-group/themes/shared/group/group.common.scss
@@ -5,7 +5,7 @@ $theme: $material;
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
-    --button-min-width: #{rem(50px)};
+    --button-min-width: #{rem(42px)};
 }
 
 [part~='group'] {

diff --git a/src/components/button-group/themes/shared/group/group.indigo.scss b/src/components/button-group/themes/shared/group/group.indigo.scss
@@ -5,4 +5,5 @@ $theme: $indigo;
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
+    --button-min-width: #{rem(32px)};
 }
diff --git a/src/components/button/button-base.ts b/src/components/button/button-base.ts
@@ -1,11 +1,12 @@
 import { LitElement, type TemplateResult, html, nothing } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { EventEmitterMixin } from '../common//mixins/event-emitter.js';
 import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { SizableMixin } from '../common/mixins/sizable.js';
+import { partNameMap } from '../common/util.js';
 
 export interface IgcButtonEventMap {
   igcFocus: CustomEvent<void>;
@@ -29,6 +30,9 @@ export abstract class IgcButtonBaseComponent extends SizableMixin(
   @query('[part="base"]', true)
   private _nativeButton!: HTMLButtonElement;
 
+  @state()
+  protected focused = false;
+
   /* alternateName: displayType */
   /**
    * The type of the button. Defaults to `button`.
@@ -90,6 +94,7 @@ export abstract class IgcButtonBaseComponent extends SizableMixin(
   constructor() {
     super();
     this.__internals = this.attachInternals();
+    this.addEventListener('keyup', this.handleKeyUp);
     this.size = 'medium';
   }
 
@@ -116,6 +121,7 @@ export abstract class IgcButtonBaseComponent extends SizableMixin(
 
   protected handleBlur() {
     this.emitEvent('igcBlur');
+    this.focused = false;
   }
 
   protected handleClick() {
@@ -129,6 +135,17 @@ export abstract class IgcButtonBaseComponent extends SizableMixin(
     }
   }
 
+  protected handleMouseDown(event: PointerEvent) {
+    event.preventDefault();
+    this.focused = false;
+  }
+
+  protected handleKeyUp() {
+    if (!this.focused) {
+      this.focused = true;
+    }
+  }
+
   protected formDisabledCallback(state: boolean) {
     this._disabled = state;
     this.requestUpdate();
@@ -137,13 +154,17 @@ export abstract class IgcButtonBaseComponent extends SizableMixin(
   private renderButton() {
     return html`
       <button
-        part="base"
+        part=${partNameMap({
+          base: true,
+          focused: this.focused,
+        })}
         aria-label=${ifDefined(this.ariaLabel ?? nothing)}
         ?disabled=${this.disabled}
         type=${ifDefined(this.type)}
         @click=${this.handleClick}
         @focus=${this.handleFocus}
         @blur=${this.handleBlur}
+        @pointerdown=${this.handleMouseDown}
       >
         ${this.renderContent()}
       </button>
@@ -153,7 +174,10 @@ export abstract class IgcButtonBaseComponent extends SizableMixin(
   private renderLinkButton() {
     return html`
       <a
-        part="base"
+        part=${partNameMap({
+          base: true,
+          focused: this.focused,
+        })}
         role="button"
         aria-label=${ifDefined(this.ariaLabel ?? nothing)}
         aria-disabled=${this.disabled ? 'true' : 'false'}
@@ -163,6 +187,7 @@ export abstract class IgcButtonBaseComponent extends SizableMixin(
         rel=${ifDefined(this.rel)}
         @focus=${this.disabled ? nothing : this.handleFocus}
         @blur=${this.disabled ? nothing : this.handleBlur}
+        @pointerdown=${this.disabled ? nothing : this.handleMouseDown}
       >
         ${this.renderContent()}
       </a>

diff --git a/src/components/button/themes/button/button.base.scss b/src/components/button/themes/button/button.base.scss
@@ -20,7 +20,7 @@
     }
 }
 
-[part='base'] {
+[part~='base'] {
     @include type-style(button);
 
     position: relative;
@@ -41,8 +41,8 @@
     min-width: rem(88px);
 }
 
-:host(:not([disabled])) [part='base']:hover,
-:host(:not(:disabled)) [part='base']:hover {
+:host(:not([disabled])) [part~='base']:hover,
+:host(:not(:disabled)) [part~='base']:hover {
     cursor: pointer;
 }
 

diff --git a/src/components/button/themes/button/shared/button.bootstrap.scss b/src/components/button/themes/button/shared/button.bootstrap.scss
@@ -13,7 +13,7 @@ $outlined-theme: $bootstrap-outlined;
 :host([variant='outlined']) {
     --component-size: var(--ig-size, #{var-get($outlined-theme, 'default-size')});
 
-    [part='base'] {
+    [part~='base'] {
         &:focus {
             border: rem(1px) solid var-get($outlined-theme, 'focus-border-color');
         }
@@ -28,8 +28,8 @@ $outlined-theme: $bootstrap-outlined;
     --component-size: var(--ig-size, #{var-get($fab-theme, 'default-size')});
 }
 
-:host(:not([disabled])[variant='flat']) [part='base'],
-:host(:not(:disabled)[variant='flat']) [part='base'] {
+:host(:not([disabled])[variant='flat']) [part~='base'],
+:host(:not(:disabled)[variant='flat']) [part~='base'] {
     &:focus-visible {
         box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'shadow-color');
     }
@@ -41,8 +41,8 @@ $outlined-theme: $bootstrap-outlined;
     }
 }
 
-:host(:not([disabled])[variant='outlined']) [part='base'],
-:host(:not(:disabled)[variant='outlined']) [part='base'] {
+:host(:not([disabled])[variant='outlined']) [part~='base'],
+:host(:not(:disabled)[variant='outlined']) [part~='base'] {
     &:focus-visible {
         box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'shadow-color');
 
@@ -64,8 +64,8 @@ $outlined-theme: $bootstrap-outlined;
     }
 }
 
-:host(:not([disabled])[variant='contained']) [part='base'],
-:host(:not(:disabled)[variant='contained']) [part='base'] {
+:host(:not([disabled])[variant='contained']) [part~='base'],
+:host(:not(:disabled)[variant='contained']) [part~='base'] {
     &:focus-visible {
         box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color');
     }
@@ -77,8 +77,8 @@ $outlined-theme: $bootstrap-outlined;
     }
 }
 
-:host(:not([disabled])[variant='fab']) [part='base'],
-:host(:not(:disabled)[variant='fab']) [part='base'] {
+:host(:not([disabled])[variant='fab']) [part~='base'],
+:host(:not(:disabled)[variant='fab']) [part~='base'] {
     &:focus-visible {
         box-shadow: 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color');
     }

diff --git a/src/components/button/themes/button/shared/button.common.scss b/src/components/button/themes/button/shared/button.common.scss
@@ -7,25 +7,25 @@ $fab-theme: $material-fab;
 $outlined-theme: $material-outlined;
 
 /* stylelint-disable */
-:host([variant='flat']) [part='base'] {
+:host([variant='flat']) [part~='base'] {
     border-radius: var-get($flat-theme, 'border-radius');
     height: var-get($flat-theme, 'size');
     border: rem(1px) solid var-get($flat-theme, 'border-color');
 }
 
-:host([variant='outlined']) [part='base'] {
+:host([variant='outlined']) [part~='base'] {
     border-radius: var-get($outlined-theme, 'border-radius');
     height: var-get($outlined-theme, 'size');
     border: rem(1px) solid var-get($outlined-theme, 'border-color');
 }
 
-:host([variant='contained']) [part='base'] {
+:host([variant='contained']) [part~='base'] {
     border-radius: var-get($contained-theme, 'border-radius');
     height: var-get($contained-theme, 'size');
     border: rem(1px) solid var-get($contained-theme, 'border-color');
 }
 
-:host([variant='fab']) [part='base'] {
+:host([variant='fab']) [part~='base'] {
     border: rem(1px) solid var-get($fab-theme, 'border-color');
     border-radius: var-get($fab-theme, 'border-radius');
     min-height: var-get($fab-theme, 'size');
@@ -34,7 +34,7 @@ $outlined-theme: $material-outlined;
 }
 /* stylelint-enable */
 
-[part='base'] {
+[part~='base'] {
     transition: all .15s ease-in-out;
 
     ::slotted(igc-icon) {
@@ -43,8 +43,8 @@ $outlined-theme: $material-outlined;
     }
 }
 
-:host(:not([disabled])[variant='flat']) [part='base'],
-:host(:not(:disabled)[variant='flat']) [part='base'] {
+:host(:not([disabled])[variant='flat']) [part~='base'],
+:host(:not(:disabled)[variant='flat']) [part~='base'] {
     color: var-get($flat-theme, 'foreground');
     background: var-get($flat-theme, 'background');
 
@@ -90,8 +90,8 @@ $outlined-theme: $material-outlined;
     }
 }
 
-:host(:not([disabled])[variant='outlined']) [part='base'],
-:host(:not(:disabled)[variant='outlined']) [part='base'] {
+:host(:not([disabled])[variant='outlined']) [part~='base'],
+:host(:not(:disabled)[variant='outlined']) [part~='base'] {
     color: var-get($outlined-theme, 'foreground');
     background: var-get($outlined-theme, 'background');
 
@@ -138,8 +138,8 @@ $outlined-theme: $material-outlined;
     }
 }
 
-:host(:not([disabled])[variant='contained']) [part='base'],
-:host(:not(:disabled)[variant='contained']) [part='base'] {
+:host(:not([disabled])[variant='contained']) [part~='base'],
+:host(:not(:disabled)[variant='contained']) [part~='base'] {
     color: var-get($contained-theme, 'foreground');
     background: var-get($contained-theme, 'background');
 
@@ -185,8 +185,8 @@ $outlined-theme: $material-outlined;
     }
 }
 
-:host(:not([disabled])[variant='fab']) [part='base'],
-:host(:not(:disabled)[variant='fab']) [part='base'] {
+:host(:not([disabled])[variant='fab']) [part~='base'],
+:host(:not(:disabled)[variant='fab']) [part~='base'] {
     color: var-get($fab-theme, 'foreground');
     background: var-get($fab-theme, 'background');
 
@@ -232,8 +232,8 @@ $outlined-theme: $material-outlined;
     }
 }
 
-:host([disabled][variant='flat']) [part='base'],
-:host(:disabled[variant='flat']) [part='base'] {
+:host([disabled][variant='flat']) [part~='base'],
+:host(:disabled[variant='flat']) [part~='base'] {
     color: var-get($flat-theme, 'disabled-foreground');
     background: var-get($flat-theme, 'disabled-background');
 
@@ -242,8 +242,8 @@ $outlined-theme: $material-outlined;
     }
 }
 
-:host([disabled][variant='outlined']) [part='base'],
-:host(:disabled[variant='outlined']) [part='base'] {
+:host([disabled][variant='outlined']) [part~='base'],
+:host(:disabled[variant='outlined']) [part~='base'] {
     color: var-get($outlined-theme, 'disabled-foreground');
     background: var-get($outlined-theme, 'disabled-background');
     border: rem(1px) solid var-get($outlined-theme, 'disabled-border-color');
@@ -253,8 +253,8 @@ $outlined-theme: $material-outlined;
     }
 }
 
-:host([disabled][variant='contained']) [part='base'],
-:host(:disabled[variant='contained']) [part='base'] {
+:host([disabled][variant='contained']) [part~='base'],
+:host(:disabled[variant='contained']) [part~='base'] {
     color: var-get($contained-theme, 'disabled-foreground');
     background: var-get($contained-theme, 'disabled-background');
 
@@ -263,8 +263,8 @@ $outlined-theme: $material-outlined;
     }
 }
 
-:host([disabled][variant='fab']) [part='base'],
-:host(:disabled[variant='fab']) [part='base'] {
+:host([disabled][variant='fab']) [part~='base'],
+:host(:disabled[variant='fab']) [part~='base'] {
     color: var-get($fab-theme, 'disabled-foreground');
     background: var-get($fab-theme, 'disabled-background');
 

diff --git a/src/components/button/themes/button/shared/button.fluent.scss b/src/components/button/themes/button/shared/button.fluent.scss
@@ -23,14 +23,14 @@ $outlined-btn-indent: rem(2px);
 :host([variant='fab']) {
     --component-size: var(--ig-size, #{var-get($fab-theme, 'default-size')});
 
-    [part='base'] {
+    [part~='base'] {
         &::after {
             border-radius: calc(#{var-get($fab-theme, 'border-radius')} - #{$btn-indent});
         }
     }
 }
 
-[part='base'] {
+[part~='base'] {
     padding: 0 pad(8px, 12px, 16px);
     transition: all .1s ease-in-out;
 
@@ -45,17 +45,17 @@ $outlined-btn-indent: rem(2px);
     }
 }
 
-:host(:not([disabled])[variant='flat']) [part='base'],
-:host(:not(:disabled)[variant='flat']) [part='base'] {
+:host(:not([disabled])[variant='flat']) [part~='base'],
+:host(:not(:disabled)[variant='flat']) [part~='base'] {
     &:focus-visible {
         &::after {
             box-shadow: 0 0 0 rem(1px) var-get($flat-theme, 'focus-visible-border-color');
         }
     }
 }
 
-:host(:not([disabled])[variant='outlined']) [part='base'],
-:host(:not(:disabled)[variant='outlined']) [part='base'] {
+:host(:not([disabled])[variant='outlined']) [part~='base'],
+:host(:not(:disabled)[variant='outlined']) [part~='base'] {
     border: rem(1px) solid var-get($outlined-theme, 'border-color');
 
     &:active {
@@ -73,8 +73,8 @@ $outlined-btn-indent: rem(2px);
     }
 }
 
-:host(:not([disabled])[variant='contained']) [part='base'],
-:host(:not(:disabled)[variant='contained']) [part='base'] {
+:host(:not([disabled])[variant='contained']) [part~='base'],
+:host(:not(:disabled)[variant='contained']) [part~='base'] {
     &:focus-visible {
         color: var-get($contained-theme, 'focus-visible-foreground');
         background: var-get($contained-theme, 'focus-visible-background');
@@ -86,8 +86,8 @@ $outlined-btn-indent: rem(2px);
     }
 }
 
-:host(:not([disabled])[variant='fab']) [part='base'],
-:host(:not(:disabled)[variant='fab']) [part='base'] {
+:host(:not([disabled])[variant='fab']) [part~='base'],
+:host(:not(:disabled)[variant='fab']) [part~='base'] {
     &:focus-visible {
         color: var-get($fab-theme, 'focus-visible-foreground');
         background: var-get($fab-theme, 'focus-visible-background');