Query Params & Overrides

[00:00:00]
>> And so we can go ahead and add some of that dark mode to the button as well. And so we can do that, but first I'm going to kind of tweak a few things cuz we're not using any Tailwind at all in the present version of the button, that's the CSS module.

[00:00:20]
So I can go tweak Tailwind to my heart's content and nothing really matters. So we need to at least do that quick migration in this case. So there's a few options here, one is that, We could theoretically go in here and use some of the default Tailwind stuff, we can hit Apply and some of these things.

[00:00:50]
But you can imagine that even, have you ever seen a large Tailwind file, it's like a bunch of tiny utility classes. And you can imagine that even my tools for turning on and off classes about CLSX has a certain threshold that I have seen in reality of how many we choose to add, right?

[00:01:12]
So we could do something like, Even to make it real simple, we could do something like, I need to pull in a color theme before anything really works. I've got the default Tailwind colors in here. But let's just do an example real quick. So I'm gonna take out the background color.

[00:01:30]
And this is a little bit of a sales pitch for Tailwind and one of the reasons why even when I think I don't need it, I eventually break and end up using it. So I could do something like apply, and I can say bg-indigo. This is if you have an existing CSS file, we'll see how to do it in a second.

[00:01:51]
And first of all, the IntelliSense is wonderful. But then you can do stuff like hover colon bg-indigo-, 400, and not have that extra pseudo class, and under the hood, it will do all those things for you. And then what you can eventually do is get rid of the CSS file altogether, right, and do something where you just have them inline in the component.

[00:02:22]
For instance we, And so you can just keep them all in here, which is kind of a nice ergonomic thing as well, and now it's indigo. It's a little bit different cuz I changed some of the colors around, so it does get darker in this case. Actually, I think the hover still overrides it.

[00:02:42]
But you can put them like this. But I'm not gonna necessarily go and refactor the CSS module because I'm gonna show you a different strategy for creating variants with different colors in a second that will be better than whatever it takes me 35, 40 minutes to refactor by hand.

[00:02:58]
So we're just gonna do the better thing in a little bit, because I think for building a design system, there are better tooling than even just a long string of Tailwind classes and stuff along those lines, cool. There are a few kinda little things that we want to talk about here, which is, if we wanted to theoretically force a dark mode, right?

[00:03:26]
We talked about decorators, there's also this idea of parameters, right? And we've accidentally seen some of the initial parameters in this query params, right? And these are settings that you want to pass into a story, right? So one of the things that we can do is if we wanted to force dark mode, for instance, on a given story, we can do that.

[00:03:53]
And so let's say we wanted to make, and this goes into, especially if we wanna do visual regression testing and stuff like that. We would wanna have a dedicated story for that button in dark mode, all the different things in dark mode as well. And going in there and tweaking the theme is great while we're playing around and testing stuff.

[00:04:12]
Not great for running a test suite against and doing visual regression and running the accessibility test. Just cuz you have color contrast in light mode does not mean you have it in dark mode, so on and so forth, right? And so sometimes we wanna have a story that forces either something in the responsive design mode or forces it in dark mode.

[00:04:31]
And we can do that for an entire suite of stories by putting the meta, or we can do it for one individual story. And it all depends, you might have two files with roughly the same level stories, but one completely dark, one completely in light, or you can mix and match per story.

[00:04:48]
It's just whether or not you put in the meta or whether you put out individual stories, it's the same syntax. But let's take a look at that syntax and to see what it's like. So let's say, I'll say export const Dark, right? And now that we've got this plugin installed, and again, we haven't fully implemented dark mode yet, but we will in a second.

[00:05:06]
We'll do it as part of a larger narrative arc. And so here I can say that this story, the parameters, I don't actually want backgrounds, I want this point, backgrounds is that other one we saw before with the light, the dark background, messed me up for a second there.

[00:05:21]
We want themes, which is one added by that plugin. This one we're gonna say themeOverrides, plural, override. How many r's is in override, as we'll have to remember. And we'll say dark, and yeah, let's actually look at it. On point, I'll make my point in a second. So we'll go dark and you can see this one, no matter what we choose to do, this one is set to dark mode.

[00:05:51]
So now, we had visual regression tests, we had accessibility tests. They would see this story always in dark mode and also nice if you're developing, but the query params will mostly work in that case. This actually, if you look at parameters, themes: themeOverride and you go to preview, right, you can kinda see that we can actually do that for the entire suite as well.

[00:06:19]
You can have different settings in here, but yeah, for me mostly, we're just doing it on a story level. I might eventually graduate it up to its own files that are uniquely that but it's not worth it at this point. But either one of them depends on what your use case is.

[00:06:36]
While we're in here, though, I will just show you one more thing that's I think super helpful cuz I don't really have a good excuse to talk about it later. Which is, you can also force the viewport, right? So this one is parameters viewport, and you can actually set the viewport to mobile1.

[00:06:54]
Now, mobile1 is one of the current defaults in Storybook. You can actually, what did I mess up? Extra closing brace. mobile1 is one of those built into Storybook. You can say, hey, actually these are the breakpoints that we support, and customize that. How do you know what they are?

[00:07:18]
Here's a hack, well, this is gonna be a different story. You go set it to large mobile, and you look at the query param and see those mobile, too, [LAUGH] right? You can define whatever you want but generally speaking, if you're looking at one and you're like, I wonder which one this is?

[00:07:35]
Just look at the query param, there it is. And so you can force stories in dark mode, you can force stories at every responsive break point, and again, when we get into the whole, like, I want to make changes to my design system and I don't want to get paged, right, by the.

[00:07:52]
These are all incredibly helpful tools around that