Implementing a Callout Component Exercise

[00:00:00]
>> So your job is to kinda like play around with this from the first principles. And so if you look, this is linking to the Figma which has view access. What would it be like to kind of either, if you wanna use the CSS module and the variables, go for it, if you wanna use CVA and the Tailwind classes, go for it.

[00:00:26]
Whatever kinda makes you the happiest, right? But can we take this, and don't worry about the icons, we can deal with that separately if we choose to, but the general idea of the variations and the colors and the support for dark mode across these things. You can click here and it'll jump you into the Figma.

[00:00:45]
And again, should you attempt to get pixel perfect? Go for it. Do I really care if you get pixel perfect? I don't. But like kinda gaining a sense. But these do use the practices that we kinda came up together, a theme portal, to see what it would be like for us, but just getting a sense of, I did a lot of talking.

[00:01:09]
Let's get our hands dirty, let's try it out, and then we'll do it together as a team. All right, so our job is implement these components. This is all using stuff that we've seen before, but the idea is, it's one thing for me to say, it's one thing to get the blood flowing and try it out.

[00:01:27]
I did make a cheat sheet here of the colors, which is why I'm glad I didn't go rogue and implement that other color system cuz that would have been bad. But I didn't do that, so here we are. And mostly, [LAUGH] really, once you realize the values are all the same across all of these, it is somewhat straightforward, and the variants are named after the colors.

[00:01:49]
It's almost like there's a unifying theory going on here. And this is why those semantic colors are helpful. And so, we've got some shades for light mode, we got some shades for dark mode, and now it's really on us to begin to implement this. So, how do I wanna do this?

[00:02:09]
Part of me just kinda wanna start. I'm gonna start with the class variant stuff in this case and kinda go from there. All right, this is my callout presently. Not a lot to work with here. Let's go ahead and we'll make the call variants .tsx. I guess it could technically be .ts, but whatever, I typed tsx, and so that's what we're doing.

[00:02:44]
Okay, so we can import cva and the VariantProps from class-variance-authority. And then really it's const. Did I call it just variants in the other one, or did I call button_variants? If only I could check and see.
>> Yeah, variance.
>> All right.
>> Oops, with the s.
>> All right, my whole thing is that consistency is important.

[00:03:09]
I should follow my own principles, right? There's argument for why you should call it CalloutVariants and ButtonVariants, which is the auto import that VS Code has. The more specific you get with naming things is helpful, but you're never gonna really do this outside of that file, so whatever.

[00:03:31]
But that thing where you can just start typing, I think you have to import and hit tab, it's great. All right, so you can see it takes two things, the base classes and then hopefully eventually the config, which has my variants, default variants. There's this idea of compound variants where you can say like, if it's this variant, it should be these other three of them.

[00:03:51]
Seems cool, never used it. One day I hope to have a reason to use it, but presently I don't. Cool, and so if I go to the design, Figma. Roughly, I get to cheat because I built the thing and I know that these are probably a border array is about 16, a border of about 1, so on and so forth.

[00:04:20]
I'm not sure how much you can see in view mode, which is why I said don't worry about being pixel perfect. If you do have Devmod and Figma, some of that helps a little bit as well. And you can see what the various pieces are in here. But yeah, so I've got a gap of about 1 RAM, so on and so forth.

[00:04:43]
Cool, so let's kinda get to some of those base properties in there. Again, the pixel property is not the important part that we're aiming for here. So we're gonna say that, generally speaking, we want a padding of 4. And then we'll say that it's rounded. I think of that's LG.

[00:05:03]
The nice part about, again, where I get very lazy with Tailwind. There might be a tweak that I need to do to actually get this work in the class variants authority, but if you use it in a component, you can usually hover over and see what the value is as well.

[00:05:22]
But there's four to get in match with this. There's one tweak you need to do in the project settings in VS Code. But theoretically, if it wasn't a class name, I'll show you real quick just to make my point. One, the autocomplete is great, and then two, see that's only 8 pixels.

[00:05:42]
I think I need 16,12. There's no way that is 2xl, whatever. Again, I don't really use Tailwind that much because it gives me a bunch of classes for free, cuz we do replace all that in our theme, but that tooling is just nice, right? And again, you don't have to use any of this.

[00:06:04]
I'm just using it because it's convenient for me. I think that 16 is a little bit too much, but no one wants to see me squint at a Figma, all that much. Give it a border, I think it's just a border of 1 if I remember correctly. And I think it had a little shadow.

[00:06:26]
Cool, cool, cool. And then we say that our variants are, let's start with the primary one and then let's see. We'll say, it's gonna have a few classes to it. And so if I looked at cheat sheet that I made earlier, we would say bg-primary, it was 200 for the background, and it was use a closing quote.

[00:07:06]
It was border, primary was 500, it looks like, and then for the text, it was text-primary, 900, cool. Cool, so we got that in place. What is the red squiggly line so angry about? Variants. We have to put it under key. So you could've done appearance. You could've done kind, whichever one made you happiest.

[00:07:38]
I, for some reason, because we use variant cuz it was used everywhere, have, chosen to do that. So we've got one in place. Let's start there and see if it works at all and then we'll kinda implement the rest, because, especially when things, particularly when I'm teaching, but in general in life, I hate when I do a bunch of tedious stuff and then found out I made a booboo in the very early phases.

[00:07:59]
So we will find that booboo out now. So we're gonna export variants, as well as our CalloutVariants. Great, we do need to pull this in here. Sure, we'll keep that one and we'll say import {variants, type CalloutVariants}. And here we're gonna say that, the only prop I really care about is children right now.

[00:08:29]
It's because for buttons and input fields. Yeah, no one wants to re-implement type, text, type number, type, all these things. I don't tend to do that for these kind of one step up components, right? No, you shouldn't be able to do everything on a div. I might make at one point a type that is like, okay, test data, test ID for test selectors and stuff like that.

[00:08:59]
And those things that we allow and choose to do, but I won't say like anything a div can take, this can take because people will put terrible things in there, right? Somebody in a pinch will always, and sometimes it's me, honestly. The nice part about, it's very humbling to be the leader of a team and then occasionally have people on your team going, Steve, what are you doing?

[00:09:20]
Right, so yeah, when I say people on your team, sometimes it's me, sometimes it's a junior engineer. Sometimes it's a very lazy senior engineer. We all get a little sloppy sometimes. Cool, and so here we'll say that really we just want the children, right? Cuz I'm gonna say that the body is the children, we'll say type CalloutProps = PropsWithChildren.

[00:09:46]
This is a React one that is just basically wherever the props are in here, plus children, because it's not what you think it is. It's like React node and/or text and/or something like that one could see hypothetically. And so we'll do that color variants. And the other thing that I know that I want is a title which I'm gonna make mandatory.

[00:10:08]
That should be a string. Great, so we got children, we got title, and we got, variant, and that's gonna be my CalloutProps. What you angry about? Yeah, I haven't used them yet, don't worry about it. All right, so in here we're gonna say that the class name is, .variant, it goes in there.

[00:10:46]
And IntelliSense knows that right now we only support primary. If I look at this class, you can see that it is abstracted away, but clearly it knew in this case that primary is the only one supported. Honestly, we can probably get away with like a title. And I'm gonna wrap the children in a paragraph tag.

[00:11:10]
You can argue that they should be able to pass in the markup. I don't wanna argue right now. Yeah, again, the the long tail of all the weird edge cases that you need to support is a lot of fun. Cool, so that should basically be my base classes plus as long as I pass in primary, the initial colors.

[00:11:35]
I am not concerned. I'm not totally convinced I did this right yet. So I want to create a story. This kinda shows you my development flow. I might try to simulate, can I get the both windows side by side on my little 14 inch MacBook? Normally there are two monitors involved and each of them are 27 inches.

[00:11:51]
I got a vertical one, highly recommended for working on a website.