From 3eaf20c13b3f1366800fb3d3f08d8e6184427c66 Mon Sep 17 00:00:00 2001 From: "Nichols, Kieran" Date: Tue, 5 Mar 2024 13:47:46 -0500 Subject: [PATCH] chore: remove webkit tap color when used with card or expansion panel and update listener pattern --- src/lib/button-area/button-area-adapter.ts | 46 +++++++------------ src/lib/button-area/button-area-foundation.ts | 24 ++++------ src/lib/button-area/button-area.scss | 3 +- src/lib/card/_mixins.scss | 1 + src/lib/expansion-panel/_mixins.scss | 1 + 5 files changed, 28 insertions(+), 47 deletions(-) diff --git a/src/lib/button-area/button-area-adapter.ts b/src/lib/button-area/button-area-adapter.ts index ff8d85a4e..88870605c 100644 --- a/src/lib/button-area/button-area-adapter.ts +++ b/src/lib/button-area/button-area-adapter.ts @@ -9,17 +9,17 @@ import { BUTTON_AREA_CONSTANTS } from './button-area-constants'; export interface IButtonAreaAdapter extends IBaseAdapter { destroy(): void; setDisabled(value: boolean): void; - addListener(type: string, listener: (event: Event) => void, capture?: boolean): void; - removeListener(type: string, listener: (event: Event) => void, capture?: boolean): void; - addButtonSlotListener(type: string, listener: (event: Event) => void): void; - removeButtonSlotListener(type: string, listener: (event: Event) => void): void; - addContentSlotListener(type: string, listener: (event: Event) => void): void; - removeContentSlotListener(type: string, listener: (event: Event) => void): void; + addListener(type: string, listener: EventListener, capture?: boolean): void; + removeListener(type: string, listener: EventListener, capture?: boolean): void; + addButtonSlotListener(type: string, listener: EventListener): void; + removeButtonSlotListener(type: string, listener: EventListener): void; + addContentSlotListener(type: string, listener: EventListener): void; + removeContentSlotListener(type: string, listener: EventListener): void; animateStateLayer(): void; startButtonObserver(callback: MutationCallback): void; stopButtonObserver(): void; detectSlottedButton(): void; - buttonIsDisabled(): boolean; + isButtonDisabled(): boolean; requestDisabledButtonFrame(): void; } @@ -44,22 +44,8 @@ export class ButtonAreaAdapter extends BaseAdapter impleme } public destroy(): void { - if (typeof this._destroyUserInteractionListener === 'function') { - this._destroyUserInteractionListener(); - this._destroyUserInteractionListener = undefined; - } - } - - public get root(): HTMLElement { - return this._rootElement; - } - - public get unbounded(): boolean | undefined { - return false; - } - - public get disabled(): boolean | undefined { - return this.buttonIsDisabled(); + this._destroyUserInteractionListener?.(); + this._destroyUserInteractionListener = undefined; } public setDisabled(value: boolean): void { @@ -72,27 +58,27 @@ export class ButtonAreaAdapter extends BaseAdapter impleme } } - public addListener(type: string, listener: (event: Event) => void, capture?: boolean): void { + public addListener(type: string, listener: EventListener, capture?: boolean): void { this._rootElement.addEventListener(type, listener, { capture }); } - public removeListener(type: string, listener: (event: Event) => void, capture?: boolean): void { + public removeListener(type: string, listener: EventListener, capture?: boolean): void { this._rootElement.removeEventListener(type, listener, { capture }); } - public addButtonSlotListener(type: string, listener: (event: Event) => void): void { + public addButtonSlotListener(type: string, listener: EventListener): void { this._buttonSlotElement.addEventListener(type, listener); } - public removeButtonSlotListener(type: string, listener: (event: Event) => void): void { + public removeButtonSlotListener(type: string, listener: EventListener): void { this._buttonSlotElement.removeEventListener(type, listener); } - public addContentSlotListener(type: string, listener: (event: Event) => void): void { + public addContentSlotListener(type: string, listener: EventListener): void { this._contentSlotElement.addEventListener(type, listener); } - public removeContentSlotListener(type: string, listener: (event: Event) => void): void { + public removeContentSlotListener(type: string, listener: EventListener): void { this._contentSlotElement.removeEventListener(type, listener); } @@ -118,7 +104,7 @@ export class ButtonAreaAdapter extends BaseAdapter impleme this._buttonElement = this._buttonSlotElement.assignedElements()[0] as HTMLButtonElement | undefined; } - public buttonIsDisabled(): boolean { + public isButtonDisabled(): boolean { return this._buttonElement?.disabled ?? true; } diff --git a/src/lib/button-area/button-area-foundation.ts b/src/lib/button-area/button-area-foundation.ts index 1ce747677..d85a92008 100644 --- a/src/lib/button-area/button-area-foundation.ts +++ b/src/lib/button-area/button-area-foundation.ts @@ -9,19 +9,13 @@ export interface IButtonAreaFoundation extends ICustomElementFoundation { export class ButtonAreaFoundation implements IButtonAreaFoundation { private _disabled = false; - private _clickListener: (event: Event) => void; - private _keydownListener: (event: KeyboardEvent) => void; - private _pointerdownListener: (event: Event) => void; - private _ignoreStateLayerListener: (event: Event) => void; - private _slotListener: () => void; - - constructor(private _adapter: IButtonAreaAdapter) { - this._clickListener = event => this._handleClick(event); - this._keydownListener = event => this._handleKeydown(event); - this._pointerdownListener = event => this._handlePointerdown(event); - this._ignoreStateLayerListener = event => this._handleIgnoreStateLayer(event); - this._slotListener = () => this._handleSlotChange(); - } + private _clickListener = this._handleClick.bind(this); + private _keydownListener = this._handleKeydown.bind(this); + private _pointerdownListener = this._handlePointerdown.bind(this); + private _ignoreStateLayerListener = this._handleIgnoreStateLayer.bind(this); + private _slotListener = this._handleSlotChange.bind(this); + + constructor(private _adapter: IButtonAreaAdapter) {} public initialize(): void { this._adapter.addListener('click', this._clickListener); @@ -106,7 +100,7 @@ export class ButtonAreaFoundation implements IButtonAreaFoundation { this._adapter.startButtonObserver(() => this._handleButtonDisabled()); // Match the component and button states if either is disabled - if (this._adapter.buttonIsDisabled()) { + if (this._adapter.isButtonDisabled()) { this.disabled = true; } else if (this._disabled) { this._adapter.setDisabled(true); @@ -114,7 +108,7 @@ export class ButtonAreaFoundation implements IButtonAreaFoundation { } private _handleButtonDisabled(): void { - this.disabled = this._adapter.buttonIsDisabled(); + this.disabled = this._adapter.isButtonDisabled(); } private _shouldIgnoreEvent(event: Event): boolean { diff --git a/src/lib/button-area/button-area.scss b/src/lib/button-area/button-area.scss index 0218400be..4ee29357a 100644 --- a/src/lib/button-area/button-area.scss +++ b/src/lib/button-area/button-area.scss @@ -7,7 +7,6 @@ // Host // - :host { @include host; @@ -31,7 +30,7 @@ // .forge-button-area { - @include tokens(); + @include tokens; } .forge-button-area { diff --git a/src/lib/card/_mixins.scss b/src/lib/card/_mixins.scss index 3476fd515..14529fd94 100644 --- a/src/lib/card/_mixins.scss +++ b/src/lib/card/_mixins.scss @@ -32,6 +32,7 @@ @include theme.property(border-color, border-color); box-sizing: border-box; + -webkit-tap-highlight-color: transparent; } @mixin raised() { diff --git a/src/lib/expansion-panel/_mixins.scss b/src/lib/expansion-panel/_mixins.scss index df37ed79f..8fd3fe085 100644 --- a/src/lib/expansion-panel/_mixins.scss +++ b/src/lib/expansion-panel/_mixins.scss @@ -32,6 +32,7 @@ @mixin header() { outline: none; + -webkit-tap-highlight-color: transparent; } @mixin header-hover() {