From 0730732b075dce0b811a24708a14d2680fb080c8 Mon Sep 17 00:00:00 2001 From: sivanova Date: Fri, 26 Apr 2024 15:39:39 +0300 Subject: [PATCH] refactor(button): add focused part --- .../shared/button/button.bootstrap.scss | 1 - .../themes/shared/button/button.common.scss | 1 + .../themes/shared/group/group.bootstrap.scss | 1 - .../themes/shared/group/group.common.scss | 2 +- .../themes/shared/group/group.indigo.scss | 1 + src/components/button/button-base.ts | 31 ++++++++++++-- .../button/themes/button/button.base.scss | 6 +-- .../button/shared/button.bootstrap.scss | 18 ++++---- .../themes/button/shared/button.common.scss | 42 +++++++++---------- .../themes/button/shared/button.fluent.scss | 20 ++++----- .../themes/button/shared/button.indigo.scss | 26 ++++++------ .../themes/button/shared/button.material.scss | 14 +++---- 12 files changed, 94 insertions(+), 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 index e584f6ddb..80d3fb3d1 100644 --- 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 index 516e462b0..6498a42a7 100644 --- 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 index bb5fb6d7f..769c3b85c 100644 --- 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 index df7b2cf29..bbfbfe3ad 100644 --- 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 index 42c890488..4c7add300 100644 --- 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 index 1398fc323..6468a4127 100644 --- 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; @@ -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` @@ -153,7 +174,10 @@ export abstract class IgcButtonBaseComponent extends SizableMixin( private renderLinkButton() { return html` ${this.renderContent()} diff --git a/src/components/button/themes/button/button.base.scss b/src/components/button/themes/button/button.base.scss index f8450d670..ce5b4d902 100644 --- 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 index 0e8c1b630..897987824 100644 --- 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 index c675e6785..0c20733f2 100644 --- 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 index 7778afc21..e76084761 100644 --- 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,8 +45,8 @@ $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'); @@ -54,8 +54,8 @@ $outlined-btn-indent: rem(2px); } } -: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'); diff --git a/src/components/button/themes/button/shared/button.indigo.scss b/src/components/button/themes/button/shared/button.indigo.scss index dd2cb13c3..47fedb957 100644 --- a/src/components/button/themes/button/shared/button.indigo.scss +++ b/src/components/button/themes/button/shared/button.indigo.scss @@ -6,7 +6,7 @@ $contained-theme: $indigo-contained; $fab-theme: $indigo-fab; $outlined-theme: $indigo-outlined; -:host [part='base']{ +:host [part~='base']{ min-width: rem(28px); padding: 0 pad(10px, 16px, 24px); @@ -33,7 +33,7 @@ $outlined-theme: $indigo-outlined; :host([variant='fab']) { --component-size: var(--ig-size, #{var-get($fab-theme, 'default-size')}); - [part='base'] { + [part~='base'] { padding: 0 pad(rem(6px), rem(8px), rem(10px)); } } @@ -41,13 +41,13 @@ $outlined-theme: $indigo-outlined; :host([variant='flat']), :host([variant='contained']), :host([variant='outlined']) { - [part='base'] { + [part~='base'] { border-width: 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 { box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'shadow-color'); } @@ -59,8 +59,8 @@ $outlined-theme: $indigo-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'] { &:hover { border-color: var-get($outlined-theme, 'hover-border-color'); } @@ -87,8 +87,8 @@ $outlined-theme: $indigo-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'] { &:hover { border-color: var-get($contained-theme, 'hover-border-color'); } @@ -115,8 +115,8 @@ $outlined-theme: $indigo-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'] { border-color: var-get($fab-theme, 'border-color'); min-width: var(--size); min-height: var(--size); @@ -147,8 +147,8 @@ $outlined-theme: $indigo-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'] { border-color: var-get($outlined-theme, 'disabled-border-color'); border-width: rem(2px); } diff --git a/src/components/button/themes/button/shared/button.material.scss b/src/components/button/themes/button/shared/button.material.scss index a02ec6752..ed1b30bd5 100644 --- a/src/components/button/themes/button/shared/button.material.scss +++ b/src/components/button/themes/button/shared/button.material.scss @@ -22,12 +22,12 @@ $outlined-theme: $material-outlined; --component-size: var(--ig-size, #{var-get($fab-theme, 'default-size')}); } -[part='base'] { +[part~='base'] { transition: all .1s ease-in-out; } -: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'] { &:hover { border-color: var-get($outlined-theme, 'hover-border-color'); } @@ -41,8 +41,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'] { box-shadow: var-get($contained-theme, 'resting-elevation'); &:hover { @@ -62,8 +62,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'] { box-shadow: var-get($fab-theme, 'resting-elevation'); &:hover {