Skip to content

Commit eb9e749

Browse files
authored
SummaryButton: Add focus styles (#103233)
* SummaryButton: Add focus styles * feedback * add border radious to hover too for now * use css vars for padding
1 parent 15400e3 commit eb9e749

File tree

1 file changed

+19
-4
lines changed

1 file changed

+19
-4
lines changed

packages/components/src/summary-button/style.scss

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@import "@wordpress/base-styles/variables";
33

44
.summary-button.components-button {
5-
padding: 24px;
5+
padding: $grid-unit-30;
66
display: block;
77
height: auto;
88
transition: none;
@@ -21,11 +21,15 @@
2121
}
2222

2323
&.has-density-low {
24-
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 12%, transparent);
24+
&:not(:focus-visible) {
25+
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 12%, transparent);
26+
}
2527
}
2628

2729
&.has-density-medium {
28-
box-shadow: 0 2px 1px -1px color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 12%, transparent);
30+
&:not(:focus-visible) {
31+
box-shadow: 0 2px 1px -1px color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 12%, transparent);
32+
}
2933
}
3034
}
3135

@@ -66,11 +70,22 @@
6670
}
6771

6872
&.has-density-medium {
69-
padding: 12px;
73+
padding: $grid-unit-15;
7074
box-shadow: 0 2px 1px -1px $gray-100;
7175

76+
// TODO: this should be handled better in `SummaryButtonList` component.
77+
// @see: https://github.com/Automattic/wp-calypso/pull/103233#issuecomment-2862541935
78+
&:focus-visible, &:hover:not(:disabled, [aria-disabled="true"]) {
79+
/* stylelint-disable-next-line scales/radii */
80+
border-radius: 7px;
81+
}
82+
7283
.summary-button-title {
7384
@include body-medium;
7485
}
7586
}
87+
88+
&:focus-visible {
89+
@include button-style__focus();
90+
}
7691
}

0 commit comments

Comments
 (0)