Merge remote-tracking branch 'origin/develop'

WestpacGEL · Oct 19, 2023 · 0042f89 · 0042f89
2 parents 34b89d1 + d33fa16
commit 0042f89
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 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
@@ -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
@@ -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: {