huntabyte / shadcn-svelte

shadcn/ui, but for Svelte. ✨
https://next.shadcn-svelte.com
MIT License
5.52k stars 341 forks source link

Bug: [Sheet] transition change not working #1307

Open MentalGear opened 1 month ago

MentalGear commented 1 month ago

Describe the bug

I'm attempting to change the close / out transition duration of the Sheet component.

However, using the suggested doc's component props approach:

<Sheet.Content side="left" outTransitionConfig={{ duration: 500 }}>

results in the OUT animation changing to fade.

I also looked into the source code, and it seems like the values are hardcoded, if I correctly understand.

https://github.com/huntabyte/shadcn-svelte/blob/9cf14cc3f13569a84a754cbb61e80fe196ad4e3f/sites/docs/src/lib/registry/default/ui/sheet/index.ts#L55C14-L55C30

Reproduction

https://stackblitz.com/edit/github-9frs1r?file=src%2Froutes%2F%2Bpage.svelte

Logs

No response

System Info

Note: For some reason, Firefox is not listed on this config even though it's my default browser.

  System:
    OS: macOS 10.15.7
    CPU: (6) x64 Intel(R) Core(TM) i5-8500 CPU @ 3.00GHz
    Memory: 3.49 GB / 40.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 20.11.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 10.2.4 - /usr/local/bin/npm
    pnpm: 9.7.0 - ~/Library/pnpm/pnpm
  Browsers:
    Brave Browser: 128.1.69.168
    Chrome: 128.0.6613.138
    Safari: 15.6.1
  npmPackages:
    @sveltejs/kit: ^2.6.1 => 2.6.1 
    bits-ui: ^0.21.15 => 0.21.15 
    formsnap: ^1.0.1 => 1.0.1 
    lucide-svelte: ^0.446.0 => 0.446.0 
    mode-watcher: ^0.4.1 => 0.4.1 
    svelte: 5.0.0-next.260 => 5.0.0-next.260 
    sveltekit-superforms: ^2.19.0 => 2.19.0 
    vaul-svelte: ^0.3.2 => 0.3.2

Severity

blocking an upgrade

huntabyte commented 1 month ago

We could probably update these props to fallback to the hardcoded values if not provided as a prop?

MentalGear commented 1 month ago

Thanks for the reply, not sure though if we are aligned on the issue.

As a dev, if I only change the transition duration, I would expect the new value to be respected, e.g. 500 instead of 300 to slide the Sheet back.

Currently, this code will change the transition animation to a fade - which can't be correct.

<Sheet.Content side="left" outTransitionConfig={{ duration: 500 }}>