Transcript from the "Adding State Solution" Lesson
[00:00:00]
>> I'm gonna go ahead and add state for my buttons. So, the first thing I need to do is go back into my theme. So themes js. And I need to add a couple of different additional variables. So, I need to say what my disabled background color and my disabled text color are going to look like.
[00:00:15] So I'm gonna add disabled neutral [400]. And text on disabled is gonna be neutral [300]. Now, Bryan asked a really good question on the break. And he said, are you gonna be, just putting this all top level, or are you gonna be nesting some of them? That's a great question, these are gonna be top level.
[00:00:33] But you'll see once we get to status, that we're actually in a nest those inside of a status object. So, you can definitely break these up by textile, by font, by color, things like that. So feel free to do that. Okay, so I have two different values that I've just added for the disabled.
[00:00:52] And I'm gonna add these to my button component. So on focus. I'm going to add an outline of three pixels solid, default theme, primary color hover. Gosh. Those are confusing. And I'm also going to give this an offset. So, if you look at my design here, you'll notice that I have this space between my button and the outline.
[00:01:23] So, I want that offset. I want it by 3 pixels. Offset 3 pixels. 2 pixels, I'm sorry, 2 pixels. For active, mine just got a shade darker, I believe. So active, I'm gonna set background color. I'm gonna set this to defaultTheme.primaryActiveColor. Primary color, that's really gonna confuse me.
[00:01:51] Let me quickly go back to themes, primaryColorActive, primaryColorActive. In my notes, I said primaryHoverColor. I'm gonna change these so they match my note. So, primaryHoverColor. Otherwise we're gonna get mixed up. PrimaryActiveColor. I obviously have to change those. PrimaryHoverColor. PrimaryActiveColor, that should be good. If something breaks, we'll fix it, okay?
[00:02:21] So I'm setting my background color. I'm gonna set a border-color as well to primaryActiveColor. ActiveColor. And then I'm just going to set the color of the text. DefaultTheme.textColorOnPrimary. Now, if you notice my disabled states, I mentioned this before the break that minor different. So, in order to do that, I can't just set that on the base button component.
[00:02:56] I need to actually go in and style the individual buttons. So disabled On my primary, it's gonna be a background-color. So background-color. And we're gonna use my new disabled color I just added to my theme. DefaultTheme.textOnDisabled. And then, I am gonna set cursor to not-allowed. So, if I hover over this, it's gonna tell me no, you can't do that.
[00:03:25] I'm gonna copy this into my secondary button. So, on my secondary button, my color is not gonna be textOnDisabled because it's just sitting on this background here. So there's no background color. So this is just gonna be disabled. We're not gonna have a background color. So I'm gonna explicitly set that to none.
[00:03:44] And then we will leave the cursor not-allowed. Let me just throw this once more on our Tertiarybutton here. Again, no background color. The color is gonna be disabled and cursor not-allowed. And if I test this, let's go back to index.js. I'm just gonna highlight here. I'm gonna press, what is it, command?
[00:04:09] No, option click. If you press option and click, you can have multiple cursors. I'm gonna do that and I'm just gonna write disabled. So, when I come back here ideally, that should work as expected. The one thing I did forget is the border on the Secondarybutton needs a disabled color.
[00:04:34] So let me set that. So border-color do defaultTheme.disabled. So, now this is gray and it shouldn't be allowed. Our hovers are still being applied. So, what happened here is, in here I'm seeing background color of none. And actually, we just don't want any background on disabled. We don't want that to have any background on hover or focus, okay?
[00:05:05] That was the difference.