Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: [Sheet] transition change not working #1307

Open
MentalGear opened this issue Oct 7, 2024 · 2 comments
Open

Bug: [Sheet] transition change not working #1307

MentalGear opened this issue Oct 7, 2024 · 2 comments
Labels
status: help wanted This issue is tentatively accepted pending a volunteer committed to its implementation

Comments

@MentalGear
Copy link
Contributor

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
Copy link
Owner

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

@huntabyte huntabyte added the status: help wanted This issue is tentatively accepted pending a volunteer committed to its implementation label Oct 7, 2024
@MentalGear
Copy link
Contributor Author

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 }}>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: help wanted This issue is tentatively accepted pending a volunteer committed to its implementation
Projects
None yet
Development

No branches or pull requests

2 participants