From eb3e89faa60c9e428559278944a33e656fc03fac Mon Sep 17 00:00:00 2001
From: Tom King <tom.jack.king@gmail.com>
Date: Thu, 19 Oct 2023 14:15:42 +1000
Subject: [PATCH] - fixed issue with accordion animation - matched animation on
 accordion expanded icon to current GEL (no animation)

---
 .../accordion-item/accordion-item.component.tsx          | 9 +++------
 .../components/accordion-item/accordion-item.styles.ts   | 4 ++--
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/components/accordion/components/accordion-item/accordion-item.component.tsx b/packages/ui/src/components/accordion/components/accordion-item/accordion-item.component.tsx
index 15e442bc8..966f1c767 100644
--- a/packages/ui/src/components/accordion/components/accordion-item/accordion-item.component.tsx
+++ b/packages/ui/src/components/accordion/components/accordion-item/accordion-item.component.tsx
@@ -24,10 +24,10 @@ export function AccordionItem<T = any>({
   const isDisabled = state.disabledKeys.has(item.key);
   const { hoverProps } = useHover({ isDisabled });
   const { direction } = useLocale();
-  const styles = accordionItemStyles({ isOpen, isDisabled, className, look, isFocusVisible });
+  const styles = accordionItemStyles({ isOpen, isDisabled, look, isFocusVisible });
 
   return (
-    <Tag className={styles.base()}>
+    <Tag className={styles.base({ className })}>
       {/*
         Using h3 tag since the official page is using it, also the react-spectrum
         https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/
@@ -49,17 +49,14 @@ export function AccordionItem<T = any>({
               <m.div
                 initial={{
                   height: 0,
-                  opacity: 0,
                 }}
                 animate={{
                   height: 'auto',
-                  opacity: 1,
                 }}
                 exit={{
                   height: 0,
-                  opacity: 0,
                 }}
-                transition={{ duration: 0.2, ease: 'easeInOut' }}
+                transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1.0] }}
               >
                 <div className={styles.content()}>{item.props.children}</div>
               </m.div>
diff --git a/packages/ui/src/components/accordion/components/accordion-item/accordion-item.styles.ts b/packages/ui/src/components/accordion/components/accordion-item/accordion-item.styles.ts
index c6a10aeb4..9fd0fbbc1 100644
--- a/packages/ui/src/components/accordion/components/accordion-item/accordion-item.styles.ts
+++ b/packages/ui/src/components/accordion/components/accordion-item/accordion-item.styles.ts
@@ -3,9 +3,9 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: '',
+      base: 'relative',
       itemHeader: 'typography-body-9 flex w-full items-center justify-between px-3 py-2',
-      indicator: 'h-3 w-3 rotate-90 transition-transform',
+      indicator: 'h-3 w-3 rotate-90',
       content: 'hidden',
     },
     variants: {