Skip to content

Commit 4fceffb

Browse files
bennypowersbennypowers
authored
fix(button): use :active pseudo (#2711)
* fix(button): use :active pseudo for persistence of state when click is dragged out of the element * fix(button): active/hover styles for link variant
1 parent a958d52 commit 4fceffb

File tree

2 files changed

+67
-77
lines changed

2 files changed

+67
-77
lines changed

‎elements/pf-button/pf-button.css‎

Lines changed: 66 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -77,21 +77,6 @@ pf-icon,
7777
position: relative;
7878
}
7979

80-
.active,
81-
:host(:active) {
82-
--pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--active--Color,
83-
var(--pf-global--Color--light-100, #fff));
84-
--pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--active--BackgroundColor,
85-
var(--pf-global--primary-color--200, #004080));
86-
--pf-c-button--after--BorderWidth: var(--pf-c-button--active--after--BorderWidth,
87-
var(--pf-global--BorderWidth--md, 2px));
88-
/* DANGER */
89-
--pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--active--Color,
90-
var(--pf-global--Color--light-100, #fff));
91-
--pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--active--BackgroundColor,
92-
var(--pf-global--danger-color--200, #a30000));
93-
}
94-
9580
:host(:focus) {
9681
--pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--focus--Color,
9782
var(--pf-global--Color--light-100, #fff));
@@ -138,6 +123,24 @@ pf-icon,
138123
transparent);
139124
}
140125

126+
:host(:active) {
127+
--pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--active--Color,
128+
var(--pf-global--Color--light-100, #fff));
129+
--pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--active--BackgroundColor,
130+
var(--pf-global--primary-color--200, #004080));
131+
--pf-c-button--after--BorderWidth: var(--pf-c-button--active--after--BorderWidth,
132+
var(--pf-global--BorderWidth--md, 2px));
133+
/* DANGER */
134+
--pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--active--Color,
135+
var(--pf-global--Color--light-100, #fff));
136+
--pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--active--BackgroundColor,
137+
var(--pf-global--danger-color--200, #a30000));
138+
/* LINK */
139+
--pf-c-button--m-link--Color: var(--pf-c-button--m-link--active--Color,
140+
var(--pf-global--link--Color--hover, #004080));
141+
--pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--active--BackgroundColor, transparent);
142+
}
143+
141144
.hasIcon [part=icon] {
142145
cursor: pointer;
143146
}
@@ -184,7 +187,7 @@ pf-icon,
184187
var(--pf-global--Color--200, #6a6e73));
185188
--_button-background-color: var(--pf-c-button--m-plain--BackgroundColor,
186189
transparent);
187-
&.active {
190+
:host(:active) & {
188191
--pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--active--Color,
189192
var(--pf-global--Color--100, #151515));
190193
--pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--active--BackgroundColor,
@@ -236,12 +239,6 @@ pf-icon,
236239
var(--pf-global--Color--dark-100, #151515));
237240
--_button-background-color: var(--pf-c-button--m-warning--BackgroundColor,
238241
var(--pf-global--warning-color--100, #f0ab00));
239-
&.active {
240-
--pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--active--Color,
241-
var(--pf-global--Color--dark-100, #151515));
242-
--pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--active--BackgroundColor,
243-
var(--pf-global--palette--gold-500, #c58c00));
244-
}
245242
:host(:focus) & {
246243
--pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--focus--Color,
247244
var(--pf-global--Color--dark-100, #151515));
@@ -254,6 +251,12 @@ pf-icon,
254251
--pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--hover--BackgroundColor,
255252
var(--pf-global--palette--gold-500, #c58c00));
256253
}
254+
:host(:active) & {
255+
--pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--active--Color,
256+
var(--pf-global--Color--dark-100, #151515));
257+
--pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--active--BackgroundColor,
258+
var(--pf-global--palette--gold-500, #c58c00));
259+
}
257260
&.disabled {
258261
--_button-color: var(--pf-c-button--disabled--Color,
259262
var(--pf-global--disabled-color--100, #6a6e73));
@@ -321,17 +324,6 @@ pf-icon,
321324
--_button-background-color: var(--pf-c-button--m-secondary--BackgroundColor, transparent);
322325
--pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--after--BorderColor,
323326
var(--pf-global--primary-color--100, #06c));
324-
&.active {
325-
--pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--active--Color,
326-
var(--pf-global--primary-color--100, #06c));
327-
--pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--active--BackgroundColor, transparent);
328-
--pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--active--after--BorderColor,
329-
var(--pf-global--primary-color--100, #06c));
330-
/* DANGER */
331-
--pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--active--Color,
332-
var(--pf-global--danger--color--200, #a30000));
333-
--pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--active--BackgroundColor, transparent);
334-
}
335327
:host(:focus) & {
336328
--pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--focus--Color,
337329
var(--pf-global--primary-color--100, #06c));
@@ -355,16 +347,23 @@ pf-icon,
355347
var(--pf-global--danger--color--200, #a30000));
356348
--pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--hover--BackgroundColor, transparent);
357349
}
350+
:host(:active) & {
351+
--pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--active--Color,
352+
var(--pf-global--primary-color--100, #06c));
353+
--pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--active--BackgroundColor, transparent);
354+
--pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--active--after--BorderColor,
355+
var(--pf-global--primary-color--100, #06c));
356+
/* DANGER */
357+
--pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--active--Color,
358+
var(--pf-global--danger--color--200, #a30000));
359+
--pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--active--BackgroundColor, transparent);
360+
}
358361
&.danger {
359362
--_button-color: var(--pf-c-button--m-secondary--m-danger--Color,
360363
var(--pf-global--danger--color--100, #c9190b));
361364
--_button-background-color: var(--pf-c-button--m-secondary--m-danger--BackgroundColor, transparent);
362365
--pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--after--BorderColor,
363366
var(--pf-global--danger--color--100, #c9190b));
364-
&.active {
365-
--pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--active--after--BorderColor,
366-
var(--pf-global--danger--color--100, #c9190b));
367-
}
368367
:host(:focus) & {
369368
--pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--focus--after--BorderColor,
370369
var(--pf-global--danger--color--100, #c9190b));
@@ -373,6 +372,10 @@ pf-icon,
373372
--pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--hover--after--BorderColor,
374373
var(--pf-global--danger--color--100, #c9190b));
375374
}
375+
:host(:active) & {
376+
--pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--active--after--BorderColor,
377+
var(--pf-global--danger--color--100, #c9190b));
378+
}
376379
}
377380
}
378381

@@ -388,13 +391,6 @@ pf-icon,
388391
--_button-color: var(--pf-c-button--m-tertiary--Color,
389392
var(--pf-global--Color--100, #151515));
390393
--_button-background-color: var(--pf-c-button--m-tertiary--BackgroundColor, transparent);
391-
&.active {
392-
--pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--active--Color,
393-
var(--pf-global--Color--100, #151515));
394-
--pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--active--BackgroundColor, transparent);
395-
--pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--active--after--BorderColor,
396-
var(--pf-global--Color--100, #151515));
397-
}
398394
:host(:focus) & {
399395
--pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--focus--Color,
400396
var(--pf-global--Color--100, #151515));
@@ -410,6 +406,13 @@ pf-icon,
410406
--pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--hover--after--BorderColor,
411407
var(--pf-global--Color--100, #151515));
412408
}
409+
:host(:active) & {
410+
--pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--active--Color,
411+
var(--pf-global--Color--100, #151515));
412+
--pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--active--BackgroundColor, transparent);
413+
--pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--active--after--BorderColor,
414+
var(--pf-global--Color--100, #151515));
415+
}
413416
}
414417

415418
/******************************
@@ -438,18 +441,6 @@ pf-icon,
438441
var(--pf-global--Color--100, #151515));
439442
--_button-background-color: var(--pf-c-button--m-control--BackgroundColor,
440443
var(--pf-global--BackgroundColor--100, #fff));
441-
&.active {
442-
--pf-c-button--m-control--Color: var(--pf-c-button--m-control--active--Color,
443-
var(--pf-global--Color--100, #151515));
444-
--pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--active--BackgroundColor,
445-
var(--pf-global--BackgroundColor--100, #fff));
446-
--pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--active--after--BorderBottomColor,
447-
var(--pf-global--active-color--100, #06c));
448-
&::after {
449-
border-block-end-width: var(--pf-c-button--m-control--active--after--BorderBottomWidth,
450-
var(--pf-global--BorderWidth--md, 2px));
451-
}
452-
}
453444
:host(:focus) & {
454445
--pf-c-button--m-control--Color: var(--pf-c-button--m-control--focus--Color,
455446
var(--pf-global--Color--100, #151515));
@@ -474,6 +465,18 @@ pf-icon,
474465
var(--pf-global--BorderWidth--md, 2px));
475466
}
476467
}
468+
:host(:active) & {
469+
--pf-c-button--m-control--Color: var(--pf-c-button--m-control--active--Color,
470+
var(--pf-global--Color--100, #151515));
471+
--pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--active--BackgroundColor,
472+
var(--pf-global--BackgroundColor--100, #fff));
473+
--pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--active--after--BorderBottomColor,
474+
var(--pf-global--active-color--100, #06c));
475+
&::after {
476+
border-block-end-width: var(--pf-c-button--m-control--active--after--BorderBottomWidth,
477+
var(--pf-global--BorderWidth--md, 2px));
478+
}
479+
}
477480
}
478481

479482
/******************************
@@ -484,13 +487,9 @@ pf-icon,
484487

485488
#button.link {
486489
--pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-link--disabled--BackgroundColor, transparent);
487-
--pf-c-button--m-link--Color: var(--pf-c-button--m-link--active--Color,
488-
var(--pf-global--link--Color--hover, #004080));
489-
--pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--active--BackgroundColor, transparent);
490-
--_button-color: var(--pf-c-button--m-link--Color,
491-
var(--pf-global--link--Color, #06c));
490+
--_button-color: var(--pf-c-button--m-link--Color, var(--pf-global--link--Color, #06c));
492491
--_button-background-color: var(--pf-c-button--m-link--BackgroundColor,
493-
var(--pf-c-button--m-link--hover--BackgroundColor, transparent));
492+
var(--pf-c-button--m-link--BackgroundColor, transparent));
494493
&.inline {
495494
:host(:hover) & {
496495
text-decoration: var(--pf-c-button--m-link--m-inline--hover--TextDecoration,
@@ -501,11 +500,6 @@ pf-icon,
501500
--pf-c-button--m-danger--Color: var(--pf-c-button--m-link--m-danger--Color,
502501
var(--pf-global--danger-color--100, #c9190b));
503502
--pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--BackgroundColor, transparent);
504-
&.active {
505-
--pf-c-button--m-link--m-danger--Color: var(--pf-c-button--m-link--m-danger--active--Color,
506-
var(--pf-global--danger-color--200, #a30000));
507-
--pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--active--BackgroundColor, transparent);
508-
}
509503
:host(:hover) & {
510504
--pf-c-button--m-link--m-danger--Color: var(--pf-c-button--m-link--m-danger--hover--Color,
511505
var(--pf-global--danger-color--200, #a30000));
@@ -516,6 +510,11 @@ pf-icon,
516510
var(--pf-global--danger-color--200, #a30000));
517511
--pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--focus--BackgroundColor, transparent);
518512
}
513+
:host(:active) & {
514+
--pf-c-button--m-link--m-danger--Color: var(--pf-c-button--m-link--m-danger--active--Color,
515+
var(--pf-global--danger-color--200, #a30000));
516+
--pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--active--BackgroundColor, transparent);
517+
}
519518
}
520519
}
521520

‎elements/pf-button/pf-button.ts‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -206,8 +206,6 @@ export class PfButton extends LitElement {
206206
/** Disables the button */
207207
@property({ reflect: true, type: Boolean }) disabled = false;
208208

209-
@state() private active = false;
210-
211209
@property({ reflect: true }) type?: 'button' | 'submit' | 'reset';
212210

213211
/** Accessible name for the button, use when the button does not have slotted text */
@@ -229,8 +227,6 @@ export class PfButton extends LitElement {
229227
override connectedCallback(): void {
230228
super.connectedCallback();
231229
this.addEventListener('click', this.#onClick);
232-
this.addEventListener('mousedown', this.#onMouse);
233-
this.addEventListener('mouseup', this.#onMouse);
234230
this.addEventListener('keydown', this.#onKeydown);
235231
this.tabIndex = 0;
236232
}
@@ -242,14 +238,13 @@ export class PfButton extends LitElement {
242238

243239
protected override render() {
244240
const hasIcon = !!this.icon || !!this.loading;
245-
const { active, warning, variant, danger, loading, plain, inline, block, size } = this;
241+
const { warning, variant, danger, loading, plain, inline, block, size } = this;
246242
const disabled = this.#disabled;
247243
return html`
248244
<div id="button"
249245
class="${classMap({
250246
[variant]: true,
251247
[size ?? '']: !!size,
252-
active,
253248
inline,
254249
block,
255250
danger,
@@ -289,10 +284,6 @@ export class PfButton extends LitElement {
289284
}
290285
}
291286

292-
#onMouse(event: MouseEvent) {
293-
this.active = !!Math.max(['mouseup', 'mousedown'].indexOf(event.type), 0);
294-
}
295-
296287
#onKeydown(event: KeyboardEvent) {
297288
switch (event.key) {
298289
case ' ':

0 commit comments

Comments
 (0)