fix: Work around styles-components parent selector issue, noissue

Adds double ampersands to work around styled-components issue #3265: styled-components/styled-components#3265
5app · Nov 9, 2021 · 75247dc · 75247dc
1 parent 72485ca
commit 75247dc
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -35,22 +35,22 @@ 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,
 					Math.max(0.05, +p.theme.shadeStrength / 2)
 				)};
 		}
 
-		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))};
 		}