 Welcome to another episode of GUI Challenges, where I build interfaces my way, and then I challenge you to do it your way, because with our creative minds combined, we're going to find multiple ways to solve these interfaces and expand the diversity of our skills. Let me show you how I built it today in this GUI Challenge on dialogue elements. In today's GUI Challenge, we're building a dialogue and I've built a dialogue that has this mega dialogue state or a mini dialogue state. So it has a varying layout and they all have positioning rules and it works out really nice for sort of doing this inline little confirmation where I can delete something or I can present a nice large form, take some user input and upload an image into it. Look at that. So both of them accepting user input. Some of them performing actions and some of them resulting in data. Before we explore my mini and mega dialogues in the debugging corner, I want to go over the default built-in behavior of a dialogue. And so here's a dialogue it's currently shown. Let me go ahead and hit OK to hide it. This is my button that invokes the dialogue. So I will open the dialogue and I will close the dialogue. I can open the dialogue and hit escape and close it. I cannot hit off of the dialogue to close it. So that'll be a feature that we'll be adding. I'll go ahead and close this with the escape key. If I invoke the open with the keyboard, we can see our focus. So this is that focus visible state. It's given to the first interactive element of a dialogue. In this case, it's a button that's inside of a form of type method dialogue. And when I click it, it will submit the form and close the dialogue. So that's some HTML spect interactivity there. The other thing that's interesting to note is when I close it with the keyboard, my focus is restored to the place that the opening command came from. And that's normally a lot of work to do inside of JavaScript is kind of keeping track where you were and where you're going. And the dialogue element does a lot of that for us. In fact, too, if I open it up, the document is pretty much set to inert. I can't interact with the rest of the document right now. It's essentially frozen, awaiting user interaction inside of this dialogue. And once the dialogue is closed, I can now interact with the document again. So those are some really nice accessibility features we get for free. And with a little bit of CSS, we can even make this thing light and dark. So I've already done that with the color scheme property, but this is the default dialogue in the light theme. And if you add the color scheme property, you're opting into the browser's supplied light and dark styles. And so we'll get a dark dialogue here and it looks really nice. For the markup of a dialogue, let's briefly go over that over here. We've got a dialogue element with an idea of dialogue. Inside of there, we have a form with the method of dialogue and some content and a button. These are the essentials of a dialogue. And the dialogues that I built continue to build upon these essentials, where a form is the direct child of the dialogue element. And inside of here, I sort of build up the presentation tier that I expect of a modal dialogue. Okay, and if we scroll down, JavaScript is required to show the modal. We have this button on click dialogue. This is referencing the ID above.showModal, and that will show our modal. So you have to open it with JavaScript, but you can close it without JavaScript. But I've got the escape key as a way to do it. I can submit the form. I can also call the close function on the modal itself. Now there was a couple other things that were kind of frustrating to me. So one was no light dismiss where you can kind of click off of the element. Another one was when the dialogue is open, you can still scroll the background page. So if you have like a scrollable page and you invoke the dialogue, you can still scroll the page. I thought that was kind of annoying. And there was only close events, not open events. And I thought that was kind of strange. So in the dialogue element that I build, I add those events. In fact, I add animation to mine too, which notice this has no animation. It's also not even animatable. You can animate it when it gets added to the DOM as a presentation style, but you can't animate it out. And that's because the browser is just managing the display property for you, display block or display none. And that doesn't really give you very many good hooks for animation. And so I go ahead and I change that, which ends up being quite a bit of work. So if you want to animate the dialogue element, stay tuned, because I'll tell you all the different steps that you need so that you can continue getting the rich accessible functionality, as well as the rich presentation tier. So I think that's a pretty good overview of the dialogue element itself. Let's head over to the debugging corner and check out the mini and mega dialogues that I made. What do you think? Do the debugging corner, simulator, simulator, Safari actual install, Chrome install, Firefox install, and an Android emulator with Chrome on it. And we have browser sync running the server. So any clicks will get sent to the other connected devices. And it looks really cool. It allows me to test out my color and my layout and my animations. All with one click across all these different viewports. I love it. So let's first talk about color. You can see that there's a light theme and a dark theme. We're also looking at the mini dialogue. Here's the mega dialogue. So the mega dialogue has a title and a close button on it, while the mini dialogue has no title. It just has the content area and then the footer of menu buttons. But if we look at this one again, you notice there's a blur on the background here of the mega dialogue. And there's not in the mini. The mini doesn't blur, but it does still have a backdrop that you can light dismiss. It positions itself as close to the invoking element as it can and tries to just be this little inline dialogue, whereas the other one is sort of like a block level dialogue. So you have these two different use cases, one that's asking for a little bit of user input, and one that's asking for a lot of user input. So that's the sort of mini versus mega, a couple of their differences. We've gone over their color, which will, I mean, really, we said they have a light and a dark theme. I achieved that though with open props. Open props gives me lots of adaptive colors out of the box. It has these things called surface colors, surface one, surface two. I think I only used two of them, right? So we have like surface one is this one and surface two is this one. And that was plenty for me to get the texture and the sort of layering that I wanted plus the shadows. Open props has awesome shadows and it gave me these buttons for free. So I didn't go styling buttons for my dialogue demo today. I just used some that were pre-built in open props. Okay, so a couple of the kind of layout differences other than the colors. The colors coming from open props. The layout differences, we see that the mini dialogue and desktop is trying to position itself really close to the where it came from, but on mobile, it does its best to find the sort of like vertical space of where the button came from, but it does its best to fit inside of the viewport. So we're going, it kind of looks like full width, which is like it's being centered. So it's not necessarily positioned, you know, horizontally over the element, but it is vertically positioned there. And we'll close out of this one, invoke the mega dialogue and the mega dialogue on desktop shows up in the center, just like you'd expect. But on mobile, it slides up from the bottom, just like an action sheet and its animation is even different. So if I close it, you can see that slides down and it slides up. Whereas on desktop, we slide up and then we scale out. So just a couple of really cool kind of subtleties that I thought were really nice in the way that the layout was adapting and then the animations adapted. Another fun thing is the reduced motion. If I pop open the dev tools here, I got the rendering tab open, scroll on down to the prefers reduced motion. I'll reduce the motion, slide this back out just so that we can kind of see the effect here. And I'll hit the mega dialogue and you see it's just a fade in and a fade out. What's interesting too is if you watch the other ones, like over here in Firefox, it also fades out and fades in. The only difference is if motion is okay, I add some keyframes. So in CSS, I always transition the opacity, but if motion is okay inside of this media query, I can go add some keyframes and give it a little bit of a scale or I can give it a slide. And that was it. Some really kind of neat, small additions to the dialogue elements presentation, right? As it enters the stage and it exits the stage, I can have it sort of fit the appearance it has. Like I felt the dialogue sliding in felt like it was being gently presented to me. And then I get to push it away, right? I thought that was nice. So we're on mobile, I get to slide it up from the bottom and slide it back down from once it came with a little bit of a bounce there too. Do you see a little bit of a bounce, boink. Really subtle. I just thought it gives it that a little bit of a pop right as you push it. And it's like, oh, it's eager to escape or eager to leave. So anyway, I thought that was interesting. We covered light dismiss, right? We already get escape to close. And if I hit enter, I'm auto-focused on the cancel button. I hit enter again, I'll close back and I restore focus to where I was. So it looks and behaves exactly like the basic demo that we went over. But I had to do a lot of extra work to get us there. Like for example, when the dialogue is out, I'm no longer using display none, which means I have a dialogue element in the page. Well, here, let's just go see it. And it's essentially just visually hidden. So I'll pull this down, here's our dialogue. So, right, okay. So since we're in a more of a mobile viewport state, you can see that the mega dialogue is in the slide up from the bottom position, right? Here it is. When I slide it out, we can see that the element is still there. So it's the mini dialogue. It's sitting there, right there. But we have some styles on it that help it be not interactive. We have opacity zero, so it's visually hidden. We have pointer events, none. So the mouse can't interact with any of the buttons in there. And if we scroll in here, we can see that there's the inert attribute on there so that it's visually hidden and it's not interactive to keyboards or screen readers. We've essentially frozen it until it's presented. And we remove the inert attribute and we're able to give this thing interactivity again. Kind of cool. Again though, a little bit more works. We had to handhold some of these attributes and these styles because we wanted to animate. But I think in the end, it was totally worth it. So plus, in addition to the animations, if I scroll up here and hit escape to bring up the console, let me clear out the console and get it ready for a nice little demo and show you the events. So we have this opening event and we have an open event. So both of these fire appropriately. Opening is before the animations have happened and opened is once the animations have completed and the same thing happens for closed. So I can, it's closing and then it closed and I'm logging the data that was inside of that form so we can see what the user action was in this case. Look, it says closed. So if I open it up, I hit dismiss. Look, action is dismiss. Pop in here and hit confirm. Well, I don't want to hit confirm unless I upload an image. Let's see that. So avatar to confirm added a new avatar. I can see all the information. Here's the user image in the file. Really cool stuff. So I'm going to go over to Canary now and we're going to look at a couple more features. One of which is what happens when the dialogue gets really tall and what happens in different languages. All right, what should we do first? We've got to set it up a little bit to get it ready. So I'm going to, let's go with the scrolling scenario. Okay, so this is our dialogue element. We need to essentially make it way too tall. So I'm going to inspect in here, edit this as HTML and let's add a paragraph after the small p excellent. Okay, and I'm going to go grab just some lorem ipsum and drop that in. And then I'm going to copy and paste it lots of times. Paste, paste, paste. And then I hit command enter to submit and I didn't make enough of them. So let's duplicate, duplicate and duplicate until we extend beyond the viewport. There we go. Okay, look at scrolling. We'll add one more just for a good measure. Okay, so notice how it scrolls. So right, we're in a constrained viewport scenario. This would work the same as if it was on mobile. Our middle section is the scrollable area. This is the article of the content. So our header and our footer are still here and persistent but we're scrolling that inner area. So this could be for a really long, except our terms and conditions dialogue or this could be for form of some kind. I don't know, but this dialogue elements layout can handle it and it does that here by the dialogue has its sizing set to a max block size of 80 VH or 80 DVB. So that's dynamic viewport block or the physical equivalent which is supported now which is viewport height. Just kind of interesting. And that's where one of the constraints is coming from. The next one is here on the form. It's a grid layout itself. We'll go up to its grid layout. And let's just pin it over top so we can see it. Excellent. The header and the footer are both set to auto. So they're looking at their own content to see what their size is. And then that middle one is set to one FR which sort of sounds like an easygoing value. Like, oh, just take up the fractional rest of the space. Like it's no big deal. But it ends up being a nice firm value for us to use. And since we also set max block size here again to be firm. So that means that this dialog won't extend beyond this height. So now it has a constraint on height. Come to the article which is being set as a flexible space also says its max block size is 100% overflow wise scroll. So now any constraints that happen get pushed into the article and the article can start to overflow. And then the article can become scrollable. And so that's how I made this vertical really, you know, like if this is a really long dialog be able to scroll was using grid and passing down a couple of constraints so that this new where and what was going to be scrollable. So that was cool feature number one I thought was to make it able to scroll if it was inside of like small or different viewports. And let's do one more thing here. Oh, we'll get rid of the grid. That was kind of cool looking though, nice. I'm going to refresh and I'm going to right click and translate to Japanese here up in the top right. And let's just open that mini dialog up and see what it looks like. Okay, but we're not done yet. So let's close that, go to HTML. We're going to change the writing mode to vertical right to left, just like if we were reading a manga book and look, I'll pop that open. And sure enough, we have our icon at the top. This is where reading starts, right? Yes, right to left vertical top to bottom, I think. So yeah, and we go down this direction we're reading our title says you sure you want it and we have a cancel and a confirm button. And I liked it, even though it's not my language everything is laid out and there's like color coding enough that I think I could figure out and it's kind of cool. This was an interesting one that cause input elements have a physical size to them they don't have a logical direction yet. And this is set to center like vertical centering. And so here we are in flexbox land sort of like centering some text with the text area and it looks a little funky this way but at the same time it's nice and legible and I can go complete my tasks. So here I'll just upload another avatar, submit that and look at that we get our nice animation as it comes in. So cool, right? We have handling of really tall layouts we have international layouts we've got light dismiss we have all these extra events being fired all of this stuff comes together for us to be able to build a really nice dynamic dialogue system of just different types of dialogues, right? I love this little inline one I thought that turned out really cool having a nice mega one is also really interesting that we just I just keep adding this stuff all day this is really fun. And this was all just to prove out the demo of like what a dialogue could be like or what you might use it for. So this goes beyond just styling it and customizing it but also how would you build this into a single page application? So go check out all the code on GitHub it's all open source. This video today was almost all about show and not about tell and the article is all about tell it has all the little details to help you get started and master the dialogue element and deliver one into your application with confidence. So thanks for watching this GUI challenge y'all I hope to see you on GitHub making submissions about your dialogues and I'll see you in the next GUI challenge. Take it easy.