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.

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

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

Merged
merged 24 commits into from
Jan 15, 2023
Merged

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

merged 24 commits into from
Jan 15, 2023

Conversation

hbjORbj
Copy link
Member

@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 component: text field This is the name of the generic UI component, not the React module! package: joy-ui Specific to @mui/joy 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
@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
@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
Member 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

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
@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

@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.

@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
Member 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 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
Member Author

hbjORbj commented Jan 4, 2023

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

Done

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)

packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js Show resolved Hide resolved
packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js Outdated Show resolved Hide resolved
@hbjORbj
Copy link
Member Author

hbjORbj commented Jan 7, 2023 •
edited
Loading

@siriwatknp

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

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 component: text field This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation package: joy-ui Specific to @mui/joy
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