You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This PR removes the reisze: false from the color popover and enforces a minimum height on the content, ensuring the popover renders properly in all scenarios.
Why?
#73817 added the resize: false ( and flip: true) to the color popover settings to prevent content from being squashed when the popover is triggered near the bottom of the page:
Adding the reisze: false works well when the popover content is short, but if the content height exceeds the page height, the overflow content is inaccessible.
5c64bc8c83f61868e58bb641d46fe72a.mp4
For color popovers, resize:true is not ideal because many palettes may be added by the consumer.
How?
Instead of resize: false, add a min-height as an inline style. This will allow the popover to flip when triggered at the width of the page.
The flip is true by default, so it's not needed.
I can't think of any other good approach right now 🤔
Testing Instructions
Access Appearance > Editor
Global Styles > Colors > Edit palette
Add dozens of custom colors.
You can leave the colors as default.
Insert a Group block.
Open the Styles tab form the block sidebar.
Trigger the color popover while changing the scroll position of the sidebar.
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.
If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
What?
This PR removes the
reisze: falsefrom the color popover and enforces a minimum height on the content, ensuring the popover renders properly in all scenarios.Why?
#73817 added the
resize: false( andflip: true) to the color popover settings to prevent content from being squashed when the popover is triggered near the bottom of the page:Adding the
reisze: falseworks well when the popover content is short, but if the content height exceeds the page height, the overflow content is inaccessible.5c64bc8c83f61868e58bb641d46fe72a.mp4
For color popovers,
resize:trueis not ideal because many palettes may be added by the consumer.How?
resize: false, add a min-height as an inline style. This will allow the popover to flip when triggered at the width of the page.flipistrueby default, so it's not needed.I can't think of any other good approach right now 🤔
Testing Instructions
Screenshots or screencast
58302dfcc9485354d3cd0a0a197cb6d4.mp4