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

Add more Octicon support #1694

Merged
merged 5 commits into from
Oct 25, 2021
Merged

Add more Octicon support #1694

merged 5 commits into from
Oct 25, 2021

Conversation

simurai
Copy link
Contributor

@simurai simurai commented Oct 22, 2021

This moves some dotcom hacks to Primer CSS. See inline comments for more details. Docs are also updated so it's easier to see when regressions happen.

@changeset-bot
Copy link

changeset-bot bot commented Oct 22, 2021

🦋 Changeset detected

Latest commit: 3984e97

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/css Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Comment on lines +50 to +52
.octicon {
color: inherit !important;
}
Copy link
Contributor Author

@simurai simurai Oct 22, 2021

Choose a reason for hiding this comment

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

This allows adding colored Octicon icons to a .suggester. The !important is needed when utilities like color-fg-danger are used.

Before After
Screen Shot 2021-10-22 at 13 17 39 Screen Shot 2021-10-22 at 13 21 35

Comment on lines +37 to +40
.octicon {
margin-left: $spacer-1;
color: var(--color-fg-subtle);
}
Copy link
Contributor Author

@simurai simurai Oct 22, 2021

Choose a reason for hiding this comment

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

This adds Octicon support for .radio-group. As well as making options disabled.

Screen Shot 2021-10-22 at 14 31 29

Comment on lines +61 to +68
&.btn .octicon {
margin-right: $spacer-1;
color: var(--color-fg-muted);
}

&.btn-primary .octicon {
color: inherit;
}
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 adds support for Octicon icons in .btn in .flash alerts. Without this override the icon picks up the color for icons outside of .btn.

Before After
Screen Shot 2021-10-22 at 16 30 20 Screen Shot 2021-10-22 at 16 30 31

@simurai simurai marked this pull request as ready for review October 22, 2021 08:18
@simurai simurai requested a review from a team as a code owner October 22, 2021 08:18
@simurai simurai changed the title Add more octicon support Add more Octicon support Oct 22, 2021
Copy link
Contributor

@tobiasahlin tobiasahlin left a comment

Choose a reason for hiding this comment

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

😍

Copy link
Member

@jonrohan jonrohan left a comment

Choose a reason for hiding this comment

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

Looks great!

@simurai simurai enabled auto-merge (squash) October 25, 2021 00:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants