Component Recipe: Menu Slot

[00:00:00]
>> What about a drop down menu, right? Do I have to make bespoke drop down menus every time? We know that I might use a variant for, is it open or is it closed, right? But do I want to reimplement this component for every drop down menu in my library?

[00:00:15]
Probably not. The trick that we're gonna use here is, effectively, the opened menu is gonna have this bad boy right here. This is basically, it's a placeholder component that I can then swap out with anything else that I want, right? And so what I'll have is a menu where I can change the text.

[00:00:42]
It'll have the variants of open and closed, right? But then for the instances, it'll have this invisible menu that I could swap with any menu that I want, in this case, right? So let's actually go and grab both of these. And we'll paste them in here. Nope, I always paste in there, it's in the exact same spot.

[00:01:05]
We'll drag them out here for a second. All right, so it's just an open and closed. It's very much like the input fields that we designed earlier. We've done this trick enough times. It's just using auto layout. It's nothing that we haven't seen before. And then we have this idea.

[00:01:19]
Well, this is SVG cuz I couldn't get the visual. It's really hard to take a picture of an invisible component, let's just put it that way. And so what we'll do is we'll also create this frame that is going to be, What's the width of this? This is 240, this one is 240 by 1 pixel.

[00:01:53]
Again, it is somewhat hard to get my hands on this thing. Okay, so we'll call this one Menu Slot. And I think someone in the chat also asked about, are we gonna do slot components? So this is that technique right here. And what I'll do is, I will turn this into a component.

[00:02:15]
All right so we've got this Menu Slot component. And then we can also take a menu, right? You might have for the different menus that you might use. And again, you could theoretically use the trick from above where it's super long and you shorten it. In this case, if the menu is just text, you actually don't need to do the trick where you slot in child components again, because you can override text.

[00:02:38]
If you wanna do craziness, whether it's in Mac OS, whether it's this menu, and then a child menu, right? You can combine these tricks in all sorts of gnarly ways. But we can have the second component here, which we'll say is, Let's call it Menu Items, in this case, right?

[00:03:02]
And that will be a component, as well, Right? And now we'll drag in an instance of my invisible component. I'm gonna put it up against, let me just move it manually where I'll just add, I don't know, 8. 8 seems good? Right, so you've got one with and one without.

[00:03:40]
Now, I do need to make this a frame. And so this will be, Open is true, this one will be open=false. And now what we can do is, create the components set. And we can drag it in, and you see the variation. Nothing really happens, right? You can see it growing cuz it's got that invisible one.

[00:04:17]
But, as we saw before, we can swap component instances. We can't do anything else with components in terms of changing their layout. But if it has an instance in it, you can get your hands on. I should make the field clear for the empty one, but for right now it's serving me [LAUGH], it's visible.

[00:04:38]
Yeah, we can also go to the sidebar here, where it's probably easier to find. We go to the Menu Slot, and here we can swap it out for Menu Items. That one that I had was just an example, that walk through, it was a vector. My own trick backfired on me.

[00:04:56]
Don't laugh at me, [LAUGH]. So here we've got this is an auto layout container, hugging the contents with a bunch of stuff in it. So now I swapped out the empty slot, I'll actually show this again cuz, why not? You're all worth it. We can bring in a menu and I can have a whole bunch of these menu contents, right?

[00:05:15]
I can organize them in a way that makes sense, so on and so forth. So here we can toggle it open. Now, because it's an invisible slot, it is way easier to go here, select the invisible thing, and then I can swap it out for this Menu Items, right?

[00:05:31]
Now you notice that that is not in the closed variant. So now when I go here, open, closed, open, closed, open, closed. And this is a reusable component. I can change the name of this to anything I want. And then I can have, for the various drop down menus, which, yeah, do deserve their own component.

[00:05:50]
But I can use that trick that I saw before where, yeah, this is hugging the components. But I could also have it a fixed width, and I should be able to drag it to the different size, so on and so forth. Again, if you wanna do nested menus, the same trick of being able to swap out components works, right?

[00:06:06]
And so, it's a way to kind of compose some of these more sophisticated things. And you can have all those states, instead of the alternative to not doing this. You'd be like, this is a little much for me. Yeah, yeah. The alternative to not doing like this, is you basically have a frame that had the entire UI with the menu open, and then another frame with the menu closed.

[00:06:28]
So you get to choose, right? And the big question you always need to ask yourself too is, do you want to be a completionist, right? If the goal is to get a prototype in front of your customers, right? Or even just to kind of make sense of stuff yourself, to see if anyone wants you to build the thing, does every single menu need to open and close?

[00:06:50]
Probably not, right? You need to make the parts interactive that need to be interactive, right? The idea is enough to validate whether or not the thing that you're building is worth building, right? And as much as you need, and probably as little as you can get away with.

[00:07:05]
Now having a full design system, right? Having stuff like hover states cuz, again, as engineers I have been on the receiving end where I get to design and I got a button and I have to go back to the designer and be like, but what's it look like when the mouse is over it?

[00:07:21]
How about active? What's it look like disabled, right? And all those kinds of things, right? So it's definitely an art form, as much that is helpful for you getting the job done. And not always about being a completionist and never shipping, right? The same way that refactoring your code forever, until it's flawless, is a great way to put the company out of business.

[00:07:46]
So it's always a trade off, in a sense. But for the places where you need to do that, right? This does, in fact, work in this case.