fix: transform Select arrow on open

washingtonpost · Mar 18, 2024 · 4ff2c1c · 4ff2c1c
1 parent 692f371
commit 4ff2c1c
Showing 1 changed file with 12 additions and 2 deletions.
diff --git a/packages/kit/src/select/SelectTrigger.tsx b/packages/kit/src/select/SelectTrigger.tsx
@@ -68,6 +68,16 @@ const IconWrapper = styled("div", {
   gridArea: "icon",
 });
 
+const AnimatedIcon = styled(Icon, {
+  transition: `transform ${theme.transitions.normal} ${theme.transitions.inOut}`,
+  "@reducedMotion": {
+    transition: "none",
+  },
+  '[aria-expanded="true"] &': {
+    transform: "rotate(180deg)",
+  },
+});
+
 type SelectTriggerVariants = WPDS.VariantProps<typeof StyledTrigger>;
 
 type SelectTriggerProps = RadixAccordionTriggerProps &
@@ -124,9 +134,9 @@ export const SelectTrigger = React.forwardRef<
         >
           {children}
           <IconWrapper isDisabled={disabled}>
-            <Icon label="">
+            <AnimatedIcon label="">
               <ChevronDown />
-            </Icon>
+            </AnimatedIcon>
           </IconWrapper>
         </StyledTrigger>
         <SubTextWrapper>