[Filters] add wrapping behaviour when strings with no spacing overflow (

#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 <[email protected]>
Shopify · Aug 14, 2023 · 3ae94ce · 3ae94ce
1 parent 77539b1
commit 3ae94ce
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/.changeset/empty-walls-design.md b/.changeset/empty-walls-design.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed wrapping overflow of strings with no spacing within `Filters` popover
diff --git a/polaris-react/src/components/Filters/components/FilterPill/FilterPill.scss b/polaris-react/src/components/Filters/components/FilterPill/FilterPill.scss
@@ -157,6 +157,7 @@
 .PopoverWrapper {
   min-width: 185px;
   max-width: 300px;
+  word-break: break-word;
 }
 
 .ClearButtonWrapper {