Component Recipe: Notification

[00:00:00]
>> There are some advanced tricks that we can use to implement some different strategies as well, so let's look at that. This is what I'm just calling advanced component recipes, right? These are things that are like, there's some tricks that I wanna do, this is interesting. All right, so if we look at, our notification, we'd love to speak in a world where I gotta have one with an icon and without an icon.

[00:00:31]
But if you remember in the very beginning, when I was introducing this idea of components, I was like things that you can't do right? Like change most of the stuff, you can edit the text, but you can't like in a instance move the title under the body, right?

[00:00:51]
You can't like change like the bounds of stuff, they're kind of locked to a certain amount of their structure. There are things that you can override but a lot of their core structure is not changeable. So for instance, I mean this isn't a component yet, but if I go ahead and just make it a component real quick.

[00:01:15]
And we'll go ahead and pull in an instance here, Right and like cool I can change the text. But I'm kind of there's not a lot that I can do with this icon right? And you can see a world where it's like cool yeah, I don't want the same icon for all my different notifications, maybe I want like a thumbs up for the success.

[00:01:45]
Or like warning sign for the warning or, I don't know, different things, there's icons over here. I don't know what they call, I named them all at one point, but I've since forgotten. Perhaps I want one that I found in the Material Design icons, which was cowboy account, or account cowboy, right?

[00:02:09]
You wanna use that for something, just having one static icon isn't great. But if we recall that list I shared when I first introduced components, there was one little caveat that we can use. Which is you cannot change anything but you can swap out a nested component for another component, right?

[00:02:31]
So it's kind of a little bit annoying, but you basically, if you had an icon in here, you're stuck with the icon. But if this icon was a component, you could swap it out for another component which could also be another icon right? So in the same way we had all those buttons kinda grouped together.

[00:02:55]
We can also do something similar here where we basically take all of our icons and turn it into a set of components that we can swap the instances of. I should say that font awesome exists and that is icons that are just a font, and we saw that you can change text, right?

[00:03:17]
And so I'm using this one cuz there's a case where you can't use Font Awesome, you have an icon set. Which case this is what you gotta do but also like this is a metaphor for anytime you need to swap out stuff inside of a component. This case is icons, but it could be anything and we'll actually see some other cases.

[00:03:33]
But I should just do the quick PSA of you could switch the font to font awesome here and go And you gotta do font awesome free and then you've got, yeah, it's got to be solid right? I check out what happens if I type search. Angle right. Right and those are the ones that yeah, there's a whole bunch that I've memorized I use all the time, right?

[00:03:59]
So, it's worth thinking about before you go down this road if you need to go down this road. But like if it's not the icons, it's gonna be something else eventually. So like the strategy still holds up but for the use case of icons in particular. You might consider just using a icon font.

[00:04:22]
So what we could do here is we can grab all of these then copy and paste them over here for a second. And now we have a whole bunch of these in place and we can go ahead I'm gonna wrap them in a frame called Icons. That seems like a good name, and will kinda just select all of them a lot of times it's easier to do it from the menu honestly.

[00:04:50]
Select all of them and we'll go to create multiple components. And now if we go into assets I'm really making a mess out of this Let's see we're in advanced component recipes under icons. You can see that I can drag in one of these icons. And now I can swap between them, right?

[00:05:15]
So in here, I'm kinda stuck with this. And let's actually make that let's get rid of this one. How do you get rid of a component? Get rid of the component, it's prototypal inheritance, just delete the object. So this will be our new base one. And what I'm gonna do in this case is now that this is just detached, I'm gonna make sure it's detached yeah.

[00:05:38]
Let's see pick the overall frame. Like just be yourself. Cuz what you don't want people to do is hey, they wanna replace this icon. They detach from your component and now any updates you publish, they'll never get. It's one of those things unless you make it easy for people they will do bad things, and then you will suffer.

[00:05:59]
So now instead of having an icon in there I will bring in. Let's see, where's that box in there? What's that box doing? The pause icon there like in frame. So there's some auto layout going on here. And we'll just drag it in over there. This looks the same, but it's now a component instead of an icon.

[00:06:25]
Right, so I could if you see if I click on it. I could swap it out with an electric guitar. But this isn't an instance yeah this is just a normal layer so I can do whatever I want to begin with but the fact of matter is this behaves almost the same.

[00:06:40]
But instead of like directly dragging in an SVG or an icon, now I'm dragging into component and there's different roles. So let's go ahead and in this case, we will turn it into a component. We'll drag it in, and now I couldn't change that icon before. I'm just gonna make sure that now I can go ahead and change it to any of the other ones that are in that component set.

[00:07:08]
So the rule of you can't change things in component instances that are part of the structure does not apply to swapping out one component slot with another component slot. And one could behave poorly with this. You hold Command, no, let's actually just do it over here. One could behave real poorly.

[00:07:39]
And this is why the entire instance, I'll see if I got the. Let's go get it here. Take the star believe, hopefully, ideally, if I can't do this is even better. That's itself let's see. Yeah, I can put in any component in there, now it will contain the generalized shape and stuff along those lines, that's the border radius and stuff like that.

[00:08:15]
So having that hierarchy so that like, at least you saw that the sensible default there is the other icons, that makes sense, you should do that. But you can now swap out the icons and all the different instances. So you could have a different one for your info, for your primary, I mean for error, for your warning, so on and so forth.

[00:08:33]
It's a little trick that allow you to have more flexible components because again, any world where someone detaches, they can make a change is a world that involves future sadness what's up?
>> So could you swap out the icon for an empty component or that have to just be a separate instance of the component?

[00:08:50]
Cuz above you have like the title no icon.
>> Yeah, so I could swap it out for l think it'll keep the general shape. This case I would probably have the same we had with label and without label. However, you're onto something here, right? Where could I swap it out with an empty one?

[00:09:10]
Possibly but then the inverse is also true, which is this one has a default icon, what if you don't know what should be in there. You could actually create a empty component and swap that in with all the different variations that you might want. We'll actually see that in like 2 examples.

[00:09:28]
So I love that question [LAUGH]. But I've always just made the two variations so I can just drag in the one I want cuz what I can basically do here is. Let's say I turn this into a component. And I'll show you why I've never tried to do it.

[00:09:50]
If I make that and I move this on up here, and I put them in a frame together. And then I drag in either one of them. Right the reason I've never tried to do that really is because as soon as I have them in a folder together, I can just do this.

[00:10:15]
And if they inherit from the same base component, could I do it? Could I play tricks or like a one pixel component and do a whole bunch of hacker, I probably could. I don't know what gains me over just having the two next to each other, right? And that's nice and easy and stuff like that so could you, possibly, should you, probably not.