[HOLD for payment 2023-02-03] [$1000] Update New Dot Text Inputs

[Luke9389]

Tracking Issue: #12251
Design Doc Section: https://docs.google.com/document/d/197fXHLlHM_RJA4-3MITwdu0N5e0HX5Q74sA4W80YMD8/edit#bookmark=id.9fht3irzbesn

Update Text Inputs

We’re removing the box around our form elements and doing just a single underline instead. The bottom border will be increased to 2px, and we will remove the border radius and horizontal padding from the input as well.

Update Dropdown Inputs

Same as above.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014d17d5f58b8a355f
• Upwork Job ID: 1600294214092935168

[melvin-bot]

Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.

[Luke9389]

@shawnborton, when you have a moment, could you provide a mockup for disabled dropdown pickers?

I'm 99% sure I know what they'll look like (should just be a 1:1 with the color swaps, right?), but it'll be nice to have a mockup so WebQA can compare.

[shawnborton]

I suppose we could do a color swap, as that would be the most 1:1 thing to do here. I think if I had to pick, I would just make the input have 50% opacity (with no color changes from non-disabled state) so it would look something like this?

[Luke9389]

That looks nice. I'm a tad concerned about accessibility (any time we use opacity we end up getting non-contrasting colors), but we could take another pass through the styles later? Idk, what do you think? Is that a concern for you?

[shawnborton]

Maybe we just do a 1:1 color replacement for now, and then we can revisit this one later? That would be more in the spirit of how we're approaching this anyways. So that being said, I think we get this:

Thoughts?

[Luke9389]

Yeah, I'm down to revisit this one.

I like the look of the prior (opacity 50) version better, but this one does seem more accessible. Maybe we could add an icon or something to make it more obviously 'locked'. Perhaps an actual lock icon right here? Not sure if that helps from an accessibility standpoint... idk

[shawnborton]

Yeah, those are all fair points but I would say let's table that as a separate project from just doing some color updates.

In terms of the lock icon though, I can't say I've seen something like that before. This is what material design does FWIW:

[Luke9389]

Interesting. Maybe we can get away with the opacity 50 approach then. Seems like that's their strategy as well.