Add Button Sizes Exercise

[00:00:00]
>> So I'm gonna cut you loose for a minute, I made different button variants, good on me. There is also the concept of sizes of buttons, I made some arbitrary decisions on how I want my button sizes to be if you hate these sizes. And you wanna make a giant button, you do whatever you want.

[00:00:20]
If you want some free CSS, take my CSS, do whatever you want. Your job over the next few minutes is to go ahead and then add in this idea of button sizes, along with all the variants that we have. Awesome, so our job was to add a new prop to help determine the size of our component.

[00:00:47]
And so let's go ahead and let's do that. So I think we have way more than three sizes. But you get as much of the point implementing three sizes as you do the five or six that we end up having. So we can say size and it will all depend a little bit, a weird thing about me is I don't like shortened words or acronyms.

[00:01:16]
Even stuff like dev tool ironically I call it developer it's really obnoxious, so I will call it small, medium, large. Your design system might be different cuz I don't know what to tell you about it with xxl or extra, extra large, you decide what you wanna do. So we've got the sizes here and I do need to add those to the CSS cuz I don't think they're included in here.

[00:01:38]
Let's actually grab those classes from where I gave them to you. And we can basically use a lot of these same techniques here. And so we've got that in place, we've got the styles, and those are in the module now. So we can actually add it in here.

[00:01:57]
So we can say that we're gonna pull off the size, no, no, not sizes, size. The size as well, so we'll say size, and you can decide if you wanna have a default in this case. I'm gonna assume that since I've got three buttons, small, medium, large, I'm going to decide that medium is the default size.

[00:02:23]
You could also make those things required. It all depends on like the use cases of your design system for me /us, medium is our default one. Cool, and then all you really need to do here is, now that we're using this you can imagine if we had to do three more of those if statements.

[00:02:44]
And concatenate stuff on that would get obnoxious, we might start playing around with array.join space, all sorts of stuff, but I don't have to do any of that. I can just say styles, size, and that is going to get the key off of that value as well in here.

[00:02:59]
And out of curiosity before I add any stories, I'm gonna peek over, it's not really curiosity, but we'll go ahead. The hot module reload is great for the components, but for that kind of generation of refresh, we'll do the trick. We have small, medium, large, disabled, enabled. So the question we got earlier is, would you make a story for every single combination.

[00:03:21]
We'd already be at what, like three times three times three? Three times two times whatever, so I don't know if I would necessarily do that, right? I might have one for a disabled button if I wanted to verify that it was in fact disabled or something along those lines.

[00:03:38]
And then I wouldn't do a primary large, secondary large, destructive large, so on and so forth. I would probably have these three and then maybe a small and a large since mediums default, maybe I'll include medium. It's kind of like, it doesn't really matter, but if I wanted to verify something, then I could do that as well.

[00:04:00]
So let's go ahead and add that. And again, this becomes export cons small and are small. And we'll do the large and we'll see one thing that, no, I don't want medium, I'm trying to make a point here. I export cons, large, story, story, story with the arges of size large, thank you IntelliSense great.

[00:04:34]
So one thing that you will notice is that one if we go to small, you see that the small radio button is selected and if we go to large, we can see the large radio button is selected. In the event where theoretically we are passing in undefined then it's not selected at all.

[00:04:54]
For most, that is technically meaningful cuz it is undefined and there might be a difference. You might not necessarily have a medium, but the default for me that bothers me. And if it bothers you, we can fix it very easily. If you are a much more of a just well rounded person, then you have to worry about these things.

[00:05:13]
So I can go ahead and say that by default unless I override it, then we'll say yeah, sure the variant is primary and the sizes medium. And now in all of our stories, we will see the selections are in place there, right? Again, if undefined is meaningful, don't set it.

[00:05:32]
If you want a default in there because it bugs you that it's not there, go ahead and set it. Is it important either way? Cuz our code still then programmatically defaults to primary medium, sure do that as well. Whatever makes you happiest will work in this case.