-
Notifications
You must be signed in to change notification settings - Fork 1.2k
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
Add more Octicon support #1694
Conversation
🦋 Changeset detectedLatest commit: 3984e97 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
.octicon { | ||
color: inherit !important; | ||
} |
There was a problem hiding this comment.
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 |
---|---|
+ disabled state
.octicon { | ||
margin-left: $spacer-1; | ||
color: var(--color-fg-subtle); | ||
} |
There was a problem hiding this comment.
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.
&.btn .octicon { | ||
margin-right: $spacer-1; | ||
color: var(--color-fg-muted); | ||
} | ||
|
||
&.btn-primary .octicon { | ||
color: inherit; | ||
} |
There was a problem hiding this comment.
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 |
---|---|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
😍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great!
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.