Skip to content
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: Remove style props #2326

Open
wants to merge 6 commits into
base: develop
Choose a base branch
from
Open

components: Remove style props #2326

wants to merge 6 commits into from

Conversation

lachlanjc
Copy link
Member

@lachlanjc lachlanjc commented Sep 22, 2022

We'd mentioned this in #2275 & #832 as part of simplifying our API, as it can lead to confusing CSS ordering & overrides: if I have the same property in a style prop & sx, which wins out? It's especially unclear from a component that's wrapping a Theme UI component. This is a big, breaking change, so it should definitely not be in our MDX release, in case folks don't want to upgrade immediately. Providing a codemod would be great too; I haven't worked on that yet.

Release notes

  • BREAKING: Theme UI Components no longer accept style props (e.g. <Box bg="primary" mt={3}), in favor of only supporting styling through the sx prop.
    • The Field component now accepts a second containerSx prop, intended to replace whitespace style props (e.g. to convert <Field my={3} sx={{ … }} to <Field containerSx={{ my: 3 }} sx={{ … }}). Checkbox, Select, and Switch have this new prop as well.

@vercel
Copy link

vercel bot commented Sep 22, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
theme-ui ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 28, 2023 3:50pm

@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 22, 2022

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 37becf7:

Sandbox Source
next-theme-ui-example Configuration
gatsby-plugin-theme-ui-example Configuration

@lachlanjc
Copy link
Member Author

@hasparus thoughts on this?

@devatrox
Copy link

Looks good to me. I very much appreciate the containerSx prop!

@hasparus
Copy link
Member

@lachlanjc I can write a simple codemod if you think it's good to merge.

@lachlanjc
Copy link
Member Author

That'd be amazing! Definitely my main hesitation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
minor Increment the minor version when merged
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Components/Select] Expose access to container props
3 participants