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-ui][Autocomplete] Fix text overflow in Chip #40229

Merged
merged 5 commits into from
Mar 2, 2024
Merged

[joy-ui][Autocomplete] Fix text overflow in Chip #40229

merged 5 commits into from
Mar 2, 2024

Conversation

PunitSoniME
Copy link
Contributor

resolves #40183

@mui-bot
Copy link

mui-bot commented Dec 18, 2023 •
edited
Loading

Netlify deploy preview

https://deploy-preview-40229--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 770d49f

@PunitSoniME PunitSoniME marked this pull request as ready for review December 18, 2023 10:49
@danilo-leal danilo-leal changed the title [Autocomplete] chip text overflow in autocomplete [joy-ui][Autocomplete] Fix Chip text overflow Dec 18, 2023
@danilo-leal danilo-leal added component: chip This is the name of the generic UI component, not the React module! component: autocomplete This is the name of the generic UI component, not the React module! design This is about UI or UX design, please involve a designer package: joy-ui Specific to @mui/joy labels Dec 18, 2023
@zannager zannager requested a review from siriwatknp December 18, 2023 12:13
@danilo-leal danilo-leal changed the title [joy-ui][Autocomplete] Fix Chip text overflow [joy-ui][Chip] Fix text overflow Dec 28, 2023
@danilo-leal danilo-leal removed the component: autocomplete This is the name of the generic UI component, not the React module! label Dec 28, 2023
@siriwatknp
Copy link
Member

Could you provide a snapshot or sandbox that fixes the issue?

@PunitSoniME
Copy link
Contributor Author

PunitSoniME commented Jan 2, 2024 •
edited
Loading

Could you provide a snapshot or sandbox that fixes the issue?

Sure @siriwatknp

Check here - https://deploy-preview-40229--material-ui.netlify.app/material-ui/react-autocomplete/#fixed-options

Modify first option to lengthy value like below

The Shawshank Redemption The Shawshank Redemption The Shawshank Redemption The Shawshank Redemption The Shawshank Redemption The Shawshank Redemption The Shawshank Redemption The Shawshank Redemption The Shawshank Redemption The Shawshank Redemption The Shawshank Redemption

Now select the modified item, it will look like below

image

siriwatknp
siriwatknp previously requested changes Jan 4, 2024
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.

I think the proper solution is to add min-width: 0 to the ChipRoot.

Screen.Recording.2567-01-04.at.16.16.59.mov

PunitSoniME
PunitSoniME commented Jan 4, 2024
View reviewed changes
Copy link
Contributor Author

@PunitSoniME PunitSoniME left a comment

Choose a reason for hiding this comment

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

Changes implemented

PunitSoniME
PunitSoniME commented Jan 4, 2024
View reviewed changes
Copy link
Contributor Author

@PunitSoniME PunitSoniME left a comment

Choose a reason for hiding this comment

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

Done

@PunitSoniME PunitSoniME requested a review from siriwatknp January 4, 2024 09:56
ZeeshanTamboli
ZeeshanTamboli reviewed Jan 13, 2024
View reviewed changes
Copy link
Member

@ZeeshanTamboli ZeeshanTamboli left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Argos CI detected one unexpected change - https://app.argos-ci.com/mui/material-ui/builds/22470/69426774. So should this change be applied only to the Chip rendered for Autocomplete - https://github.com/mui/material-ui/blob/master/packages/mui-joy/src/Autocomplete/Autocomplete.tsx#L413 and on the demos having custom chips with renderTags prop?

@siriwatknp
Copy link
Member

Argos CI detected one unexpected change - https://app.argos-ci.com/mui/material-ui/builds/22470/69426774. So should this change be applied only to the Chip rendered for Autocomplete - https://github.com/mui/material-ui/blob/master/packages/mui-joy/src/Autocomplete/Autocomplete.tsx#L413 and on the demos having custom chips with renderTags prop?

That makes sense, thanks @ZeeshanTamboli. Can you update the PR?

@ZeeshanTamboli ZeeshanTamboli added component: autocomplete This is the name of the generic UI component, not the React module! and removed component: chip This is the name of the generic UI component, not the React module! labels Mar 2, 2024
@ZeeshanTamboli ZeeshanTamboli changed the title [joy-ui][Chip] Fix text overflow [joy-ui][Autocomplete] Fix text overflow in Chip Mar 2, 2024
ZeeshanTamboli
ZeeshanTamboli approved these changes Mar 2, 2024
View reviewed changes
Copy link
Member

@ZeeshanTamboli ZeeshanTamboli left a comment

Choose a reason for hiding this comment

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

I made the expected changes. @PunitSoniME Thanks for opening the PR.

@ZeeshanTamboli ZeeshanTamboli merged commit 8637c07 into mui:master Mar 2, 2024
22 checks passed
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Mar 8, 2024
@PunitSoniME @ZeeshanTamboli @mnajdova
[joy-ui][Autocomplete] Fix text overflow in Chip (mui#40229)
168575d 
Co-authored-by: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ZeeshanTamboli ZeeshanTamboli ZeeshanTamboli approved these changes

@siriwatknp siriwatknp Awaiting requested review from siriwatknp

Assignees
No one assigned
Labels
component: autocomplete This is the name of the generic UI component, not the React module! design This is about UI or UX design, please involve a designer package: joy-ui Specific to @mui/joy
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[joy-ui][Autocomplete] Chip overflows
5 participants
@PunitSoniME @mui-bot @siriwatknp @ZeeshanTamboli @danilo-leal