Radix primitive based Drawer component

[martinxu9]

All Submissions:

• Have you followed the guidelines stated in CONTRIBUTING.md file?
• Have you checked to ensure there aren't any other open Pull Requests for the desired changed?

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

New Feature Submission:

• Does your submission pass the tests?
• Have you linted your code locally prior to submission?

Changes To Core Features:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your core changes, as applicable?
• Have you successfully ran tests with your changes locally?

After these steps, you're ready to open a pull request.

• Component based on Vaul: https://github.com/emilkowalski/vaul
• Style based on https://ui.shadcn.com/docs/components/drawer (apply_theme does not work)
• Example: https://drawer-demo.staging.reflexcorp.run/

rdxt.flex(
    rdxp.drawer_root(
        rdxp.drawer_trigger(rdxt.button("Open Drawer with snap points"), as_child=True),
        rdxp.drawer_overlay(),
        rdxp.drawer_portal(
            rdxp.drawer_content(
                rdxt.flex(
                    rdxp.drawer_title("Drawer Content"),
                    rdxp.drawer_description("Drawer description"),
                    rdxp.drawer_close(
                        rdxt.button("Close Button"),
                        as_child=True,
                    ),
                    rdxt.text("more content, drag me up"),
                    rdxt.text("more content, drag me up"),
                    rdxt.text("more content, drag me up"),
                    rdxt.text("more content, drag me up"),
                    rdxt.text("more content, drag me up"),
                    rdxt.text("more content, drag me up"),
                    direction="column",
                    margin="5em",
                    align_items="center",
                ),
                top="auto",
                height="100%",
                flex_direction="column",
                background_color="var(--green-3)",
            ),
        ),
        snap_points=["148px", "355px", 1],
    ),
    rdxp.drawer_root(
        rdxp.drawer_trigger(rdxt.button("Open Drawer 1 from bottom"), as_child=True),
        rdxp.drawer_portal(
            rdxp.drawer_overlay(),
            rdxp.drawer_content(
                rdxt.flex(
                    rdxp.drawer_title("Drawer Content 1"),
                    rdxp.drawer_description("Drawer description 1"),
                    rdxp.drawer_close(
                        rdxt.button("Close 1"),
                        as_child=True,
                    ),
                    direction="column",
                    gap="2",
                    align_items="center",
                ),
                top="auto",
                height="auto",
                flex_direction="column",
                background_color="var(--blue-3)",
            ),
        ),
    ),
    rdxp.drawer_root(
        rdxp.drawer_trigger(rdxt.button("Open Drawer 2 from top"), as_child=True),
        rdxp.drawer_portal(
            rdxp.drawer_overlay(),
            rdxp.drawer_content(
                rdxt.flex(
                    rdxp.drawer_title("Drawer Content 2"),
                    rdxp.drawer_description("Drawer description 2"),
                    rdxp.drawer_close(
                        rdxt.button("Close 2"),
                        as_child=True,
                    ),
                    direction="column",
                    gap="2",
                    align_items="center",
                ),
                bottom="auto",
                height="auto",
                flex_direction="column",
                background_color="var(--red-3)",
                margin_bottom="6rem",
            ),
        ),
        direction="top",
    ),
    rdxp.drawer_root(
        rdxp.drawer_trigger(rdxt.button("Open Drawer 3 from left"), as_child=True),
        rdxp.drawer_portal(
            rdxp.drawer_overlay(),
            rdxp.drawer_content(
                rx.vstack(
                    rdxp.drawer_title("Drawer Content 3"),
                    rdxp.drawer_description("Drawer description 3"),
                    rdxp.drawer_close("Close 3"),
                    align_items="end",
                ),
                width="auto",
                right="auto",
                flex_direction="column",
                background_color="var(--red-3)",
            ),
        ),
        direction="left",
    ),
    rdxp.drawer_root(
        rdxp.drawer_trigger(rdxt.button("Open Drawer 4 from right"), as_child=True),
        rdxp.drawer_portal(
            rdxp.drawer_overlay(),
            rdxp.drawer_content(
                rdxt.flex(
                    rdxp.drawer_title("Drawer Content 4"),
                    rdxp.drawer_description("Drawer description 4"),
                    rdxp.drawer_close(
                        rdxt.button("Close 4"),
                        as_child=True,
                    ),
                    align_items="start",
                    direction="column",
                ),
                width="auto",
                left="auto",
                flex_direction="column",
                background_color="var(--yellow-3)",
            ),
        ),
        direction="right",
    ),
    gap="2",
    direction="column",
    spacing="1.5em",
    font_size="2em",
    padding_top="10%",
)

[picklelo]

Functionality seems to work, need to improve the default styling - ideally we shouldn't have to set margin/padding props in the usage level

[picklelo]

Should we be setting all of these? Then it will stretch to the full width of the page I believe

[martinxu9]

A variation of that if not that precisely. Basically trying to replicate the shadcn UI implementation, their drawer is basically this drawer component plus this. From the look of it, their drawer is always coming up from bottom. Without these style below, the drawer will be just a dialogue flying in from a certain direction (not sure if that should still be called drawer).

<DrawerPrimitive.Content
      ref={ref}
      className={cn(
        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
        className
      )}
      {...props}
    >

[picklelo]

Why do you have to put it in the css tag? I think we automatically handle this now.

[martinxu9]

I must've been misinformed. Can you point me to an example how the latest way to do this?

[picklelo]

works well for me