[codemod] Add a codemod for the Box sx prop #23465
Conversation
| <Box border="1px dashed grey" p={[2, 3, 4]}> | ||
| <Box component="span" clone p={{ xs: 2, sm: 3, md: 4 }} m={2} border="1px dashed grey"> | ||
| <Button component="span">Save</Button> | ||
| </Box> |
There was a problem hiding this comment.
As we are going to merge #23454 soon and add deprecation in v4, should we add two more scenarios:
- <Box border="1px dashed grey" p={[2, 3, 4]} css={{ m: 1 }}>
+ <Box sx={{ border: "1px dashed grey", p: [2, 3, 4], m: 1 }}>
- <Box border="1px dashed grey" p={[2, 3, 4]} sx={{ m: 1 }}>
+ <Box sx={{ border: "1px dashed grey", p: [2, 3, 4], m: 1 }}>There was a problem hiding this comment.
For the first scenario, I didn't want to add that until #23454 is merged. For the second, the sx prop doesn't exist in v4.
There was a problem hiding this comment.
Alright, let’s do that after we have the breaking change and deprecation PRs in.
There was a problem hiding this comment.
So, #23454 is merged. I'd like to address it as a follow-up PR though. This one was hard enough! 😅
There was a problem hiding this comment.
Sure, I will work tomorrow on deprecation for v4 and we can update it after that one is merged too :)
333db1c to
e3c1e13
Compare
|
Should we run the codemod on the |
|
When running |
|
I see, thanks. |
Not quite backward, since it supports both APIs in parallel. I guess we need to decide which API to use in the examples. |
box-sx-propUpdates the Box API from separate system props to
sx.The diff should look like this: