This is my first time here, and just exploring radix. These tutorials are rare find. So right into the point, super clear and easy to follow in a very right pace. Thank you Sam.
wow, I've messed just a tiny bit with radix-ui but you're helping really drive the value/purpose of it I admire your UI skills, it's my kryptonite atm, but you make it looks so easy! The step by step approach makes it look more manageable. Thanks for the share!
hmm, I think it's the combination with tailwind.css which is a real winning combination, bc then you can very, very easily modify the CSS and see immediate changes, versus I'm used to manually typing the CSS in the style, inline as a json obj. Albeit your experience with the specific radix components makes it look easy. I'm looking forward to trying this new approach sometime though to test my theory
Thats so cool thank you for sharing valuable informations can I ask favour please can we have more videos with next js 13.4 make a app with server side actions etc
Hey Sam, awesome tutorial as always! One question tho: would you recommend using this Dialog approach in creating Hamburger menu navigation for mobile phones. I want the same dialog functionality, but i am concerned about a11y aspect (role="dialog" for example etc.) What would be your approach, or what primitive would you use in that case?
Cool! Two questions: How would you abstract this in the best way? The close button and the title will probably always be rendered. And how would you animate these? Render them static and let framer motion do the job with controlled state?
Both questions will be answered in the series! tl;dr you can use Framer Motion but I'll be showing off CSS animations (Ep. 2). In Ep. 3 we'll cover reusability 👍
Given the cool new features like intercept and parallel routes of Next 13, wouldn't you use those to create the interactions for a dialog instead of Radix?
Yes! The actual dialog contents (in the portal) is only rendered once for the selected card. Being able to render each Trigger component locally directly inside the loop is actually one of the benefits of the way Radix component are structured 👍
In a non-Next.js app yes, in a Next.js app I would turn the button into a client component that also handles the modal (because the modal is a client-side interactive feature). I think I will make a video on this refactoring once I wrap this series!
Not bad at all, because the Dialog.Content is rendered in a React Portal, and has no output whenever the dialog is closed. So there's only ever one dialog rendered when a card is selected. Being able to render each Trigger component locally directly inside the loop is actually one of the benefits of Radix's API 👍
the can't scroll feature of the Radix Dialog is nice, but on operating systems like windows it makes the scrollbar in the browser disappear, and thus causing layout shift. Is there an easy fix for this problem?
I think in the past libraries like Bootstrap would handle that by applying some padding to body when a modal is open. Let's say scrollbar is 10px wide, when a modal is open you would add a class to body and then add 10px padding when that class is present and that would prevent the content from jumping because same area would be taken in place of scrollbar. Not sure if they still do it that way, but I do remember it as an ok trick to handle that. Also, I'm looking at Radix UI Dialog documentation on Windows now and I don't see layout shifting when opening the Dialog. Maybe they handle that already for you?
Radix has several more components. Headless is great but just not quite as full featured. I reach for Radix these days 👍 Headless still well supported and a great choice though!
I'll be honest, this is why Radix/Tailwind isn't for me. 3 wrappers and all of CSS in one line... I know we've switched the definition of "separation of concerns" from separating HTML-CSS-JS to just components (having their own HTML/CSS/JS all mixed up in this monstrosity), but this just gives me the foulest of code smells. I'll wait till we come up with something better. Great video though!
