fix: expando icon direction (#3507)

71a246f2 · Zach Pomerantz · GitHub · 8de048bc · 71a246f2
Commit 71a246f2 authored Mar 14, 2022 by Zach Pomerantz Committed by GitHub Mar 14, 2022
Hide whitespace changes
Inline Side-by-side

Showing with 8 additions and 7 deletions

index.tsx src/lib/icons/index.tsx +8 -7

No files found.
--- a/src/lib/icons/index.tsx
+++ b/src/lib/icons/index.tsx
@@ -109,17 +109,18 @@ export const Check = styled(icon(CheckIcon))`
 `

 export const Expando = styled(icon(ExpandoIcon))<{ open: boolean }>`
-  path {
+  .left,
+  .right {
    transition: transform 0.25s ease-in-out;
    will-change: transform;
+  }

-    &:first-child {
-      transform: ${({ open }) => open && 'translateX(-25%)'};
-    }
+  .left {
+    transform: ${({ open }) => (open ? undefined : 'translateX(-25%)')};
+  }

-    &:last-child {
-      transform: ${({ open }) => open && 'translateX(25%)'};
-    }
+  .right {
+    transform: ${({ open }) => (open ? undefined : 'translateX(25%)')};
  }
 `