Refresh inputs

[simurai]

This updates the inputs (mostly .form-control).

👀 Preview

It's probably not the final version, but maybe ok to start testing on dotcom.

TODO

• Update docs
• Replace border color
• Increase border radius
• Increase padding (only on the sides, height doesn't change)
• And a few more tweaks

/cc @primer/ds-core

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/primer/primer-css/fc39qph72
✅ Preview: https://primer-css-git-next-inputs.primer.now.sh

[colebemis]

I'm not sure if this is the best place for me to leave this feedback but the x-axis padding seems like a little too much. IMO 8px or 12px on the left and right feels better to me than 16px (I know 12px isn't in our spacing scale 😬). I'm interested in hearing what other people think though 😺

[simurai]

IMO 8px or 12px on the left and right feels better to me than 16px (I know 12px isn't in our spacing scale 😬).

Yeah.. I guess the 16px in inputs is meant to match the buttons. Here all 3 variants:

8px	12px	16px

I like the extra padding (16px) on the buttons. But if button and inputs should match, and we ignore our spacing scale 🤷‍♂, 12px feels the most balanced?

Edit: Hey, our linter doesn't complain if we use ($spacer-1 + $spacer-2) -> (4px + 8px). ✌️ 😜

[auareyou]

I see what you mean @colebemis - Personally, I'd to formally add 4px, 12px and 20px as exceptions and document why we need those exceptions. But since we're not making spacing changes this time around I think the most sensitive would be going with 8px and see how it feels. If we have to revisit in a second iteration we can. I'll update the sticker sheet.

[auareyou]

Sorry, I missed the examples. I do agree 12px feels the most balanced. If we can combine spacers then let's do it!

[auareyou]

Let's switch to $spacer-1 + $spacer-2 for the forms padding 🙂

[emplums]

This looks good to me!

[simurai]

Ok, it's now changed to 12px padding on the sides.

It's just hardcoded. Maybe we shouldn't try to trick the linter with ($spacer-1 + $spacer-2) so that using variables stays predictable. One day we might can look into switching to em based padding, like this.

[auareyou]

🙌Yas!