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

Should vaul use standard data attribute? #369

Open
pipech opened this issue Jun 3, 2024 · 0 comments
Open

Should vaul use standard data attribute? #369

pipech opened this issue Jun 3, 2024 · 0 comments

Comments

@pipech
Copy link

pipech commented Jun 3, 2024

Should vaul convert non-standard to standard attribute?

From

<div role="dialog" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="true">

To

<div role="dialog" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-drawer-visible="true">

The benefit here aside from being standard is able to select data attribute using tailwind.

Use case I can use data-vaul-drawer-direction to set css value like.

<DrawerPrimitive.Content
  className={cn(
    `fixed z-50 bg-panel`,
    `data-[vaul-drawer-direction=right]:inset-y-0
    data-[vaul-drawer-direction=right]:right-0`,
    className,
  )}
>

Right now I have to pass direction to content component, ideally it should be getting direction from root component.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant