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
Navigation Component: Increase color and padding specificity #28619
Conversation
Size Change: -1.01 kB (0%) Total Size: 1.38 MB
ℹ️ View Unchanged
|
cc @carolinan, I believe you had the same issue a few days ago |
a { | ||
width: 100%; | ||
color: ${ G2.lightGray.ui }; | ||
padding: ${ space( 0.75 ) } ${ space( 2 ) }; |
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.
Moving this here would leave simple text items (isText) without appropriate padding.
Good find, thank you. I added this padding back to the ItemUI
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.
Looking good! Thanks for the fix! ✨
Description
Navigation item colors weren't being applied to
a.components-button
but onlybutton.components-button
elements. This PR increases specificity such thatcomponents-button
class margin and color are overridden.Before
After
Testing Instructions
The scenario is replicated in Storybook for ease of testing by adding an external link for comparison.
npm run storybook:dev
Types of changes
This is a bug fix and a non-breaking change.
Checklist: