Skip to content

Commit 23a62ca

Browse files
aPreciado88benelan
aPreciado88
authored and
benelan
committed
feat(button): enhance component's interactivity states (#11590)
**Related Issue:** [#9246](#9246) ## Summary - Remove `hover` styling from all `focus` states. - Update `button` demos page `outline-fill` section to use `appearance="outline-fill"` instead of `appearance="outline"`. - `kind="neutral" appearance="solid"`: - Update `hover` `background-color` to `--calcite-color-border-3`. - Update `active` `background-color` to `--calcite-color-border-2`. - `kind="neutral" appearance="outline-fill | outline"`: - Update all `hover` stroke colors to `--calcite-color-border-input`. - Update all `active` stroke colors to `--calcite-color-text-3`. - `appearance="outline-fill"`: - Update `hover` to a `--calcite-color-foreground-2` `background` change instead of a stroke width change. - Update `active` to a `--calcite-color-foreground-3` `background` change instead of a stroke width change. - `appearance="outline"`: - Update `hover` to a `--calcite-color-transparent-hover` `background` change instead of a stroke width change. - Update `active` to a `--calcite-color-transparent-press` `background` change instead of a stroke width change.
1 parent 3753414 commit 23a62ca

File tree

3 files changed

+130
-132
lines changed

3 files changed

+130
-132
lines changed

‎packages/calcite-components/src/components/button/button.e2e.ts

-16
Original file line numberDiff line numberDiff line change
@@ -511,7 +511,6 @@ describe("calcite-button", () => {
511511
`;
512512
let page;
513513
let buttonEl;
514-
let buttonFocusStyle;
515514
let buttonHoverStyle;
516515

517516
it("should have defined CSS custom properties", async () => {
@@ -533,11 +532,6 @@ describe("calcite-button", () => {
533532
it("should render button pseudo classes with default values tied to light mode", async () => {
534533
page = await newE2EPage({ html: buttonSnippet });
535534
buttonEl = await page.find("calcite-button >>> button");
536-
await buttonEl.focus();
537-
await page.waitForChanges();
538-
buttonFocusStyle = await buttonEl.getComputedStyle();
539-
expect(buttonFocusStyle.getPropertyValue("background-color")).toEqual("rgba(0, 0, 0, 0.04)");
540-
541535
await buttonEl.hover();
542536
await page.waitForChanges();
543537
buttonHoverStyle = await buttonEl.getComputedStyle();
@@ -551,11 +545,6 @@ describe("calcite-button", () => {
551545
html: `<div class="calcite-mode-dark">${buttonSnippet}</div>`,
552546
});
553547
buttonEl = await page.find("calcite-button >>> button");
554-
await buttonEl.focus();
555-
await page.waitForChanges();
556-
buttonFocusStyle = await buttonEl.getComputedStyle();
557-
expect(buttonFocusStyle.getPropertyValue("background-color")).toEqual("rgba(255, 255, 255, 0.04)");
558-
559548
await buttonEl.hover();
560549
await page.waitForChanges();
561550
buttonHoverStyle = await buttonEl.getComputedStyle();
@@ -575,11 +564,6 @@ describe("calcite-button", () => {
575564
<div>${buttonSnippet}</div>`,
576565
});
577566
buttonEl = await page.find("calcite-button >>> button");
578-
await buttonEl.focus();
579-
await page.waitForChanges();
580-
buttonFocusStyle = await buttonEl.getComputedStyle();
581-
expect(buttonFocusStyle.getPropertyValue("background-color")).toEqual(overrideStyle);
582-
583567
await buttonEl.hover();
584568
await page.waitForChanges();
585569
buttonHoverStyle = await buttonEl.getComputedStyle();

‎packages/calcite-components/src/components/button/button.scss

+33-43
Original file line numberDiff line numberDiff line change
@@ -255,8 +255,7 @@
255255
--calcite-internal-button-text-color: var(--calcite-color-text-inverse);
256256
--calcite-internal-button-background-color: var(--calcite-color-brand);
257257

258-
&:hover,
259-
&:focus {
258+
&:hover {
260259
--calcite-internal-button-background-color: var(--calcite-color-brand-hover);
261260
}
262261
&:active {
@@ -270,8 +269,7 @@
270269
--calcite-internal-button-text-color: var(--calcite-color-text-inverse);
271270
--calcite-internal-button-background-color: var(--calcite-color-status-danger);
272271

273-
&:hover,
274-
&:focus {
272+
&:hover {
275273
--calcite-internal-button-background-color: var(--calcite-color-status-danger-hover);
276274
}
277275
&:active {
@@ -284,8 +282,7 @@
284282
a {
285283
--calcite-internal-button-text-color: var(--calcite-color-text-1);
286284
--calcite-internal-button-background-color: var(--calcite-color-foreground-3);
287-
&:hover,
288-
&:focus {
285+
&:hover {
289286
--calcite-internal-button-background-color: var(--calcite-color-foreground-2);
290287
}
291288
&:active {
@@ -298,55 +295,34 @@
298295
a {
299296
--calcite-internal-button-text-color: var(--calcite-color-text-inverse);
300297
--calcite-internal-button-background-color: var(--calcite-color-inverse);
301-
&:hover,
302-
&:focus {
298+
&:hover {
303299
--calcite-internal-button-background-color: var(--calcite-color-inverse-hover);
304300
}
305301
&:active {
306302
--calcite-internal-button-background-color: var(--calcite-color-inverse-press);
307303
}
308304
}
309305
}
310-
// outline
311-
:host([appearance="outline-fill"]),
312-
:host([appearance="outline"]) {
313-
a,
314-
button {
315-
box-shadow: inset 0 0 0 1px
316-
var(--calcite-button-shadow-color, var(--calcite-internal-button-shadow-color, transparent));
317-
318-
&:hover {
319-
box-shadow: inset 0 0 0 1px
320-
var(
321-
--calcite-button-shadow-color,
322-
var(--calcite-internal-button-shadow-color, var(--calcite-color-foreground-3))
323-
);
324-
}
325-
&:focus,
326-
&:active {
327-
box-shadow: inset 0 0 0 2px
328-
var(
329-
--calcite-button-shadow-color,
330-
var(--calcite-internal-button-shadow-color, var(--calcite-color-foreground-3))
331-
);
332-
}
333-
}
334-
}
335306

336307
:host([appearance="outline-fill"]) {
337308
button,
338309
a {
339310
--calcite-internal-button-background-color: var(--calcite-color-foreground-1);
340311
@apply border-solid;
341312
border-width: var(--calcite-button-border-size, 1px);
313+
&:hover {
314+
--calcite-internal-button-background-color: var(--calcite-color-foreground-2);
315+
}
316+
&:active {
317+
--calcite-internal-button-background-color: var(--calcite-color-foreground-3);
318+
}
342319
}
343320
}
344321
:host([appearance="outline-fill"][kind="brand"]) {
345322
button,
346323
a {
347324
--calcite-internal-button-border-color: var(--calcite-color-brand);
348325
--calcite-internal-button-text-color: theme("colors.brand");
349-
--calcite-internal-button-background-color: var(--calcite-color-foreground-1);
350326

351327
&:hover {
352328
--calcite-internal-button-border-color: var(--calcite-color-brand-hover);
@@ -372,7 +348,6 @@
372348
button,
373349
a {
374350
--calcite-internal-button-border-color: var(--calcite-color-status-danger);
375-
--calcite-internal-button-background-color: var(--calcite-color-foreground-1);
376351
--calcite-internal-button-text-color: theme("colors.danger");
377352

378353
&:hover {
@@ -400,24 +375,35 @@
400375
a {
401376
--calcite-internal-button-border-color: theme("borderColor.color.1");
402377
--calcite-internal-button-text-color: var(--calcite-color-text-1);
403-
--calcite-internal-button-background-color: var(--calcite-color-foreground-1);
404378

405379
&:hover {
406380
--calcite-internal-button-shadow-color: var(--calcite-color-foreground-3);
381+
--calcite-internal-button-border-color: var(--calcite-color-border-input);
407382
}
408383
&:focus {
409384
--calcite-internal-button-shadow-color: var(--calcite-color-foreground-3);
410385
}
411386
&:active {
412387
--calcite-internal-button-shadow-color: var(--calcite-color-foreground-3);
388+
--calcite-internal-button-border-color: var(--calcite-color-text-3);
389+
}
390+
}
391+
}
392+
:host([appearance="solid"][kind="neutral"]) {
393+
button,
394+
a {
395+
&:hover {
396+
--calcite-internal-button-background-color: var(--calcite-color-border-3);
397+
}
398+
&:active {
399+
--calcite-internal-button-background-color: var(--calcite-color-border-2);
413400
}
414401
}
415402
}
416403
:host([appearance="outline-fill"][kind="inverse"]) {
417404
button,
418405
a {
419406
--calcite-internal-button-text-color: var(--calcite-color-text-1);
420-
--calcite-internal-button-background-color: var(--calcite-color-foreground-1);
421407
--calcite-internal-button-border-color: var(--calcite-color-inverse);
422408

423409
&:hover {
@@ -441,14 +427,20 @@
441427

442428
@apply border-solid;
443429
border-width: var(--calcite-button-border-size, 1px);
430+
431+
&:hover {
432+
--calcite-internal-button-background-color: var(--calcite-color-transparent-hover);
433+
}
434+
&:active {
435+
--calcite-internal-button-background-color: var(--calcite-color-transparent-press);
436+
}
444437
}
445438
}
446439
:host([appearance="outline"][kind="brand"]) {
447440
button,
448441
a {
449442
--calcite-internal-button-border-color: var(--calcite-color-brand);
450443
--calcite-internal-button-text-color: theme("colors.brand");
451-
--calcite-internal-button-background-color: var(--calcite-color-transparent);
452444

453445
&:hover {
454446
--calcite-internal-button-border-color: var(--calcite-color-brand-hover);
@@ -475,7 +467,6 @@
475467
a {
476468
--calcite-internal-button-border-color: var(--calcite-color-status-danger);
477469
--calcite-internal-button-text-color: theme("colors.danger");
478-
--calcite-internal-button-background-color: var(--calcite-color-transparent);
479470

480471
&:hover {
481472
--calcite-internal-button-border-color: var(--calcite-color-status-danger-hover);
@@ -501,25 +492,25 @@
501492
button,
502493
a {
503494
--calcite-internal-button-text-color: var(--calcite-color-text-1);
504-
--calcite-internal-button-background-color: var(--calcite-color-transparent);
505495
--calcite-internal-button-border-color: theme("borderColor.color.1");
506496

507497
&:hover {
508498
--calcite-internal-button-shadow-color: var(--calcite-color-foreground-3);
499+
--calcite-internal-button-border-color: var(--calcite-color-border-input);
509500
}
510501
&:focus {
511502
--calcite-internal-button-shadow-color: var(--calcite-color-foreground-3);
512503
}
513504
&:active {
514505
--calcite-internal-button-shadow-color: var(--calcite-color-foreground-3);
506+
--calcite-internal-button-border-color: var(--calcite-color-text-3);
515507
}
516508
}
517509
}
518510
:host([appearance="outline"][kind="inverse"]) {
519511
button,
520512
a {
521513
--calcite-internal-button-text-color: var(--calcite-color-text-1);
522-
--calcite-internal-button-background-color: var(--calcite-color-transparent);
523514
--calcite-internal-button-border-color: var(--calcite-color-inverse);
524515
&:hover {
525516
--calcite-internal-button-border-color: var(--calcite-color-inverse-hover);
@@ -553,8 +544,7 @@
553544
button,
554545
a {
555546
background-color: var(--calcite-color-transparent);
556-
&:hover,
557-
&:focus {
547+
&:hover {
558548
background-color: var(--calcite-color-transparent-hover);
559549
}
560550
&:active {

0 commit comments

Comments
 (0)