Repository navigation
<Button> Width Style When Used In <Placeholder> #63206
Description
Description
In woocommerce/woocommerce#48911 we found that #59275 introduced a new width style for all <Button> components used in a <Placeholder> component. This change here is a breaking change and we had to add a style to override it.
I would argue that the .components-placeholder__fieldset > * selector is also a bit aggressive, however, setting the width to all buttons used in a <Placeholder> component seems excessive.
Step-by-step reproduction instructions
- Add a
<Button>component inside of a<Placeholder> - Notice the width it sets on it.
Screenshots, screen recording, code snippet
No response
Environment info
No response
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes
Activity
mirka commentedon Jul 8, 2024
I do agree this change was a bit aggressive and potentially breaking for existing third-party Placeholder consumers.
I understand the intent of this change was to responsively collapse elements when the container width is narrow. I can suggest, for example, adding something like a
Placeholder.ResponsiveContainersubcomponent so consumers who want this behavior for some parts of their Placeholder UI can opt into it:@jasmussen Would something like that be an acceptable solution for the original intent?
jasmussen commentedon Jul 8, 2024
That's correct, and suggestion sounds good at a glance.
ObliviousHarmony commentedon Jul 8, 2024
That seems like a really good way to support more aggressive responsiveness while still giving consumers plenty of control. We're using the
useResizeObserver()hook to render an entirely different component at smaller breakpoints to handle responsiveness and so ideally the placeholder component isn't providing any responsiveness for us.