Skip to content

Commit adc8a8f

Browse files
TylerJDevTylerJDev
authored
Fix border styles for ActionList.Item (#4735)
* Fix border/hover styles in `ActionList` * Update snapshots
1 parent d773f26 commit adc8a8f

File tree

3 files changed

+141
-156
lines changed

3 files changed

+141
-156
lines changed

‎packages/react/src/ActionList/Item.tsx

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
157157
':not(:first-of-type)': {'--divider-color': theme?.colors.actionListItem.inlineDivider},
158158
width: buttonSemantics && listVariant !== 'full' ? 'calc(100% - 16px)' : '100%',
159159
marginX: buttonSemantics && listVariant !== 'full' ? '2' : '0',
160+
borderRadius: 2,
160161
...(buttonSemantics ? hoverStyles : {}),
161162
}
162163

@@ -194,23 +195,6 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
194195
textAlign: 'unset',
195196
marginY: 'unset',
196197

197-
'@media (hover: hover) and (pointer: fine)': {
198-
':hover:not([aria-disabled]):not([data-inactive]):not([data-loading])': {
199-
backgroundColor: `actionListItem.${variant}.hoverBg`,
200-
color: getVariantStyles(variant, disabled, inactive || loading).hoverColor,
201-
boxShadow: `inset 0 0 0 max(1px, 0.0625rem) ${theme?.colors.actionListItem.default.activeBorder}`,
202-
},
203-
'&:focus-visible, > a.focus-visible, &:focus.focus-visible': {
204-
outline: 'none',
205-
border: `2 solid`,
206-
boxShadow: `0 0 0 2px ${theme?.colors.accent.emphasis}`,
207-
},
208-
':active:not([aria-disabled]):not([data-inactive]):not([data-loading])': {
209-
backgroundColor: `actionListItem.${variant}.activeBg`,
210-
color: getVariantStyles(variant, disabled, inactive || loading).hoverColor,
211-
},
212-
},
213-
214198
'@media (forced-colors: active)': {
215199
':focus, &:focus-visible, > a.focus-visible': {
216200
// Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips
@@ -246,6 +230,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
246230
'--divider-color': 'transparent',
247231
},
248232
...(active ? activeStyles : {}),
233+
...(!buttonSemantics ? hoverStyles : {}),
249234
}
250235

251236
const clickHandler = React.useCallback(

‎packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap

Lines changed: 65 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -271,8 +271,16 @@ exports[`NavList renders a simple list 1`] = `
271271
text-decoration: none;
272272
}
273273
274+
@media (forced-colors:active) {
275+
.c2:focus,
276+
.c2:focus-visible,
277+
.c2 > a.focus-visible {
278+
outline: solid 1px transparent !important;
279+
}
280+
}
281+
274282
@media (hover:hover) and (pointer:fine) {
275-
.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
283+
.c2:hover:not([aria-disabled]):not([data-inactive]) {
276284
background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
277285
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
278286
box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
@@ -286,22 +294,22 @@ exports[`NavList renders a simple list 1`] = `
286294
box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
287295
}
288296
289-
.c2:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
297+
.c2:active:not([aria-disabled]):not([data-inactive]) {
290298
background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
291299
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
292300
}
293301
}
294302
295303
@media (forced-colors:active) {
296-
.c2:focus,
297-
.c2:focus-visible,
298-
.c2 > a.focus-visible {
304+
.c7:focus,
305+
.c7:focus-visible,
306+
.c7 > a.focus-visible {
299307
outline: solid 1px transparent !important;
300308
}
301309
}
302310
303311
@media (hover:hover) and (pointer:fine) {
304-
.c7:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
312+
.c7:hover:not([aria-disabled]):not([data-inactive]) {
305313
background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
306314
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
307315
box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
@@ -315,20 +323,12 @@ exports[`NavList renders a simple list 1`] = `
315323
box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
316324
}
317325
318-
.c7:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
326+
.c7:active:not([aria-disabled]):not([data-inactive]) {
319327
background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
320328
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
321329
}
322330
}
323331
324-
@media (forced-colors:active) {
325-
.c7:focus,
326-
.c7:focus-visible,
327-
.c7 > a.focus-visible {
328-
outline: solid 1px transparent !important;
329-
}
330-
}
331-
332332
<div>
333333
<nav
334334
class=""
@@ -719,8 +719,16 @@ exports[`NavList renders with groups 1`] = `
719719
text-decoration: none;
720720
}
721721
722+
@media (forced-colors:active) {
723+
.c6:focus,
724+
.c6:focus-visible,
725+
.c6 > a.focus-visible {
726+
outline: solid 1px transparent !important;
727+
}
728+
}
729+
722730
@media (hover:hover) and (pointer:fine) {
723-
.c6:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
731+
.c6:hover:not([aria-disabled]):not([data-inactive]) {
724732
background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
725733
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
726734
box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
@@ -734,22 +742,22 @@ exports[`NavList renders with groups 1`] = `
734742
box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
735743
}
736744
737-
.c6:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
745+
.c6:active:not([aria-disabled]):not([data-inactive]) {
738746
background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
739747
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
740748
}
741749
}
742750
743751
@media (forced-colors:active) {
744-
.c6:focus,
745-
.c6:focus-visible,
746-
.c6 > a.focus-visible {
752+
.c11:focus,
753+
.c11:focus-visible,
754+
.c11 > a.focus-visible {
747755
outline: solid 1px transparent !important;
748756
}
749757
}
750758
751759
@media (hover:hover) and (pointer:fine) {
752-
.c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
760+
.c11:hover:not([aria-disabled]):not([data-inactive]) {
753761
background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
754762
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
755763
box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
@@ -763,20 +771,12 @@ exports[`NavList renders with groups 1`] = `
763771
box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
764772
}
765773
766-
.c11:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
774+
.c11:active:not([aria-disabled]):not([data-inactive]) {
767775
background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
768776
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
769777
}
770778
}
771779
772-
@media (forced-colors:active) {
773-
.c11:focus,
774-
.c11:focus-visible,
775-
.c11 > a.focus-visible {
776-
outline: solid 1px transparent !important;
777-
}
778-
}
779-
780780
<div>
781781
<nav
782782
class=""
@@ -1200,16 +1200,24 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
12001200
text-decoration: none;
12011201
}
12021202
1203+
@media (forced-colors:active) {
1204+
1205+
}
1206+
12031207
@media (hover:hover) and (pointer:fine) {
12041208
12051209
}
12061210
12071211
@media (forced-colors:active) {
1208-
1212+
.c11:focus,
1213+
.c11:focus-visible,
1214+
.c11 > a.focus-visible {
1215+
outline: solid 1px transparent !important;
1216+
}
12091217
}
12101218
12111219
@media (hover:hover) and (pointer:fine) {
1212-
.c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
1220+
.c11:hover:not([aria-disabled]):not([data-inactive]) {
12131221
background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
12141222
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
12151223
box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
@@ -1223,22 +1231,22 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
12231231
box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
12241232
}
12251233
1226-
.c11:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
1234+
.c11:active:not([aria-disabled]):not([data-inactive]) {
12271235
background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
12281236
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
12291237
}
12301238
}
12311239
12321240
@media (forced-colors:active) {
1233-
.c11:focus,
1234-
.c11:focus-visible,
1235-
.c11 > a.focus-visible {
1241+
.c4:focus,
1242+
.c4:focus-visible,
1243+
.c4 > a.focus-visible {
12361244
outline: solid 1px transparent !important;
12371245
}
12381246
}
12391247
12401248
@media (hover:hover) and (pointer:fine) {
1241-
.c4:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
1249+
.c4:hover:not([aria-disabled]):not([data-inactive]) {
12421250
background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
12431251
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
12441252
box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
@@ -1252,20 +1260,12 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
12521260
box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
12531261
}
12541262
1255-
.c4:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
1263+
.c4:active:not([aria-disabled]):not([data-inactive]) {
12561264
background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
12571265
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
12581266
}
12591267
}
12601268
1261-
@media (forced-colors:active) {
1262-
.c4:focus,
1263-
.c4:focus-visible,
1264-
.c4 > a.focus-visible {
1265-
outline: solid 1px transparent !important;
1266-
}
1267-
}
1268-
12691269
<div>
12701270
<nav
12711271
class=""
@@ -1693,16 +1693,24 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
16931693
text-decoration: none;
16941694
}
16951695
1696+
@media (forced-colors:active) {
1697+
1698+
}
1699+
16961700
@media (hover:hover) and (pointer:fine) {
16971701
16981702
}
16991703
17001704
@media (forced-colors:active) {
1701-
1705+
.c11:focus,
1706+
.c11:focus-visible,
1707+
.c11 > a.focus-visible {
1708+
outline: solid 1px transparent !important;
1709+
}
17021710
}
17031711
17041712
@media (hover:hover) and (pointer:fine) {
1705-
.c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
1713+
.c11:hover:not([aria-disabled]):not([data-inactive]) {
17061714
background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
17071715
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
17081716
box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
@@ -1716,30 +1724,30 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
17161724
box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
17171725
}
17181726
1719-
.c11:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
1727+
.c11:active:not([aria-disabled]):not([data-inactive]) {
17201728
background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
17211729
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
17221730
}
17231731
}
17241732
17251733
@media (forced-colors:active) {
1726-
.c11:focus,
1727-
.c11:focus-visible,
1728-
.c11 > a.focus-visible {
1729-
outline: solid 1px transparent !important;
1730-
}
1734+
17311735
}
17321736
17331737
@media (hover:hover) and (pointer:fine) {
17341738
17351739
}
17361740
17371741
@media (forced-colors:active) {
1738-
1742+
.c4:focus,
1743+
.c4:focus-visible,
1744+
.c4 > a.focus-visible {
1745+
outline: solid 1px transparent !important;
1746+
}
17391747
}
17401748
17411749
@media (hover:hover) and (pointer:fine) {
1742-
.c4:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
1750+
.c4:hover:not([aria-disabled]):not([data-inactive]) {
17431751
background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
17441752
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
17451753
box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
@@ -1753,20 +1761,12 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
17531761
box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
17541762
}
17551763
1756-
.c4:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
1764+
.c4:active:not([aria-disabled]):not([data-inactive]) {
17571765
background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
17581766
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
17591767
}
17601768
}
17611769
1762-
@media (forced-colors:active) {
1763-
.c4:focus,
1764-
.c4:focus-visible,
1765-
.c4 > a.focus-visible {
1766-
outline: solid 1px transparent !important;
1767-
}
1768-
}
1769-
17701770
<div>
17711771
<nav
17721772
class=""

0 commit comments

Comments
 (0)