From 75247dc632530db2c07cbdce7aac20fa097c216e Mon Sep 17 00:00:00 2001 From: Dionysos Dajka Date: Tue, 9 Nov 2021 15:57:28 +0100 Subject: [PATCH] fix: Work around styles-components parent selector issue, noissue Adds double ampersands to work around styled-components issue #3265: https://github.com/styled-components/styled-components/issues/3265 --- src/Button/index.js | 10 ++++----- src/ButtonCore/index.js | 6 ++++-- src/MenuList/index.js | 21 ++++++++++++------- src/Pill/index.js | 8 +++---- src/Table/shared/RowSelectButton.js | 4 ++-- .../TableColumnHeader/ClickableHeader.js | 4 ++-- src/Table/shared/TableRowHeader.js | 10 ++++----- 7 files changed, 35 insertions(+), 28 deletions(-) diff --git a/src/Button/index.js b/src/Button/index.js index 796b1baf..a2387007 100644 --- a/src/Button/index.js +++ b/src/Button/index.js @@ -178,7 +178,7 @@ const FocusRing = styled.span.withConfig({ transition: opacity 250ms linear; will-change: opacity; - ${Wrapper}.focus-visible > & { + ${Wrapper}.focus-visible > && { top: -${_3px}; left: -${_3px}; bottom: -${_3px}; @@ -194,7 +194,7 @@ const FocusRing = styled.span.withConfig({ transition-duration: 50ms; } /* prettier-ignore */ - ${Wrapper}:not(.is-disabled):active > & { + ${Wrapper}:not(.is-disabled):active > && { opacity: 1; transition-duration: 50ms; } @@ -216,12 +216,12 @@ const HoverShade = styled.span` box-shadow: inset 0 0 0.25rem rgba(0, 0, 0, 0.5); } /* prettier-ignore */ - ${Wrapper}:not(.is-disabled):hover > & { + ${Wrapper}:not(.is-disabled):hover > && { opacity: 1; transition-duration: 50ms; } /* prettier-ignore */ - ${Wrapper}:not(.is-disabled):active > & { + ${Wrapper}:not(.is-disabled):active > && { opacity: 0; transition-duration: 250ms; } @@ -235,7 +235,7 @@ const Content = styled.span` `; /** - * The button label should just have some horinzontal spacing. + * The button label should just have some horizontal spacing. * But if `textOverflow="ellipsis" is set, the Button label * will have overflow set to "hidden", which can cause the * descenders of some characters (g, y, j) to be cut off. diff --git a/src/ButtonCore/index.js b/src/ButtonCore/index.js index 0889b1cf..a38eb65e 100644 --- a/src/ButtonCore/index.js +++ b/src/ButtonCore/index.js @@ -33,11 +33,13 @@ const Clickable = styled.button` cursor: pointer; } - &:focus:not(.focus-visible) { + &:focus:not(.focus-visible), + &:focus:not([data-focus-visible-added]) { outline: none; } - &.focus-visible { + &.focus-visible, + &[data-focus-visible-added] { outline: 3px solid currentColor; outline-offset: 3px; } diff --git a/src/MenuList/index.js b/src/MenuList/index.js index f4718c47..97fd5c33 100644 --- a/src/MenuList/index.js +++ b/src/MenuList/index.js @@ -31,10 +31,14 @@ const Item = styled.li` display: block; `; -const Link = styled(ButtonCore).withConfig({ - shouldForwardProp: prop => - ![...textLinkProps, 'isHighlighted'].includes(prop), -})` +const Link = styled(ButtonCore) + .attrs(({isHighlighted}) => ({ + className: isHighlighted ? 'is-highlighted' : '', + })) + .withConfig({ + shouldForwardProp: prop => + ![...textLinkProps, 'isHighlighted'].includes(prop), + })` position: relative; display: flex; align-items: center; @@ -57,7 +61,8 @@ const Link = styled(ButtonCore).withConfig({ outline: none; } - &.focus-visible:focus { + ${Wrapper}[data-focus-visible-added] &&.is-highlighted, + &[data-focus-visible-added]:focus { outline: none; &::after { @@ -106,9 +111,9 @@ const IconWrapper = styled.span` opacity: ${p => p.theme.textDimStrength}; - ${Link}:hover:not(.is-disabled) > &, - .is-focused:not(.is-disabled) > &, - .is-active:not(.is-disabled) > & { + ${Link}:hover:not(.is-disabled) > &&, + ${Link}[data-focus-visible-added]:not(.is-disabled) > &&, + .is-active:not(.is-disabled) > && { opacity: 1; } `; diff --git a/src/Pill/index.js b/src/Pill/index.js index 38794804..1f96e264 100644 --- a/src/Pill/index.js +++ b/src/Pill/index.js @@ -136,12 +136,12 @@ const HoverShade = styled.span` will-change: opacity; /* prettier-ignore */ - ${Wrapper}:not(.is-disabled):hover > & { + ${Wrapper}:not(.is-disabled):hover > && { opacity: 1; transition-duration: 50ms; } /* prettier-ignore */ - ${Wrapper}:not(.is-disabled):active > & { + ${Wrapper}:not(.is-disabled):active > && { opacity: 0; transition-duration: 250ms; } @@ -160,7 +160,7 @@ const FocusRing = styled.span.withConfig({ transition: opacity 250ms linear; will-change: opacity; - ${Wrapper}.focus-visible > & { + ${Wrapper}.focus-visible > && { top: -${_3px}; left: -${_3px}; bottom: -${_3px}; @@ -173,7 +173,7 @@ const FocusRing = styled.span.withConfig({ } /* prettier-ignore */ - ${Wrapper}:not(.is-disabled):active > & { + ${Wrapper}:not(.is-disabled):active > && { opacity: 1; transition-duration: 50ms; } diff --git a/src/Table/shared/RowSelectButton.js b/src/Table/shared/RowSelectButton.js index e0ea1b50..56ab1b20 100644 --- a/src/Table/shared/RowSelectButton.js +++ b/src/Table/shared/RowSelectButton.js @@ -17,11 +17,11 @@ const ButtonWrapper = styled(ButtonCore)` outline: none; } - tr[aria-selected='true'] & { + tr[aria-selected='true'] && { opacity: 1; } - tr[data-highlighted] &.focus-visible { + tr[data-highlighted] &&[data-focus-visible-added] { opacity: 1; } `; diff --git a/src/Table/shared/TableColumnHeader/ClickableHeader.js b/src/Table/shared/TableColumnHeader/ClickableHeader.js index 881820ea..c08b5e8d 100644 --- a/src/Table/shared/TableColumnHeader/ClickableHeader.js +++ b/src/Table/shared/TableColumnHeader/ClickableHeader.js @@ -59,8 +59,8 @@ const StyledSortArrow = styled(ArrowIcon).withConfig({shouldForwardProp})` opacity: 0; `} - ${ClickabilityIndicator}:hover &, - ${ClickabilityIndicator}.focus-visible & { + ${ClickabilityIndicator}:hover &&, + ${ClickabilityIndicator}.focus-visible && { fill: ${p => p.theme.links}; opacity: 1; transition-delay: 0.15s; diff --git a/src/Table/shared/TableRowHeader.js b/src/Table/shared/TableRowHeader.js index 7f4aebc5..7ca7cd0e 100644 --- a/src/Table/shared/TableRowHeader.js +++ b/src/Table/shared/TableRowHeader.js @@ -35,13 +35,13 @@ const Th = withTableContext(styled.th.withConfig({ border-bottom: ${p => borderValue(p.theme)}; ${headerBackgroundColor} - tr[aria-selected] & { + tr[aria-selected] && { padding-left: ${getCheckboxColumnWidth}; } /* Highlight SELECTABLE table rows */ - tr[data-highlighted] &, - tr[data-highlighted]:focus-within & { + tr[data-highlighted] &&, + tr[data-highlighted]:focus-within && { background-color: ${p => alpha( p.theme.links, @@ -49,8 +49,8 @@ const Th = withTableContext(styled.th.withConfig({ )}; } - tr[aria-selected='true'] &, - tr[aria-selected='true'][data-highlighted] & { + tr[aria-selected='true'] &&, + tr[aria-selected='true'][data-highlighted] && { background-color: ${p => alpha(p.theme.links, Math.max(0.15, +p.theme.shadeStrength))}; }