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

Component refresh 7 #1077

Merged
merged 4 commits into from May 8, 2020
Merged

Component refresh 7 #1077

merged 4 commits into from May 8, 2020

Conversation

simurai
Copy link
Contributor

@simurai simurai commented May 5, 2020

A few more "Component refresh" tweaks.

States

.State--green now uses the default $bg-green color. 👀 Preview

image

This should make it match other components like that timeline check:

image

Pagination

The "Previous" and "Next" buttons now have the chevron icons "backed in" with CSS-only. It uses clip-path: polygon() to draw the shape. 👀 Preview

Screen Shot 2020-05-05 at 4 52 57 PM

The clip-path: polygon() is generated by converting the Octicon with this tool. It can't draw curves, so the shape is not as rounded as when using the icon as SVG, but maybe still close enough?

Screen Shot 2020-05-05 at 4 12 25 PM

The benefit is no changes are needed to dotcom. But after the refresh we can refactor it and switch to the real Octicons.

Flash alerts

In #1071 the flash alerts have a padding of 24px. That looked great stand-alone, but didn't align with a component like .Box:

Screen Shot 2020-04-28 at 12 20 32 PM

So this PR changes the side padding back to 16px:

Screen Shot 2020-05-05 at 11 00 48 AM

👀 Preview

@simurai simurai requested a review from auareyou May 5, 2020 02:02
@simurai simurai added this to 🚧 Work in Progress in 📦 Primer CSS release tracking via automation May 5, 2020
@vercel
Copy link

vercel bot commented May 5, 2020

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

🔍 Inspect: https://vercel.com/primer/primer-css/q8bfva7ps
✅ Preview: https://primer-css-git-next-7.primer.now.sh

@vercel vercel bot temporarily deployed to Preview May 5, 2020 05:15 Inactive
@vercel vercel bot temporarily deployed to Preview May 5, 2020 07:45 Inactive
@vercel vercel bot temporarily deployed to Preview May 6, 2020 02:09 Inactive
@simurai simurai marked this pull request as ready for review May 6, 2020 02:14
@simurai simurai moved this from 🚧 Work in Progress to 🔍 Ready to release in 📦 Primer CSS release tracking May 6, 2020
📦 Primer CSS release tracking automation moved this from 🔍 Ready to release to ✅ Approved for release May 6, 2020
Copy link
Contributor

@auareyou auareyou left a comment

Choose a reason for hiding this comment

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

Thank for adding the preview! Looks 👍

@simurai simurai merged commit 4467910 into next May 8, 2020
📦 Primer CSS release tracking automation moved this from ✅ Approved for release to 💜 Done May 8, 2020
@simurai simurai deleted the next-7 branch May 8, 2020 07:40
@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