Conversation
|
Size Change: -45 B (0%) Total Size: 1.27 MB
ℹ️ View Unchanged
|
t-hamano
left a comment
There was a problem hiding this comment.
Thanks for your great work!
✅ I have tried changing the global CSS switcher added in #42747 on Storybook, and I have confirmed the widths and heights are maintained correctly on each component.
✅ The issue reported in #41961 (box-sizing not applied to input elements in table block placeholders) has been fixed.
I think that the following box-sizing could also be removed in the BaseControl-based component.
I tried turning box-sizing on and off in the developer tools, but the layout was maintained correctly on the Storybook.
ciampo
left a comment
There was a problem hiding this comment.
Code changes LGTM 🚀
Components tested:
-
CheckboxControl -
ComboboxControl -
FocalPointPicker -
RadioControl -
RangeControl -
SearchControl -
SelectControl -
TextControl(fixes width bug) -
TextareaControl(fixes width bug) -
ToggleControl -
ToggleGroupControl(fixes height bug) -
ToolsPanel
Ah sorry, I totally forgot to mention these! 🤦 I left these two intentionally, because they apply to specific tag types (select, img, video) instead of div/span. It is possible that wp-components are used in a CSS environment where there are broadly scoped CSS files similar to |
Thank you for the detailed explanation. |
Part of #42415
Part of #41961
What?
box-sizingreset to BaseControl. This immediately fixes the box-sizing problems we were seeing in the following components:box-sizingdeclarations in components based on BaseControl.Why?
We can't guarantee that the surrounding context has a box-sizing reset in place.
Testing Instructions
npm run storybook:dev<BaseControlto see where it's used in the repo, especially in packages other than wp-components. Take a look at the code (or test in wp-env!) to see if there could be problems.✅ I have visually inspected all the BaseControl-based components compared with
trunkto check for regressions