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

Shopify#10012) Fixes Shopify#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]>
AnnaCheba · Aug 14, 2023 · 60b08ed · 60b08ed
1 parent 557010e
commit 60b08ed
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 {