Organizing and Customizing Blocks

[00:00:00]
>> Just one last thing, and we kinda mentioned this earlier, but I kinda wanna do it a little bit better, is organization 'cause you could see this could get outta control, right? And so if I call these tokens colors and I go back to my button and I say, buttons stories, I'll say this is components/button.

[00:00:27]
Because that page is no longer exists. But now these are organized under components. These are organized under tokens, right? You can begin to bring some amount of organization and sanity to the way that you display these things. So I only had one thing, it wasn't totally useful, but as you add in more components, you could have those primitive base components.

[00:00:47]
If you think about things in the atomic design thing of like atoms, molecules, organisms, you might choose to add that level of hierarchy. It's whatever works for you, everyone's got a little bit of a different opinion on that, so you can do whatever in this case as well.

[00:01:03]
And there are little things that you can do here where you can choose to customize this table. So if one wanted to kind of annotate their arg types a little bit more in the stories, you get the net gains of that in the documentation. So what do I mean by that?

[00:01:20]
So for instance, let's say children. That's that kind of thing that we had before. We could say that size should be a select two. Why not? And so I actually wanna call it the button label. In this case, I can give it a different name. I can say the control is text.

[00:01:39]
I can give it a description. If I don't wanna include it in that table because no one should have to explain what React children are to you, you can choose to disable it from the table. This is not gonna disable it in the stories, but in that documentation piece, things that you don't, maybe there are private props or something like that, you have the ability to choose what you show and do not show in your documentation.

[00:01:58]
So I'm gonna turn this off for one second. This commented out and you can see this is now called label with a capital L. We can give it a description of why it is used, right? And then in the table we can choose to disable it. I forget if it's the way you put the default value of isn't the table or not.

[00:02:22]
Luckily IntelliSence will yell at me if I put in the wrong place. So we'll find out together. So now it's gone. You could change variant. If you wanna capitalize stuff, go for it. You can label these whatever you want. There's also little tweaks, you could show the various options so you can show what's required, what's not.

[00:02:37]
You can get more specific in here. It's just like little tweaks that are not super useful, but this is all kind of like, documented both in the course website and here as well. But you can begin to tweak this stuff based on what you want, Dustin?
>> Is there a way to pull in the options of a variant from a CVA instead of making it a string?

[00:02:54]
>> All right, so clearly, in this case, it does know what the options are, and it's figured it out from the type. So the problem is like the TypeScript is done. Most is, I'm trying to come up with an example for it, but I'm pretty sure if I think it's options, yeah.

[00:03:15]
I'm gonna take out large just to show, because it already came up with one, so I can't, like, if I rewrite what it already generated, it's hard to see that it's me [LAUGH]. But let's take out large and now you can see it's just small and medium. And so you can do that if you wanna take the, let's do that with the child in this case.

[00:03:39]
So that's a string. Label will now be a select, just slightly weird, and we'll give it the options of button. Sure, I like these options. And now instead of a string, they can pick one of a curated set of what it should be, so you can have like complete control of it.

[00:04:04]
Complete control over the controls. I'll just go with it. And all the things and tweak stuff, and this is again, usually best practice in collaboration with your partners and design about how they wanna communicate the intent of the design system.