Skip to content

Commit

Permalink
Fix border styles for ActionList.Item (#4735)
Browse files Browse the repository at this point in the history 
* Fix border/hover styles in `ActionList`

* Update snapshots
  • Loading branch information
@TylerJDev
TylerJDev authored Jul 11, 2024
1 parent d773f26 commit adc8a8f
Show file tree
Hide file tree
Showing 3 changed files with 141 additions and 156 deletions.
19 changes: 2 additions & 17 deletions packages/react/src/ActionList/Item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
':not(:first-of-type)': {'--divider-color': theme?.colors.actionListItem.inlineDivider},
width: buttonSemantics && listVariant !== 'full' ? 'calc(100% - 16px)' : '100%',
marginX: buttonSemantics && listVariant !== 'full' ? '2' : '0',
borderRadius: 2,
...(buttonSemantics ? hoverStyles : {}),
}

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

'@media (hover: hover) and (pointer: fine)': {
':hover:not([aria-disabled]):not([data-inactive]):not([data-loading])': {
backgroundColor: `actionListItem.${variant}.hoverBg`,
color: getVariantStyles(variant, disabled, inactive || loading).hoverColor,
boxShadow: `inset 0 0 0 max(1px, 0.0625rem) ${theme?.colors.actionListItem.default.activeBorder}`,
},
'&:focus-visible, > a.focus-visible, &:focus.focus-visible': {
outline: 'none',
border: `2 solid`,
boxShadow: `0 0 0 2px ${theme?.colors.accent.emphasis}`,
},
':active:not([aria-disabled]):not([data-inactive]):not([data-loading])': {
backgroundColor: `actionListItem.${variant}.activeBg`,
color: getVariantStyles(variant, disabled, inactive || loading).hoverColor,
},
},

'@media (forced-colors: active)': {
':focus, &:focus-visible, > a.focus-visible': {
// Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips
Expand Down Expand Up @@ -246,6 +230,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
'--divider-color': 'transparent',
},
...(active ? activeStyles : {}),
...(!buttonSemantics ? hoverStyles : {}),
}

const clickHandler = React.useCallback(
Expand Down
130 changes: 65 additions & 65 deletions packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,8 +271,16 @@ exports[`NavList renders a simple list 1`] = `
text-decoration: none;
}
@media (forced-colors:active) {
.c2:focus,
.c2:focus-visible,
.c2 > a.focus-visible {
outline: solid 1px transparent !important;
}
}
@media (hover:hover) and (pointer:fine) {
.c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
.c2:hover:not([aria-disabled]):not([data-inactive]) {
background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
Expand All @@ -286,22 +294,22 @@ exports[`NavList renders a simple list 1`] = `
box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
}
.c2:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
.c2:active:not([aria-disabled]):not([data-inactive]) {
background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
}
}
@media (forced-colors:active) {
.c2:focus,
.c2:focus-visible,
.c2 > a.focus-visible {
.c7:focus,
.c7:focus-visible,
.c7 > a.focus-visible {
outline: solid 1px transparent !important;
}
}
@media (hover:hover) and (pointer:fine) {
.c7:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
.c7:hover:not([aria-disabled]):not([data-inactive]) {
background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
Expand All @@ -315,20 +323,12 @@ exports[`NavList renders a simple list 1`] = `
box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
}
.c7:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
.c7:active:not([aria-disabled]):not([data-inactive]) {
background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
}
}
@media (forced-colors:active) {
.c7:focus,
.c7:focus-visible,
.c7 > a.focus-visible {
outline: solid 1px transparent !important;
}
}
<div>
<nav
class=""
Expand Down Expand Up @@ -719,8 +719,16 @@ exports[`NavList renders with groups 1`] = `
text-decoration: none;
}
@media (forced-colors:active) {
.c6:focus,
.c6:focus-visible,
.c6 > a.focus-visible {
outline: solid 1px transparent !important;
}
}
@media (hover:hover) and (pointer:fine) {
.c6:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
.c6:hover:not([aria-disabled]):not([data-inactive]) {
background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
Expand All @@ -734,22 +742,22 @@ exports[`NavList renders with groups 1`] = `
box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
}
.c6:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
.c6:active:not([aria-disabled]):not([data-inactive]) {
background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
}
}
@media (forced-colors:active) {
.c6:focus,
.c6:focus-visible,
.c6 > a.focus-visible {
.c11:focus,
.c11:focus-visible,
.c11 > a.focus-visible {
outline: solid 1px transparent !important;
}
}
@media (hover:hover) and (pointer:fine) {
.c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
.c11:hover:not([aria-disabled]):not([data-inactive]) {
background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
Expand All @@ -763,20 +771,12 @@ exports[`NavList renders with groups 1`] = `
box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
}
.c11:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
.c11:active:not([aria-disabled]):not([data-inactive]) {
background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
}
}
@media (forced-colors:active) {
.c11:focus,
.c11:focus-visible,
.c11 > a.focus-visible {
outline: solid 1px transparent !important;
}
}
<div>
<nav
class=""
Expand Down Expand Up @@ -1200,16 +1200,24 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
text-decoration: none;
}
@media (forced-colors:active) {
}
@media (hover:hover) and (pointer:fine) {
}
@media (forced-colors:active) {
.c11:focus,
.c11:focus-visible,
.c11 > a.focus-visible {
outline: solid 1px transparent !important;
}
}
@media (hover:hover) and (pointer:fine) {
.c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
.c11:hover:not([aria-disabled]):not([data-inactive]) {
background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
Expand All @@ -1223,22 +1231,22 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
}
.c11:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
.c11:active:not([aria-disabled]):not([data-inactive]) {
background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
}
}
@media (forced-colors:active) {
.c11:focus,
.c11:focus-visible,
.c11 > a.focus-visible {
.c4:focus,
.c4:focus-visible,
.c4 > a.focus-visible {
outline: solid 1px transparent !important;
}
}
@media (hover:hover) and (pointer:fine) {
.c4:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
.c4:hover:not([aria-disabled]):not([data-inactive]) {
background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
Expand All @@ -1252,20 +1260,12 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
}
.c4:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
.c4:active:not([aria-disabled]):not([data-inactive]) {
background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
}
}
@media (forced-colors:active) {
.c4:focus,
.c4:focus-visible,
.c4 > a.focus-visible {
outline: solid 1px transparent !important;
}
}
<div>
<nav
class=""
Expand Down Expand Up @@ -1693,16 +1693,24 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
text-decoration: none;
}
@media (forced-colors:active) {
}
@media (hover:hover) and (pointer:fine) {
}
@media (forced-colors:active) {
.c11:focus,
.c11:focus-visible,
.c11 > a.focus-visible {
outline: solid 1px transparent !important;
}
}
@media (hover:hover) and (pointer:fine) {
.c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
.c11:hover:not([aria-disabled]):not([data-inactive]) {
background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
Expand All @@ -1716,30 +1724,30 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
}
.c11:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
.c11:active:not([aria-disabled]):not([data-inactive]) {
background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
}
}
@media (forced-colors:active) {
.c11:focus,
.c11:focus-visible,
.c11 > a.focus-visible {
outline: solid 1px transparent !important;
}
}
@media (hover:hover) and (pointer:fine) {
}
@media (forced-colors:active) {
.c4:focus,
.c4:focus-visible,
.c4 > a.focus-visible {
outline: solid 1px transparent !important;
}
}
@media (hover:hover) and (pointer:fine) {
.c4:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
.c4:hover:not([aria-disabled]):not([data-inactive]) {
background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
Expand All @@ -1753,20 +1761,12 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
}
.c4:active:not([aria-disabled]):not([data-inactive]):not([data-loading]) {
.c4:active:not([aria-disabled]):not([data-inactive]) {
background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
}
}
@media (forced-colors:active) {
.c4:focus,
.c4:focus-visible,
.c4 > a.focus-visible {
outline: solid 1px transparent !important;
}
}
<div>
<nav
class=""
Expand Down
Loading

0 comments on commit adc8a8f

Please sign in to comment.