Has Utility Exercises

[00:00:00]
>> Steve Kinney: I'm going to give you some challenges and then we'll do one or two of them together depending on my mood. We go into these has challenges here. The one you should definitely take on is let's refactor that checkbox container. You can find the answer if you look at the previous thing.

[00:00:16]
But we can try some of these as well. We did a version of this. Yeah, and if anyone has some interesting use cases, you wanna try to stump me, cuz people who edit these videos love when that happens. Let's totally do that. And if you come up with some ideas, could you do this thing?

[00:00:39]
I'll take a run at it live, right? And so if anything comes up, we'll try it out. But let's definitely try this one because we have all of the pieces from a previous example. And I'll put what I had up on the screen as well just so you can see it.

[00:00:56]
But what I have right now has appeared. So like we want to make the whole thing turn green or whatever color. Just some visual feedback for the parent element based on the checkbox itself. All right, so our mission is, we want to have some styling. Like we have that focus within which I guess counts a little bit.

[00:01:21]
But we would love to give some feedback of if it's checked or whatever. Have a actual style for the parent itself in this case. So this will involve a little bit of, and we can mostly get a while with just has. We can do some other interesting things while we're at it too.

[00:01:43]
Cool. So let's get rid of some of the other stuff that we're playing around with. Mostly the focus within piece. So then I've got a, yeah, we don't even have a. Just other fun stuff that we have. It's got a border, it's got a background. The peer checked works in this case.

[00:02:11]
We'll see if we can do it both ways in a second. So this one becomes somewhat easy where we can simply say has and we can say has checked. And we want to say bg green. I don't know, 100 seems good, right? So now, if it has a checkbox it changes like theory.

[00:02:36]
We can query for other stuff in there. We'll find some other places to do this as well. And if we wanted to the peer works here, but we could also do something like effectively this will get you the same group has checked line through. I didn't put the group if you.

[00:02:59]
All right, we'll talk about this in a second, this is actually good. You don't have the group on there, then it's not in the group. And we can see, we can hover over this. We see group. Where my intellisense go after I got done complaining about i?. We'll show back up in a second.

[00:03:20]
So, yeah, we have the group. So now we have the same effect we had up here. The nice part about this one is I don't know why you would move a label before a checkbox. But the important part is that nothing will break because the logic is still the same, right?

[00:03:38]
If it isn't a parent that has a checkbox that is checked, you will still get the strikethrough whether or not it's before, whether or not it's after, both will work in this case. All right, did anyone have some ridiculous challenges for me to try? Mike's thinking about it.

[00:03:52]
He's thinking about how devious he wants to be at this moment, which I.
>> Speaker 3: Wonder if you have a couple of checkboxes and the middle one is checked, then you show two more questions lower in the page.
>> Steve Kinney: Okay, let's start with the. Show two more questions if there's one in the page, right?

[00:04:08]
And then we'll get to that.
>> Speaker 3: Yeah, I think the idea is it's a specific one that needs more info.
>> Steve Kinney: Yeah. Yeah, I like it. Let's do it. Cool. So let's say, let me put that label. We want the label after it. And we'll say paragraph. Or let's give it a div.

[00:04:33]
Let's change the label to. The label's kind of. We can change in storybook.
>> Speaker 2: What was your dog's name? And the question could be, did you have a dog?
>> Steve Kinney: Or I was gonna say, yeah-
>> Speaker 2: Whatever you want.
>> Steve Kinney: Yeah, we'll leave the label, the checkbox. We'll just show something like.

[00:04:48]
We'll show I'm real generic, so we don't care. And then we'll do an input. Sure, yes, definitely take what we wrote before. That seems great to me. So right now it shows everything. So we could do something like. So now it is completely hidden. You can't see any of that.

[00:05:25]
What we can do is, in this case, we can just say, group has checked, turn it into a block. Now, we can say, if only the second one, at that point, what I would probably do is just have my div kind of be the, yeah, I'd have my parent element be the controller of it.

[00:05:47]
But you could do something like has nth child 2 checked? That will work. You can do that, but you probably hate yourself at that point, [LAUGH] yeah. And yeah, at that point I would maybe give this one. Yeah, I would probably, just on a layout level, cuz I think it's worth talking about just to make it a little more realistic.

[00:06:08]
I would probably put the checkbox and stuff in there. And then I would maybe give it like space-y-4. It's fun. Accident, this is such a good segue too. So this works or it doesn't work for a very real reason, which is that space Y4 is problematic because it's saying put a margin bottom on every element.

[00:06:35]
That's not the last element, right? And it's working. It's not what I want, but it's working. So in this place, it's definitely a point where something like flex, which we will talk about flexbox in a second, but it's called a segue. Flex call. And we'll say gap of two.

[00:06:57]
Now when we check. Shows up as well and we've got that in place, we could even probably like, I'm gonna. I'm gonna go. I'm gonna regret this. I'm going for a bon. Pulling that primary button. I think my primary button just always says button no matter what, but that's fine.

[00:07:48]
Actually, we're gonna do something similar. There's a way to figure out if a input field is empty or not, right? You could technically do required and have the valid invalid state. That's probably the right way to do it now that I think about it. But I'll show you both, because I'll show you both.

[00:08:17]
So this flex call, now we're gonna say if it's checked will be flex. Okay, cool. Give it a gap of 2. So if we wanted to say like this button should only be shown if they add a reason or something like that. Let's not even do flex-col. Let's do flex in this case.

[00:08:44]
That's ugly, but we'll go with it. Let's say we only want that button to appear if there's something written in here as well, right? We can kind of continue to be like. Again, I don't know if I can pass classes there. Let me just put a button in here.

[00:09:01]
I don't know if I wrote it like that at all. Button. We'll go with the unstyled button at this moment. So we say button like only shows up. I don't know. Group has. You could always put in arbitrary. Regretting this choice already, but we're gonna do it. We're going to do it, it's going to be great.

[00:09:47]
Has an input group invalid and then we'll hide it and we're going to say that this is then required. So now the submit button in this case only shows if they've got the details in there, right?
>> Speaker 4: So you're really familiar with talent here. So you know the magic incantation of what to put in class.

[00:10:31]
Can you walk through like what you would do if you were trying to assemble something like this, doing the smallest steps you can with a temporary element or something. How do you kinda get confident that all the little pieces of what you've just done are working piece by piece?

[00:10:51]
>> Steve Kinney: I mean I would probably break this out into multiple components, right? So would you have one or would you have like, is this really two components? Is this really an input field? And is showing or hiding the submit button a little wonky? Because you could. I've got questions on the accessibility implications thereof, but arguably you could say that this should be two components and you could pull it out and then have each piece working in isolation.

[00:11:22]
That's where that componentization comes in place. Because you know what you, you know, it's really hard, you know, you can't unit test css. Right. So that by your testing it becomes real, real tricky in this case, I guess. Could you component test it with jsdom? Yes, you definitely could.

[00:11:44]
I'd probably just break it out and then try to figure out like. Cause again like this is just looking for any invalid input and then the submit button goes away. This is very like high level to be begin with at this point, but figuring out what are the queries.

[00:11:58]
But I would probably break it out into multiple pieces. Does that make sense?
>> Speaker 4: Yep.
>> Steve Kinney: But yeah, you can theoretically have all sorts of different states change based on what's going on in the parent. The other example would be if we did want to show if it has an image, I want it to lay it out differently, so on and so forth and some of it is just kind of like playing through it in that case.

[00:12:24]
But yeah, I would say breaking it apart into small pieces that you then assemble together. But the point is you can do complicated flows. What you can't do, you can change the way things look. What you can't do is change the actual attributes on an element. But what if I want to disable the submit button?

[00:12:50]
Can't really do that, right? Because that would be changing the attribute. Well, I'm just going to make it opacity and give it pointer events none and hate everybody who uses a screen reader. Right? You know what I mean? At that point you would probably eventually, on a long enough period of time, you will end up writing JavaScript.

[00:13:07]
If you pull on the thread, there is a large set of things that you no longer need to do that probably should never have been done. If you're just changing way something looks by applying and removing classes, we can just have better classes, right? If we are changing the semantic meaning.

[00:13:22]
Welcome back to JavaScript. Right. But one would argue that's probably what JavaScript was here for.