Skip to content

[Toolkit][Shadcn] Add form, sheet and drawer recipes#3473

Draft
Amoifr wants to merge 5 commits intosymfony:3.xfrom
Amoifr:feat/toolkit-shadcn-form-sheet-drawer
Draft

[Toolkit][Shadcn] Add form, sheet and drawer recipes#3473
Amoifr wants to merge 5 commits intosymfony:3.xfrom
Amoifr:feat/toolkit-shadcn-form-sheet-drawer

Conversation

@Amoifr
Copy link
Copy Markdown
Contributor

@Amoifr Amoifr commented Apr 15, 2026

Q A
Bug fix? no
New feature? yes
Deprecations? no
Documentation? no
Issues Part of #3233
License MIT

Hi 👋

Three more recipes from #3233 (previous batches: #3464, #3466, #3467, #3468, #3469). Still JS-free:

  • form — layout wrappers to build accessible forms: Form, Form:Item, Form:Label, Form:Description, Form:Message. No state, just composition. The Form:Label picks up the destructive color when a Form:Message is present in the same item via group-has-[[data-slot=form-message]]:text-destructive.
  • sheet — side panel backed by native <details> / <summary> (same pattern as the popover recipe in [Toolkit][Shadcn] Add menubar and popover recipes #3468). Accepts a side prop (right / left / top / bottom), plus Sheet:Trigger, Sheet:Content, Sheet:Header, Sheet:Title, Sheet:Description sub-components.
  • drawer — bottom-anchored panel, same <details> / <summary> approach, with a drag-handle visual and Drawer:Trigger, Drawer:Content, Drawer:Header, Drawer:Title, Drawer:Description, Drawer:Footer sub-components.

Note: shadcn's official Sheet and Drawer rely on Radix / Vaul for focus-trapping, drag-to-dismiss and backdrop-click dismiss, which all require JS. These recipes ship the pragmatic static variants — happy to drop either if you would rather wait for JS-powered versions.

Each recipe has Usage.html.twig, Demo.html.twig, and passing snapshot tests.

Thanks! 🙏

@Amoifr Amoifr force-pushed the feat/toolkit-shadcn-form-sheet-drawer branch from 911d2ce to 2525c88 Compare April 20, 2026 17:09
Amoifr added 2 commits April 23, 2026 07:50
Follow up on the review feedback on symfony#3487: the Trigger template
should not enforce a specific HTML element but expose a Twig
variable with the needed attributes so the consumer can pick
their own element (button, link, span...).

Since both `Drawer` and `Sheet` relied on native
`<details>`/`<summary>` to handle open/close, replace them
with `<div>`s backed by small `drawer_controller.js` and
`sheet_controller.js` Stimulus controllers handling toggle,
outside click and escape.

Also drop four orphan snapshots (`Demo.html__1.html`,
`Usage.html__1.html` for both kits) shipped by mistake and no
longer generated by the test suite.
@Amoifr Amoifr marked this pull request as draft April 23, 2026 12:54
@Amoifr
Copy link
Copy Markdown
Contributor Author

Amoifr commented Apr 23, 2026

Reworked Drawer and Sheet to apply the _trigger_attrs convention (ref review on #3487): swapped native <details>/<summary> for <div>s + small Stimulus controllers so the Trigger stays element-agnostic. Moving back to draft so you can re-test at your convenience. Thanks for the patience! 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Feature New Feature Status: Needs Review Needs to be reviewed Toolkit

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants