Components Solution

[00:00:00]
>> One of the things that someone mentioned in the chat which is and we should just address right now before I forget which is so we have these overrides what happens if you're like I did a bad thing? And it's too late to hit the Undo button and I would like to reset these overrides and start fresh.

[00:00:16]
You can right click. And you said reset all overrides and it will go back in both cases to the original set of components. So there is a takes the back sees for overriding pieces of a component. One thing that just want to put in your brain is this is an instance component of this main component, that's part of the terminology.

[00:00:38]
But weirdly, I can also make a component out of a component, right? Cuz who doesn't like inheritance chains? [LAUGH] Yeah, we'll use that. But first, let's go make an input field. Again, this is pretty simple. We might have done it before as well. But we can go ahead and we'll start with just some text.

[00:01:04]
And we'll say like, input value. Let me zoom in on that a little bit. And I will go grab that and I'm gonna change that to, it feels right. They will go out this making an auto layout. It's got some pretty aggressive margins. So we'll change that a little bit.

[00:01:35]
And we'll say 10s of 1000s zoomed in a lot. Let's go ahead and say now unlike a button which might be in the middle, we'll say this should mostly be at the edge. Say 8 all around. We can adjust it if we don't like it later. And then we will go ahead and say, this one actually has a fixed width.

[00:01:57]
So we can drag it into any kind of layout grid and have it stretch across columns. And we can control the button. We're like, just be the size of the button. And you could make a like full width button that like, was a variation on the theme where this one gives you the ability to like stretch it out versus the other ones that hug the text.

[00:02:13]
You can do all that but our input fields generally speaking don't shrink to the size of the text in them and grow as you type in them. I'm sure you could do that. Please don't do that. So go ahead and give this one a stroke and fill. Okay, doke, so let's say fill this light color.

[00:02:39]
Love me a good border radius. In this case, okay, that looks mostly might make that 16 though. Nope. And the trick that we haven't talked about yet is that we've all seen UIs before, right? One does not just make a button and an input field and call it a day.

[00:03:12]
And one of the things I did kind of like putting this all together I tried to do like every conceivable variation of a button and input field and it was horrifying. Cuz like labels, error messages, required, focus disabled. You can you can get like there are a lot of variations here, so we're gonna need other than just making like one offs and hoping they all stay the same.

[00:03:34]
We're gonna need some kinda like strategy for managing a growing desire and system, right? But this is a fair start. We'll also give it that same shadow that I've given basically everything. And so we've got the beginnings here, right? Like a display or a empty one might have some placeholder text, right?

[00:03:59]
There can be a lot of different variations. We'll learn how to do that in a second but first let's just start with input field and go ahead Command+Option+K, and it got added as a component as well. This one is just under components because it's not in a frame.

[00:04:22]
If however I renamed it. You can see that automatically jumped into its own little category down here, which is just my input fields. This is going to be super useful later to have some kind of hierarchy not just a long running list of every conceivable component. Because we'll be able to swap between and swapping between components in the same folder is a lot easier than having to kind of navigate up and down a hierarchy as well.

[00:04:53]
Cool. One of the questions is there a way to clip the text of the width of the input is fixed and smaller than the text so does not get out the input. So like if it gets too long, a lot of times you're gonna have to adjust like you have that clip content so like, of the frame itself, right?

[00:05:11]
So here we can go I think this will answer the question we'll hit clip content. It's always gonna look some kind of gross you can get really clever by like Having a gradient and stuff like that. So it like looks a little bit better, But at least in this case, it won't like expand outside.

[00:05:31]
Versus if I uncheck this box, that's weight grocer. So this is a little bit better. Like if I was gonna get real fancy, I might have a very subtle like gradient shape over here. So it looks like it kind of fades out or something along those lines and you could have that clipped as well.

[00:05:50]
It's probably not actually that hard to do but yeah.
>> What do you do to keep it from growing vertically cuz-
>> Yeah.
>> I did but I messed mine up somehow.
>> Right on. So, in here you can have hug contents. If I have that as fixed height, then I can do all sorts of terrible things.

[00:06:07]
>> Okay, now that was on like the outer frame?
>> Yeah, the easiest way to do this is to click the title and that'll be the outer frame at this point. So I can change that to hug contents and it will shrink down. And if I change that to like, on the width as well It will, like with a button, grow and shrink in the width, which is not what I want for an input field definitely what I want for a button or maybe what I want for a button.

[00:06:32]
The kind of one question that might come up is like, what about a min width to my knowledge, that's not a thing. So at that point, you just go with a fixed and kind of, if it's fixed you can adjust it like once you've thrown an instance on the page you kind of left on a given component by component basis.

[00:06:51]
So you start out with a base set you can like make it smaller you make it bigger with affixed with you are in charge of the size. So main width is it kinda up to you, right? All right, cool just making sure that we don't get any more note.

[00:07:05]
We are still hugging. So let's change that to a fixed width. And there we go, cool. All right.