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

[IndexFilters] fix horizontal scroll regarding strings without spaces #10011

Closed
melvinadu opened this issue Aug 10, 2023 · 0 comments · Fixed by #10012
Closed

[IndexFilters] fix horizontal scroll regarding strings without spaces #10011

melvinadu opened this issue Aug 10, 2023 · 0 comments · Fixed by #10012
Assignees
@melvinadu

Comments

@melvinadu
Copy link
Member

melvinadu commented Aug 10, 2023 •
edited
Loading

Issue summary

Whenever there is no spaces in a very long value in a popover, horizontal scroll is introduced and we want to remove it and allow strings without spaces to be treated the same as strings with proper spacing.

Also, we recently shipped filtering by metafield values for Summer Editions '23 and we know some existing merchants with single line text metafield values already use underscores instead of spaces. So not only are we future proofing the metafield filtering experience we plan to roll out to all index pages in the Shopify Admin, we are also fixing a current bug.

Steps to reproduce the problem

Enter a string with no spaces longer than the maxWidth set on the popovers within the IndexFilters component and horizontal scroll will be introduced.

Expected behavior

Screenshot 2023-08-10 at 4 04 05 PM

Actual behavior

Screenshot 2023-08-10 at 4 04 58 PM
@melvinadu melvinadu self-assigned this Aug 10, 2023
@melvinadu melvinadu mentioned this issue Aug 10, 2023
Merged
5 tasks
jesstelford added a commit that referenced this issue Aug 14, 2023
@melvinadu @jesstelford
[Filters] add wrapping behaviour when strings with no spacing overflow (
3ae94ce 
#10012)

Fixes #10011

This pull requests add the `word-break` css property at the same level
the popover wrapper's minimum and maximum width is set in order to allow
for string without spaces to wrap the same way strings with spaces do.

## Before
![Screenshot 2023-08-10 at 4 04 58
PM](https://github.com/Shopify/polaris/assets/27571390/8ac14d73-a957-4bd3-8827-bf4c04120124)

## After
![Screenshot 2023-08-10 at 4 04 05
PM](https://github.com/Shopify/polaris/assets/27571390/0fca6cd4-36c5-4725-960b-109dc0fcd705)

---------

Co-authored-by: Jess Telford <jess+github@jes.st>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@melvinadu melvinadu

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Filters] add wrapping behaviour when strings with no spacing overflow Shopify/polaris
1 participant
@melvinadu