From 4ff2c1c91341b7176c8d7754fe51b4520017b907 Mon Sep 17 00:00:00 2001
From: Andrew Berg <andrew.berg@washpost.com>
Date: Mon, 18 Mar 2024 16:55:40 -0400
Subject: [PATCH] fix: transform Select arrow on open

---
 packages/kit/src/select/SelectTrigger.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/kit/src/select/SelectTrigger.tsx b/packages/kit/src/select/SelectTrigger.tsx
index 5ace0badd..9f5c7c04e 100644
--- 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>