[fix](@svelteui/core): pass Accordion transitionDuration prop to Coll…

…apse This now allows controlling the collapse transition duration to match the chevron animation
svelteuidev · Apr 26, 2024 · 6cd35af · 6cd35af
1 parent 4102c39
commit 6cd35af
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/apps/docs/src/routes/core/accordion/+page.md b/apps/docs/src/routes/core/accordion/+page.md
@@ -59,7 +59,7 @@ When `multiple` is `true`, this should be provided as an arrays of strings.
 
 ## Transition
 
-It's possible to change the chevron transition duration by modifying the prop `transitionDuration` (in milliseconds).
+It's possible to change the chevron and collapse transition duration by modifying the prop `transitionDuration` (in milliseconds).
 
 <Demo demo={AccordionDemos.transitionDuration} />
 

diff --git a/packages/svelteui-core/src/components/Accordion/Accordion.stories.svelte b/packages/svelteui-core/src/components/Accordion/Accordion.stories.svelte
@@ -94,3 +94,15 @@
 		</Accordion.Item>
 	</Accordion>
 </Story>
+
+<Story
+	name="Transition Duration (1s)"
+	id="accordionTransitionDurationLongStory"
+	args={{ transitionDuration: 1000 }}
+/>
+
+<Story
+	name="Transition Duration (0s)"
+	id="accordionNoTransitionDurationStory"
+	args={{ transitionDuration: 0 }}
+/>
diff --git a/packages/svelteui-core/src/components/Accordion/AccordionItem/AccordionItem.svelte b/packages/svelteui-core/src/components/Accordion/AccordionItem/AccordionItem.svelte
@@ -90,6 +90,7 @@ Item of an accordion.
 		id={$ctx.getControlsId(value)}
 		aria-labelledby={$ctx.getRegionId(value)}
 		open={$ctx.isItemActive(value)}
+		transitionDuration={$ctx.transitionDuration}
 	>
 		<div class={classes.panel}>
 			<slot />