Merge pull request #554 from catho/QTM-645

fix(QTM-645): Nested syntax handling to maintain compatibility with styled components v6
catho · Apr 3, 2024 · 6014d08 · 6014d08
2 parents 3da9ea8 + a2e897d
commit 6014d08
Show file tree

Hide file tree

Showing 14 changed files with 56 additions and 58 deletions.
diff --git a/components/Alert/Alert.jsx b/components/Alert/Alert.jsx
@@ -33,7 +33,7 @@ const CloseButton = styled(Button.Icon).attrs({
   transition: opacity 0.4s ease;
   width: auto;
 
-  :hover {
+  &:hover {
     background: none;
     opacity: 1;
   }

diff --git a/components/Button/Button.jsx b/components/Button/Button.jsx
@@ -168,7 +168,9 @@ const StyledButton = styled.button`
       color: ${textColor};
       border: 2px solid ${borderColor};
 
-      ${shadow(2, neutral500)({ theme })} :hover {
+      ${shadow(2, neutral500)({ theme })}
+
+      &:hover {
         ${!disabled
           ? css`
               ${shadow(4, mainColor900)({ theme })}
@@ -178,12 +180,12 @@ const StyledButton = styled.button`
           : ''}
       }
 
-      :focus,
-      :focus-within {
+      &:focus,
+      &:focus-within {
         ${!disabled ? shadow(4, mainColor700)({ theme }) : ''}
       }
 
-      :active {
+      &:active {
         ${!disabled
           ? css`
               ${shadow(8, mainColor900)({ theme })}
@@ -301,14 +303,14 @@ const IconButton = styled(Button)`
         margin-right: 0;
       }
 
-      :hover,
-      :focus {
+      &:hover,
+      &:focus {
         box-shadow: none;
         background-color: ${hexToRgba(mainColor300, 0.4)};
         color: ${mainColor700};
       }
 
-      :active {
+      &:active {
         box-shadow: none;
         background-color: ${hexToRgba(mainColor300, 0.5)};
         color: ${mainColor700};

diff --git a/components/Checkbox/Checkbox.jsx b/components/Checkbox/Checkbox.jsx
@@ -18,7 +18,7 @@ const Wrapper = styled.div`
     margin-right: 16px;
     vertical-align: top;
 
-    :last-child {
+    &:last-child {
       margin-right: 0;
     }
   `}
@@ -94,7 +94,7 @@ const HiddenCheckbox = styled(HiddenInput).attrs({
     `}
   }
 
-  :checked {
+  &:checked {
     + ${CheckIcon} {
       border-width: 0;
 
@@ -112,7 +112,7 @@ const HiddenCheckbox = styled(HiddenInput).attrs({
     }
   }
 
-  :hover + ${CheckIcon}, :focus + ${CheckIcon} {
+  &:hover + ${CheckIcon}, &:focus + ${CheckIcon} {
     ${({ theme }) => {
       const {
         colors: {
@@ -141,11 +141,11 @@ const HiddenCheckbox = styled(HiddenInput).attrs({
         border-color: ${errorColor};
       }
 
-      :checked + ${CheckIcon} {
+      &:checked + ${CheckIcon} {
         background-color: ${errorColor};
       }
 
-      :hover +  ${CheckIcon}, :focus +  ${CheckIcon} {
+      &:hover +  ${CheckIcon}, &:focus +  ${CheckIcon} {
         border-color: ${errorColor};
         ${shadow(5, errorColor)({ theme })}
       }
@@ -172,12 +172,12 @@ const HiddenCheckbox = styled(HiddenInput).attrs({
         background-color: ${neutral300};
       }
 
-      :checked + ${CheckIcon} {
+      &:checked + ${CheckIcon} {
         background-color: ${neutral500};
       }
     `}
 
-    :hover + ${CheckIcon} {
+    &:hover + ${CheckIcon} {
       ${shadow()}
     }
   }

diff --git a/components/Checkbox/CheckboxButton.jsx b/components/Checkbox/CheckboxButton.jsx
@@ -27,7 +27,7 @@ const Wrapper = styled.div`
     margin-right: 16px;
     vertical-align: top;
 
-    :last-child {
+    &:last-child {
       margin-right: 0;
     }
   `}

diff --git a/components/DropdownLight/DropdownLight.jsx b/components/DropdownLight/DropdownLight.jsx
@@ -79,23 +79,23 @@ const Button = styled.button`
         : colors.neutral['0']};
       border: 2px solid ${error ? colors.error['700'] : colors.neutral['500']};
 
-      :disabled {
+      &:disabled {
         background-color: ${colors.neutral['100']};
         border-color: ${colors.neutral['500']};
         color: ${colors.neutral['500']};
         box-shadow: none;
         cursor: not-allowed;
       }
 
-      :hover :enabled {
+      &:hover:enabled {
         border-color: ${colors.primary['700']};
         box-shadow:
           0px 3px 1px -2px rgb(18 80 196 / 20%),
           0px 2px 2px 0px rgb(18 80 196 / 14%),
           0px 1px 5px 0px rgb(18 80 196 / 12%);
       }
 
-      :focus :enabled {
+      &:focus:enabled {
         border-color: ${colors.primary['700']};
         box-shadow:
           0px 3px 1px -2px rgb(18 80 196 / 20%),
@@ -151,7 +151,7 @@ const SelectionListItem = styled.li`
       font-size: ${baseFontSize * 0.875}px;
       padding: ${spacing.xsmall}px ${spacing.medium}px;
 
-      :hover {
+      &:hover {
         background-color: ${colors.neutral['100']};
       }
     `;

diff --git a/components/Input/sub-components/TextInput.jsx b/components/Input/sub-components/TextInput.jsx
@@ -27,7 +27,7 @@ const defaultSkin = ({ theme, error, hasDefaultValue }) => {
     ${error ? `border-color: ${mainColor};` : ''}
     ${hasDefaultValue ? `background-color: ${primary100};` : ''}
 
-    :hover, :focus {
+    &:hover, &:focus {
       border-color: ${mainColor};
       ${shadow(2, mainColor)({ theme })}
     }
@@ -63,8 +63,8 @@ const darkSkin = ({ theme, error }) => {
           border-color: ${neutral[0]};
         `
       : ''}
-    :hover,
-    :focus {
+
+    &:hover, &:focus {
       border-color: ${primary[500]};
     }
 

diff --git a/components/Pagination/sub-components/ActionButton.jsx b/components/Pagination/sub-components/ActionButton.jsx
@@ -35,8 +35,8 @@ const ActionButton = styled.a`
     }
 
     &[aria-disabled=false] {
-      :hover,
-      :focus {
+      &:hover,
+      &:focus {
         background-color: ${primary100};
         border: 2px solid ${primary700};
       }

diff --git a/components/Pagination/sub-components/Mobile.jsx b/components/Pagination/sub-components/Mobile.jsx
@@ -42,7 +42,7 @@ const StyledActionButton = styled(ActionButton)`
     }
 
     &[aria-disabled=false] {
-      :focus {
+      &:focus {
         border-width: 1px;
       }
     }

diff --git a/components/Pagination/sub-components/PageButton.jsx b/components/Pagination/sub-components/PageButton.jsx
@@ -43,8 +43,7 @@ const PageButton = styled.a`
     margin: 0 ${xxsmall}px;
     padding: ${xxsmall}px ${xsmall}px;
 
-    :hover,
-    :focus {
+    &:hover, &:focus {
       background-color: ${active ? primary900 : primary100};
       border-color: ${active ? primary900 : primary700};
       color: ${active ? neutral0 : primary700};

diff --git a/components/Popover/sub-components/Content.jsx b/components/Popover/sub-components/Content.jsx
@@ -107,7 +107,7 @@ const CloseButton = styled(Button.Icon).attrs({
   transition: opacity 0.4s ease;
   width: auto;
 
-  :hover {
+  &:hover {
     background: none;
     opacity: 1;
     ${_getTextColor}

diff --git a/components/RadioGroup/Radio.jsx b/components/RadioGroup/Radio.jsx
@@ -26,7 +26,7 @@ const RadioMark = styled.span`
     border: 2px solid ${gray};
     margin-right: ${xsmall}px;
   `}
-  :after {
+  &:after {
     border-radius: 50%;
     content: '';
     display: none;
@@ -53,7 +53,7 @@ const RadioLabel = styled(Label)`
   user-select: none;
 
   ${HiddenInput} {
-    :checked {
+    &:checked {
       ~ ${RadioMark} {
         ${({
           theme: {
@@ -63,15 +63,15 @@ const RadioLabel = styled(Label)`
           },
         }) => `
           border-color: ${primary};
-          :after {
+          &:after {
             background-color: ${primary};
             display: block;
           }
         `}
       }
     }
 
-    :focus {
+    &:focus {
       ~ ${RadioMark} {
         ${({ theme }) => {
           const {
@@ -89,8 +89,8 @@ const RadioLabel = styled(Label)`
     }
   }
 
-  :hover,
-  :focus {
+  &:hover,
+  &:focus {
     ${RadioMark} {
       ${({ theme }) => {
         const {
@@ -118,16 +118,16 @@ const RadioLabel = styled(Label)`
       error &&
       `
       ${HiddenInput} {
-        :checked {
+        &:checked {
           ~ ${RadioMark} {
             border-color: ${errorColor};
-            :after {
+            &:after {
               background-color: ${errorColor};
               display: block;
             }
           }
         }
-        :focus {
+        &:focus {
           ~ ${RadioMark} {
             border-color: ${errorColor};
             ${shadow(5, errorColor)({ theme })}
@@ -139,8 +139,7 @@ const RadioLabel = styled(Label)`
         border-color: ${errorColor};
       }
 
-      :hover,
-      :focus {
+      &:hover, &:focus {
         ${RadioMark} {
           border-color: ${errorColor};
           ${shadow(5, errorColor)({ theme })}
@@ -163,44 +162,44 @@ const RadioLabel = styled(Label)`
     `
     color: ${neutral500};
 
-    :hover {
+    &:hover {
       cursor: not-allowed;
     }
 
     ${HiddenInput} {
-      :disabled {
+      &:disabled {
         ~ ${RadioMark} {
           background-color: ${neutral300};
         }
       }
 
-      :checked {
+      &:checked {
         ~ ${RadioMark} {
           border-color: ${errorColor};
-          :after {
+          &:after {
             background-color: ${errorColor};
             display: block;
           }
         }
       }
 
-      :checked:disabled {
+      &:checked:disabled {
         background-color: ${neutral500};
         border-color: ${neutral500};
         ~ ${RadioMark}:after {
           background-color: ${neutral500};
         }
       }
 
-      :focus {
+      &:focus {
         ~ ${RadioMark} {
           border-color: ${neutral500};
           box-shadow: none;
         }
       }
     }
 
-    :hover, :focus {
+    &:hover, &:focus {
       ${RadioMark} {
         border-color: ${neutral500};
         box-shadow: none;

diff --git a/components/RadioGroup/RadioButton.jsx b/components/RadioGroup/RadioButton.jsx
@@ -50,7 +50,7 @@ const Wrapper = styled.div`
     margin-right: ${medium}px;
     vertical-align: top;
 
-    :last-child {
+    &:last-child {
       margin-right: 0;
     }
 

diff --git a/components/SnackBar/SnackBar.jsx b/components/SnackBar/SnackBar.jsx
@@ -88,7 +88,7 @@ const SnackBarDialog = styled.div`
     `;
   }}
 
-  :focus {
+  &:focus {
     ${a11yFocusTab}
   }
 `;
@@ -101,7 +101,7 @@ const TextContainer = styled.span`
     margin: 0;
   }
 
-  :focus {
+  &:focus {
     ${a11yFocusTab}
   }
 `;
@@ -139,8 +139,8 @@ const CloseButton = styled(Button.Icon).attrs({
       margin-left: ${small}px;
       color: ${text};
 
-      :hover,
-      :focus {
+      &:hover,
+      &:focus {
         background: transparent;
         box-shadow: none;
         color: ${text};
@@ -170,8 +170,8 @@ const ActionButton = styled(Button)`
       border-width: 0;
       border-color: unset;
 
-      :hover,
-      :focus {
+      &:hover,
+      &:focus {
         background: ${hexToRgba(color, 0.15)};
         box-shadow: none;
         color: ${color};