docs: add "Use daisyUI with Stimulus" guide - #4650
Conversation
89021d5 to
163d380
Compare
|
Makes sense, done. The page is now just the install steps, in the same shape as the HTMX guide: install, add to your CSS, build the CSS, start Stimulus, and you have class names available. While trimming it I caught a bug in my own first draft: I had Down from 243 lines to 75. One question, and a no is completely fine. The parts I cut were mostly Stimulus versions of things the component docs already answer for React, for example the React Stackblitz for persisting Theme Controller and the JSX |
2 participants
Closes #4648
Adds
/docs/install/stimulus/, following the "Use daisyUI with HTMX" precedent rather than the install-guide format, since Stimulus does not touch CSS.Setup is a short tabbed section that links to the existing Rails, Vite, and CLI guides instead of repeating them. The body covers what isn't documented anywhere today: persisting the theme controller, driving a
<dialog>modal without an inlineonclick, closing a<details>dropdown, and dismissing a toast.The Turbo section turned up something worth knowing: after a morph refresh with a modal open, the morph strips
openfrom the<dialog>(the server HTML doesn't have it), but the element stays in the browser's top layer holding a full-viewport backdrop. Every click on the page then hits an invisible backdrop, nothing is logged to the console, and it just looks frozen. Addingdata-turbo-permanentand anidfixes it, and I tested that rather than assuming it.Every sample was verified in a running browser before I wrote it up: the four controllers in a Tailwind CLI plus CDN-Stimulus page (22 Playwright assertions), and the Turbo behavior in a Rails 8 app with
turbo_refreshes_with method: :morph(30 checks). Where something I expected to break didn't, I left it out rather than padding the page. One behavior is described with no fix, because I couldn't verify one.You mentioned you'd add the logo, so I haven't touched
frameworks.yaml. Here it is inline if it saves you a step, with thewidth,heightandclassattributes dropped to match the other entries in that file:LOGO source: https://stimulus.hotwired.dev/
One thing to check on your side: the mark's own color is
#D9C6A4, which reads well on the dark theme but is fairly light on white. If the grid needs better contrast in light mode, swapping the fill forcurrentColorwould work, since all three paths share the one<g fill>.