-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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
Fix empty color indicator with a custom style #44364
Conversation
Size Change: +8 B (0%) Total Size: 1.26 MB
ℹ️ View Unchanged
|
Oh this is good! This has been bugging me for so long. Very nice! |
@@ -23,7 +23,7 @@ function UnforwardedColorIndicator( | |||
|
|||
return ( | |||
<span | |||
className={ classnames( 'component-color-indicator', className ) } | |||
className={ classnames( 'component-color-indicator', className, !colorValue ? 'is-empty' : undefined ) } |
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.
Do we actually need a classname here? I have an idea.
@@ -45,10 +45,23 @@ | |||
margin: $grid-unit-20; | |||
|
|||
.component-color-indicator { | |||
// Show a diagonal line (crossed out) for empty swatches. | |||
background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%); |
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.
What if you did this:
background: $white linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%)
?
Then perhaps you wouldn't need a pseudo element 🤔
Really nice. I left some comments about another path we could take, not sure if it'll work, but it might be simpler if it does. |
It totally works, I don't know why I missed the simple solution 🤦♂️ I'll update the code. Thanks, Joen. |
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 is a small detail, but such an important one. Thank you!
This PR tries to fix the empty color indicator style so it looks OK on top of other color indicators:
Testing instructions