Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New button style #1027

Merged
merged 4 commits into from Feb 19, 2020
Merged

New button style #1027

merged 4 commits into from Feb 19, 2020

Conversation

simurai
Copy link
Contributor

@simurai simurai commented Feb 14, 2020

This updates the buttons.

Screen Shot 2020-02-18 at 6 01 25 PM

👀 Preview

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

TODO

  • Replace colors
  • Increase border radius
  • Increase padding (only on the sides, height doesn't change)
  • Move "components" variables out of colors.scss

TODO in a next phase

  • Deprecate the .btn-blue button. It's rare, but still gets used.
  • Maybe deprecate .social-count? Instead we could use a BtnGroup.
  • Probably a few fixes and maybe some refactoring.

@simurai simurai added this to 🚧 Work in Progress in 📦 Primer CSS release tracking via automation Feb 14, 2020
@vercel
Copy link

vercel bot commented Feb 14, 2020

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/m32a59cdq
✅ Preview: https://primer-css-git-buttons.primer.now.sh

@vercel vercel bot temporarily deployed to Preview February 18, 2020 07:59 Inactive
@simurai simurai marked this pull request as ready for review February 18, 2020 09:09
@simurai simurai moved this from 🚧 Work in Progress to 🔍 Ready to release in 📦 Primer CSS release tracking Feb 18, 2020
$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3) !default; // TODO: Deprecate? Replaced by $focus-shadow
$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15 !default; // TODO: Deprecate? It's now unused.

$focus-shadow: 0 0 0 3px rgba($blue, 0.4) !default;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a new variable without the btn in the name that we might can use with inputs and other components.

@colebemis
Copy link
Contributor

These look great 😍One thing: I noticed that the focus style for danger and outline buttons is hidden on hover:
Kapture 2020-02-18 at 7 11 06

@simurai simurai requested a review from emplums February 19, 2020 00:36
@vercel vercel bot temporarily deployed to Preview February 19, 2020 00:40 Inactive
@simurai
Copy link
Contributor Author

simurai commented Feb 19, 2020

I noticed that the focus style for danger and outline buttons is hidden on hover:

🙇 Thanks.. fixed:

buttons

I think on dotcom we have a script that removes :focus when clicking with the mouse. But still good to fix in case you switch from keyboard to mouse. 👍

@simurai
Copy link
Contributor Author

simurai commented Feb 19, 2020

Ok, I'm gonna go ahead and merge it into #1025 and start testing it on dotcom. Pretty sure we'll need to come back and make additional fixes/changes.

@simurai simurai merged commit 03cd280 into next Feb 19, 2020
📦 Primer CSS release tracking automation moved this from 🔍 Ready to release to 💜 Done Feb 19, 2020
@simurai simurai deleted the buttons branch February 19, 2020 00:49
@simurai simurai mentioned this pull request Jul 2, 2020
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

None yet

2 participants