File Tree Challenge

[00:00:00]
>> Speaker 1: Let's say we're building a file or folder picker. We've got like a checkbox that represents a folder and checking that should make it look like we've selected all the files in that folder too.
>> Steve Kinney: Okay, all right.
>> Speaker 1: Can we have a folder with a couple files in it?

[00:00:19]
>> Steve Kinney: Yep.
>> Speaker 1: And then a file that's the sibling of the folder and see how close we can get to sort of. I'll leave you to interpret what that means.
>> Speaker 3: Modify a tree.
>> Speaker 1: Yeah. I'm saying I want the visual appearance that children are selected even though they.

[00:00:36]
Might not be.
>> Steve Kinney: Hidden feature of this repo is you can do npm run create, let's call it filetree.
>> Speaker 1: We're making a new component.
>> Steve Kinney: Rather than, yeah. So now I should have a FileTree folder in here if you want to play around with other stuff in a little safe space.

[00:01:03]
I made that for you. Cool. So we've got this Hello FileTree! The challenge was we want to have some kind of folder file hierarchy here. Let's just pull that up in here as well. And I told Mark we're doing good on time. No, this is good. I love this bottom.

[00:01:34]
Do you see it? It's on the bottom. Yeah. Why is it on the bottom? That's not how. Whatever. I don't make the rules around here. Cool, cool, cool. So we've got our file tree. So what I'm thinking is we make a section and we'll have the,
>> Steve Kinney: Let's just say that the label is whatever kind of folder that we had.

[00:02:17]
Input type checkbox. We'll give this an idea folder. Just not be total id="folder". And we'll say this is for.
>> Steve Kinney: Save that, okay. We want that other order. And then we're going to say that we've got. These will be their children. So we'll give it. You could argue it should be unordered list.

[00:03:00]
Let's not work. Yeah. Okay, fine. And we're going to say the thing is like, we can't make them checked, right. We can style them as if they are.
>> Speaker 1: Let's say that there's some back-end that's gonna regard the selection of that folder as-
>> Steve Kinney: Yep, that-
>> Speaker 1: So we just want the visual appearance that the children are checked when you check the parent.

[00:03:31]
>> Steve Kinney: Yeah, all right, yeah, the big question is, can we actually check the box? We do something, right? And this is where you a lot of times, in bigger apps, you will see the questionable pattern. Anytime you see that toggle switch, that's a checkbox where the checkbox is hidden.

[00:03:51]
And an SVG moves some stuff around, right? Like that's, you know, that's where you see stuff like that. But we'll get to something that gets us most of the the way there.
>> Speaker 1: I would even take an example that has like a hidden check checkbox or something that's conditionally presented.

[00:04:07]
>> Steve Kinney: I'm not having SVG. But we'll figure out, well spiritually versus we'll do the version that does not have me live coding SVG in front of you. That's, you know. Let's start.
>> Speaker 3: Yeah, you can make all the files not selectable. That'd be one. And also gray and italics is a-

[00:04:21]
>> Steve Kinney: Yeah, well, yeah, we'll figure out. We'll figure out something.
>> Speaker 1: Even disabling them would make sense regardless of their check the state recently.
>> Steve Kinney: Yeah, and I won't even do any. I don't need stick up a lot of real estate for something I'm not using. And I could theoretically even do a snippet and spelled.

[00:04:38]
I'm not gonna do any of that. So we'll grab this and we're gonna say,
>> Steve Kinney: Again, in an actual component system that would be its own component, so on and so forth. But we're not doing that right now. We'll say this is file, file, file and we'll give this just some visual hierarchy here.

[00:05:05]
We'll say this has got a margin left of that. Nine's not number. No, [CROSSTALK].
>> Speaker 1: Maybe the UL element.
>> Steve Kinney: Are we not refreshing what's going on or do I just don't understand how anything works all of a sudden? We'll cheat. Everyone should have a favorite color that they use to figure out if anything's working.

[00:06:00]
>> Speaker 1: If you don't make your body background lime green to see if refreshes aren't working. I don't know what kind of CSS you're writing.
>> Steve Kinney: Give me a second to figure out if I shut down the server accidentally or something real dumb.
>> Speaker 1: Do we want to inspect the HTML to see if that class seems to be applied?

[00:06:26]
I don't know. You're the tailwind expert, but.
>> Steve Kinney: Well, yeah, these four errors here, are not giving me a lot of.
>> Speaker 1: Well.
>> Steve Kinney: [LAUGH] All right, that makes sense. We were so focused on so focus on the CSS we didn't stop to think about. Didn't solve our issue, but we did solve that problem.

[00:07:06]
Yeah, let's inspect. My God, all my controls are so big.
>> Speaker 1: Well, that's a recent change, file-1.
>> Steve Kinney: Yeah, yeah.
>> Steve Kinney: I have a theory. The oldest theory in the book.
>> Steve Kinney: Did adding brand new files that vite was not aware of mes, literally, end up with the type-stripping thing that we were talking about.

[00:07:49]
[LAUGH] Adding a brand new file. I had to turn the server off and turn it back on. Okay. Today we learned. Cool, well, we also fixed some ID stuff because they would have all been checked at the same time. And it looked like I did magic that wasn't really accurate or true.

[00:08:07]
So that's good. Now I shouldn't have to restart the server. I think it was unaware to even read those files as it went along. Okay, cool, cool, cool, so, All right, now we have something that looks a little bit like a file tree. Okay, so we wanna say.

[00:08:38]
So I might have to change some of the structure here as well. But let's think about it for a moment. In fact, one would argue do I need that extra div or can I just do the UL in this case? These could all be. Yeah, that feels better.

[00:08:56]
Okay, so there are a bunch of things you can do as I think through this. So I want to say basically when this first checkbox is checked, all of the rest of them, right?
>> Steve Kinney: So these need to ask up to the parent. But again, just going for a checkbox is not going to get me all the way there, right?

[00:09:31]
Let's see, we'll make this. In fact, I don't even need that div probably either. Put it back if I need it. But just a less is more kind of thing. Okay, so if the parent is checked or actually the first thing I would try, let's see if it works, is to say this is up here and to say peer checked.

[00:10:15]
Let's do something simple like opacity 50. Now this is weird. So what we might then do is do pointer events. None.
>> Steve Kinney: So now you can't click these. Yeah, we might have to do something visual with the box at that point. Cause you can't like make like you can do like an icon or SVG or something like that, you know.

[00:10:52]
But like theoretically you can't like check the actual box. That's why a lot of times you'll see those other things, you get some programmatic control.
>> Speaker 1: But yeah, this looks like magic to me. Piercing is really cool. What if you have more than one of these on a page?

[00:11:12]
>> Steve Kinney: Yeah, I mean at that point what I would probably do is just kind of use a little bit of hierarchy, right? So if we did this, I'm gonna get yelled out for the IDs. Deal with that in a second. Right, and we'll give this one. At Least let's give at least the folders new IDs.

[00:11:38]
So then theoretically you could do that. Right. Just by using the divs to kind of section it off.
>> Speaker 1: Can you just explain more about what does pure mean when we use this tailwind class?
>> Steve Kinney: Yeah.
>> Speaker 1: What are we saying?
>> Steve Kinney: So effectively what's happening is this.

[00:12:03]
We're saying, hey, the squiggly, the tilde, is to say, I came after an element with this selector. So if you are one where previously there is a peer check and you are one after that, then this applies to you, right? It's hard to explain the squiggly and the star.

[00:12:27]
The star is the current one and we're saying if this matches where before me there was a peer that was checked. Squiggly line me, I am disabled, right? Or pointer events. I'm the illusion of disabled. There are some serious questions here that we'd have to think through about Aria tags and actually the semantic meeting.

[00:12:49]
Not totally sure you'd get away without JavaScript just simply for accessibility.
>> Speaker 1: Yeah.
>> Steve Kinney: Right, visually you can totally do it. But in CSS we really only have access to visually, right? And so it's just a little bit trickier when we think about accessibility and screen readers and stuff like that.

[00:13:06]
That point JavaScript probably does show up. But yeah.
>> Speaker 1: Thanks, this is great.
>> Steve Kinney: Yeah.
>> Speaker 1: Further than I thought we could get without JavaScript.
>> Steve Kinney: Yeah, it's like one of the things, like I said, you will be going on a walk a week from now and be like, I could just not write all those little use states or whatever to do this.

[00:13:29]
I can basically, especially if it is stuff about like that is visual in this case, so on and so forth. Cool. There is kind of another tangentially related one that I want to tackle that is a little tricky as well, which, which is the pattern. A lot of times you see this in messaging apps where what looks like an input field, but the submit button is inside the field where you can send the message inside something along those lines, which can also take advantage of a lot of this as well.