Styling a Radix Dialog with Tailwind CSS

in this video we're going to learn how to add an unstyled Radix dialog to this interface style it with tailwind and see all of the cool features it gives us so we're looking at this simple list of cards here and it comes from this react component right now it's just a static list of data we map over and render a card for each user and there's no interactivity yet and what we want to do is render a modal in the middle of the screen whenever we click an edit button that shows a form with the data for the selected user so the first thing we want to do is come here and import the dialog and we use a namespace import to get all of the different pieces of radix's dialog on this single variable we can use now the first step to using a dialog is to find where we're actually going to be triggering it from and that's this button right here which in our Loop is this element here and first we want to wrap this in a dialog dot root and this will control all the dialog behavior for the component inside now a dialog has two major pieces the first is a trigger which we can actually just replace our button with and the second is dialogue dot content and this is where the contents of our dialog goes so let's see if this works we'll save this and check this out I can click the button and we get a dialog or something that is supposed to be a dialogue rendering right near each button now Radix components are completely unstyled but Radix does include some components that will help us get this looking a bit more like a modal and the first one we can use is dialog.portal so let's go ahead and wrap our content in a portal and come back and try this out now we can't see anything yet but if I scroll down we're actually going to see it way down here and this is because dialog.portal just renders a react portal and if you've used react portals before you'll know if we pop open the inspector we'll see our new dialog content let's see if this works is being rendered way down here not even inside the rest of our application and this is a really handy feature of portals that makes it easy to style content like dialogues that sit on top of other elements of the UI so we can come here and add a class name of fixed to our content to make it position fixed and for now let's put it at the top with top zero and there we go we see our content way up there at the top now let's make this actually look like a modal with background white text Gray 900 we'll add a bit of padding and a shadow and we'll add a bit of rounding with rounded MD and I'll wrap the text so we can stay over here okay starting to look better let's position this in the center so we can set the top to 50 with top one half and the left to 50 percent and that actually puts the top left part of our modal right in the center of the screen and to account for the width and height we can actually just translate it over by half of each of those values to get the whole box centered so let's come here and add a negative translate in the X direction of one half and we'll see that nudges it over and we'll add negative Translate Y of one half to nudge it up and now our dialog is perfectly centered in our app but it's a little hard to see on the background here usually dialogues have an overlay that dims the rest of the interface well fortunately here Radix has our back as well we can render a dialog dot overlay component right here give it a class name of fixed we'll get it to cover the entire area with inset zero and then we'll give it a background of black and there we go it's hiding everything a little bit dark so let's add 50 opacity and that looks much nicer so check out in just about 10 lines of code what we've been able to pull off here I can click on this hit Escape I can click on this and click anywhere outside the element to close it but if we click here it still works if I actually hit tab Radix is making sure we don't tab to other elements behind the overlay it's made everything inert and it has even prevented us from scrolling the body when the dialog is open and if we scroll down here open the dialog can't scroll and if I dismiss it we don't get any change in the scroll position of the overall application I'm sure those are all things that you've run into before when trying to implement dialogues on your own Radix takes care of all of it all while letting us just add react components and tailing classes right here in the component we're already working with Okay so let's actually work on filling out the content of this modal and this is going to be an edit contact modal it's going to render a form that we can use to edit this data so let's wrap this in an H2 I'll give this a class name of text Excel make the font a little bit bigger let's also make our dialog width full and give it a Max width of size MD so that always stays the same size regardless of the content now this title is looking good but dialogues usually have a little close button over here as another way to dismiss them so let's add a button and we'll use the cross one icon from Radix icons and we can see it right there all right let's go ahead and wrap these in a flex parent with just a 5 between and item Center and we'll make our button a little bit softer with text Gray 400 and let's give it a little bit of a hover treatment hover text Gray 500. nice next we want to add the actual form Fields below our title and I actually have a user Fields component down here it takes in a user and it just renders some labels and inputs for each property on the user nothing but some jsx and Tailwind classes in here so we can come up and right below kind of our header div let's render user fields and we'll pass in the user let's wrap this in a bit of margin and this is starting to look pretty good so this is another thing I love about working with this Radix dialog remember we're already mapping over our users which are coming from this Json file here and each one of these dialogs are being written you know we're writing the code right alongside the rest of the markup in the loop which means we have access to things like this local user variable that we can use to pass directly into the contents of our dialogue even though the dialog is being rendered in a portal elsewhere and that just makes for such a nice developer experience we don't have to worry about separating these two things conceptually it's just as if we were rendering a form inline in our Loop and that makes it really nice we can see here we can click on NOAA and we're going to get all of Nova's data in our fields okay finally let's add a little footer here and we're going to add a save button and let's make this background green 500 we'll give it text White maybe some padding of four in the X Direction so 2 in the y direction we'll make the text small and font medium and let's go ahead and right align this text right and add a little bit of margin and we'll make this rounded as well and we'll make the background green 600 on Hover so hover background green 600 something like that let's copy this and make a cancel button we'll add a little bit of space in between these maybe six units of space and let's remove the background here and the text color will soften the color up with text Gray 500. and when we hover we'll make text Gray 600. something like that okay our new elements are looking pretty good and our form is wired up but if we click our close button it's actually not doing anything well check this out I'm going to come here to our button that wraps the cross icon and I'm going to replace this with dialog Dot close save that click it boom just like that we've wired up a new piece of our interface to the internal state that Radix is managing for us behind the scenes within the dialog component let's do the same thing for our cancel button down here I'll change this to dialog Dot close save that and all of this is wired up great we can still hit escape to dismiss the dialog I can tab through our new fields and buttons and Radix is cycling the tab within the dialog again not allowing us to tab anything in the interface behind and I can dismiss this if we scroll we don't lose our scroll position all of that functionality is working great now there's one more component we can use if we look at where we're rendering our edit contact title here we can replace this H2 with a dialog dot title and if we save this we're not going to see any obvious Behavior change right away but if I open the inspect Tab and we find this element we're going to see that Radix renders in H2 it gives it an ID and if we find the root dialog here we're actually going to see all sorts of cool stuff that Radix has added in the form of Aria attributes and in particular we see this new one Aria labeled by this is pointing to the auto-generated ID that it has put on our dialog.title component so Radix has gone ahead and added all of the accessibility attributes things like Arya described by and Aria labeled by to our custom dialog that we've built from scratch to match the look and feel of our app and this way we know it's going to work on all devices and browsers and in fact in the future if a browser were to take advantage of any sort of the standard markup behind a dialog we know our custom dialog is going to be able to take advantage of those features so everything is looking great our dialog is rendering correctly it's styled correctly and all of these buttons work with the exception of this save button and in the next video we're going to wire up the save button to persist the changes in the form and then learn how to programmatically dismiss our dialog

Channel: Sam Selikoff

Views: 30,117

Keywords:

Id: KvZoBV_1yYE

Length: 10min 52sec (652 seconds)

Published: Tue Jun 27 2023