-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Components: Logistics for transitioning to new sizes #46741
Labels
has dev note
when dev note is done (for upcoming WordPress release)
[Package] Components
/packages/components
[Type] Discussion
For issues that are high-level and not yet ready to implement.
Comments
mirka
added
[Package] Components
/packages/components
[Type] Discussion
For issues that are high-level and not yet ready to implement.
labels
Dec 22, 2022
Nice to see a focus on this, thank you! Just to clarify one piece, "small" was a term to describe the smaller size, but it doesn't necessarily need to be the prop name. Something like "compact" could also work. I've no opinion there, to be honest, and will trust you on choosing what works well there. And CC @mtias for awareness. |
This was referenced Dec 22, 2022
ciampo
added
the
has dev note
when dev note is done (for upcoming WordPress release)
label
Oct 12, 2023
This was referenced Dec 6, 2023
This was referenced Dec 11, 2023
Merged
28 tasks
This was referenced Aug 12, 2024
18 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Labels
has dev note
when dev note is done (for upcoming WordPress release)
[Package] Components
/packages/components
[Type] Discussion
For issues that are high-level and not yet ready to implement.
Now that we have a good direction for the new sizing scheme (#46734), we need to start thinking about the logistics to make that happen.
New transitional props
__next40pxDefaultSize
size="default"
.deprecated()
for any usages that don't have the__next40pxDefaultSize
prop enabled.@deprecated
and suppressed (with@ignore
) from the docs.What happens to the props we have now?
__next36pxDefaultSize
__next40pxDefaultSize
API is removed. Once the API is removed, keep it in the TypeScript prop type definitions indefinitely, but mark as@deprecated
and suppressed (with@ignore
) from the docs.I think we can get away with this automatic 4px upsizing because the 4px difference is pretty minor. And judging from publicly available GitHub repos, adoption of the
__next36pxDefaultSize
prop is still low.size="small"
deprecated()
notice with no explicit deprecation version. (This is more of a recommendation for UI consistency, not code removal.)size="__unstable-large"
<Component __next40pxDefaultSize />
(instead of<Component size="__unstable-large" />
).__next40pxDefaultSize
API is removed, so devs can clean up the now unnecessary size prop.__next40pxDefaultSize
API is removed. (Removing the__unstable-large
API will not be disruptive because it will just fallback to the default size which will be 40px at that point.)Remaining tasks
__next40pxDefaultSize
prop Components: Add eslint rules to prevent usage without__next40pxDefaultSize
prop #63871$button-size
SCSS variable andCONFIG.controlHeight
CSS-in-JS variablecc @ciampo
✍️ Dev note
UI components across the editor (input fields, buttons, etc) are currently rendering in a range of heights between 30px and 40px. In order to add consistency and visual polish to the editor's UI, we started working on standardizing components toward having a default height of 40px.
To ensure a smooth transition to the new default sizes, we have started to introduce a new, temporary
__next40pxDefaultSize
prop on selected components around the codebase, which will allow consumers to start opting into the new default size. Sometime after that, the temporary prop will be deprecated and ultimately removed, causing all instances of the components to switch to the default 40px size out of the box.To start opting into the new 40px default height, set the
__next40pxDefaultSize
prop totrue
The text was updated successfully, but these errors were encountered: