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: Custom color picker popover position #36965
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -25,3 +25,10 @@ | |
padding: 0; | ||
} | ||
} | ||
|
||
@include break-medium() { | ||
.components-dropdown__content.components-color-palette__custom-color-dropdown-content.is-rendered-in-sidebar.is-from-top .components-popover__content { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is really coupled with internal class names of other components. Do you think we could avoid them or extract them somehow? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Here we are changing the position of a popover, I'm not sure how we can avoid relying on the classes the component defines. And unfortunately, this is not the first time we do it, searching for ".components-popover__content" on the codebase we find lots of matches used on each place we change something related to the popover, in some cases even outside the components package while on this case we are inside the components package. |
||
margin-right: #{ math.div($sidebar-width, 2) + $grid-unit-20 }; | ||
margin-top: #{ -($grid-unit-60 + $grid-unit-15) }; | ||
} | ||
} |
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.
Could we just pass down a css class instead of introducing a new API?
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.
We would need add a property like customColorContentClassName, to ColorPalette, and ColorGradientPanels etc. A block wanting to have the color picker appear in the correct position would need to explicitly know the class to add.
It seems preferable to have a flag that changes the positioning behavior. The fact we use a class to do that is an implementation detail, e.g: on mobile, the way to do it may be different.