Skip to content

[Joy] Remove TextField component and replace its usage in docs with FormControl/FormLabel/Input #35462

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.

Sign up for GitHub

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

Jump to bottom
Merged
hbjORbj merged 24 commits into from
Jan 15, 2023
Merged

[Joy] Remove TextField component and replace its usage in docs with FormControl/FormLabel/Input #35462

hbjORbj merged 24 commits into from
Jan 15, 2023

Conversation

@hbjORbj
Copy link
Contributor

@hbjORbj hbjORbj commented Dec 13, 2022 •
edited
Loading

Closes #34176

⚠️ This PR can be merged only after Input Documentation PR is merged.

Preview: https://deploy-preview-35462--material-ui.netlify.app/

@hbjORbj hbjORbj changed the title Draft: [Joy] Remove TextField component Draft: [Joy] Remove TextField component Dec 13, 2022
@hbjORbj hbjORbj self-assigned this Dec 13, 2022
@hbjORbj hbjORbj added breaking change Introduces changes that are not backward compatible. scope: text field Changes related to the text field. package: joy-ui Specific to Joy UI. labels Dec 13, 2022
@hbjORbj hbjORbj changed the title Draft: [Joy] Remove TextField component Draft: [Joy] Remove TextField component and replace its usage with FormControl/FormLabel/Input in docs Dec 13, 2022
@hbjORbj hbjORbj added the docs Improvements or additions to the documentation. label Dec 13, 2022
@hbjORbj hbjORbj force-pushed the joy/remove-textfield branch from 385a851 to 99b566f Compare December 13, 2022 22:14
@mui-bot
Copy link

mui-bot commented Dec 13, 2022 •
edited
Loading

Messages
📖 Netlify deploy preview: https://deploy-preview-35462--material-ui.netlify.app/

@mui/joy: parsed: -0.80% 😍, gzip: -0.70% 😍

Details of bundle changes

Generated by 🚫 dangerJS against 67cd5cf

@hbjORbj hbjORbj changed the title Draft: [Joy] Remove TextField component and replace its usage with FormControl/FormLabel/Input in docs Draft: [Joy] Remove TextField component and replace its usage in docs with FormControl/FormLabel/Input Dec 13, 2022
@hbjORbj hbjORbj mentioned this pull request Dec 13, 2022
Closed
hbjORbj
hbjORbj commented Dec 13, 2022
View reviewed changes
@siriwatknp
Copy link
Member

siriwatknp commented Dec 14, 2022 •
edited
Loading

@hbjORbj Thanks a lot for the PR. One thing that is missing is the doc for the Input at /joy-ui/react-input.

I think the page could have content similar to https://mui.com/joy-ui/react-textarea/.

@hbjORbj
Copy link
Contributor Author

hbjORbj commented Dec 14, 2022 •
edited
Loading

@hbjORbj Thanks a lot for the PR. One thing that is missing is the doc for the Input at /joy-ui/react-input. I think the page could have content similar to https://mui.com/joy-ui/react-textarea/.

Gottcha. I will create a separate PR for better reviewability. We can merge the Input documentation PR first and then merge this one.

@hbjORbj hbjORbj mentioned this pull request Dec 14, 2022
Merged
1 task
@siriwatknp
Copy link
Member

siriwatknp commented Dec 15, 2022

A note before I forgot it 😅. Please add the _redirects from /joy-ui/react-text-field/ to /joy-ui/react-input/.

@hbjORbj hbjORbj changed the title Draft: [Joy] Remove TextField component and replace its usage in docs with FormControl/FormLabel/Input [Joy] Remove TextField component and replace its usage in docs with FormControl/FormLabel/Input Dec 21, 2022
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Dec 23, 2022
@hbjORbj hbjORbj force-pushed the joy/remove-textfield branch from abbfb1f to 78bf4c9 Compare December 23, 2022 13:37
@github-actions github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged. and removed PR: out-of-date The pull request has merge conflicts and can't be merged. labels Dec 23, 2022
@siriwatknp
Copy link
Member

siriwatknp commented Jan 3, 2023

@hbjORbj Could you update the PR? I think I will try to add a codemod for transforming TextField to Input and then we can merge this PR.

@hbjORbj hbjORbj force-pushed the joy/remove-textfield branch from 78bf4c9 to 8061ef0 Compare January 3, 2023 15:02
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jan 3, 2023
@hbjORbj
Copy link
Contributor Author

hbjORbj commented Jan 3, 2023

@siriwatknp Could you update the PR? I think I will try to add a codemod for transforming TextField to Input and then we can merge this PR.

Done.

I can work on the codemod. Or did you start already?

@siriwatknp
Copy link
Member

siriwatknp commented Jan 3, 2023

@siriwatknp Could you update the PR? I think I will try to add a codemod for transforming TextField to Input and then we can merge this PR.

Done.

I can work on the codemod. Or did you start already?

I haven't. That'd be great if you could add it.

@hbjORbj
Copy link
Contributor Author

hbjORbj commented Jan 4, 2023

@siriwatknp I haven't. That'd be great if you could add it.

Done

@hbjORbj hbjORbj requested a review from siriwatknp January 5, 2023 01:44
siriwatknp
siriwatknp reviewed Jan 5, 2023
View reviewed changes
Copy link
Member

@siriwatknp siriwatknp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hbjORbj I think the codemod needs some more tests:

  • it should add FormControl and FormLabel if label prop presents and should pass props like size:

    // from
<TextField label="Label" placeholder="Placeholder" size="sm" />

// to
<FormControl size="sm">
  <FormLabel>Label</FormLabel>
  <Input placeholder="Placeholder" />
</FormControl>

  • it should add FormHelperText if helperText prop presents:

    // from
<TextField helperText="Help!" />

// to
<FormControl>
  <Input />
  <FormHelperText>Help!</FormHelperText>
</FormControl>

  • it should transform only @mui/joy (add a test that import TextField from @mui/material)

@hbjORbj
Copy link
Contributor Author

hbjORbj commented Jan 7, 2023 •
edited
Loading

@siriwatknp

I think I covered all cases. Happy to get the codemod reviewed at this point.

@hbjORbj hbjORbj requested a review from siriwatknp January 7, 2023 04:04
siriwatknp
siriwatknp approved these changes Jan 10, 2023
View reviewed changes
Copy link
Member

@siriwatknp siriwatknp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Great job! I added the codemod to README and decided to bring back the text-field.md with migration guide instead.

@siriwatknp siriwatknp added this to the Joy UI stable release milestone Jan 11, 2023
@hbjORbj hbjORbj merged commit 0198612 into mui:master Jan 15, 2023
@siriwatknp siriwatknp mentioned this pull request Jan 17, 2023
Merged
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@siriwatknp siriwatknp siriwatknp approved these changes

Assignees

@hbjORbj hbjORbj

Labels

breaking change Introduces changes that are not backward compatible. docs Improvements or additions to the documentation. package: joy-ui Specific to Joy UI. scope: text field Changes related to the text field.

Projects

None yet

Milestone

Joy UI: Stable release

Development

Successfully merging this pull request may close these issues.

[RFC][Joy UI] Remove TextField in favor of composition

3 participants

@hbjORbj @mui-bot @siriwatknp