Skip to content

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

Merged
ZeeshanTamboli merged 5 commits intomui:masterfrom
PunitSoniME:fix/40183-chip-text-overflow-in-autocomplete
Mar 2, 2024
Merged

[joy-ui][Autocomplete] Fix text overflow in Chip#40229
ZeeshanTamboli merged 5 commits intomui:masterfrom
PunitSoniME:fix/40183-chip-text-overflow-in-autocomplete

Conversation

@PunitSoniME
Copy link
Copy Markdown
Contributor

@PunitSoniME PunitSoniME commented Dec 18, 2023

resolves #40183

@mui-bot
Copy link
Copy Markdown

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 scope: chip Changes related to the chip. scope: autocomplete Changes related to the autocomplete. This includes ComboBox. design This is about UI or UX design, please involve a designer. package: joy-ui Specific to Joy UI. 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 scope: autocomplete Changes related to the autocomplete. This includes ComboBox. label Dec 28, 2023
@siriwatknp
Copy link
Copy Markdown
Member

siriwatknp commented Jan 2, 2024

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

@PunitSoniME
Copy link
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
Member

siriwatknp commented Feb 26, 2024

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 scope: autocomplete Changes related to the autocomplete. This includes ComboBox. and removed scope: chip Changes related to the chip. 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
Copy Markdown
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
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

design This is about UI or UX design, please involve a designer. package: joy-ui Specific to Joy UI. scope: autocomplete Changes related to the autocomplete. This includes ComboBox.

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