From 68825231fc5b26e3ee8719c5529ca1c7ce211e57 Mon Sep 17 00:00:00 2001
From: Patrick Racicot <patrick.racicot@shopify.com>
Date: Thu, 19 Aug 2021 10:53:31 -0400
Subject: [PATCH] [Option] ensure word-break

---
 UNRELEASED.md                                           | 1 +
 src/components/OptionList/components/Option/Option.scss | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index fe7d5c52392..8497aa77118 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -31,6 +31,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Adjust `IndexTable` sticky z-index to avoid collisions with focused `TextField` ([#4150](https://github.com/Shopify/polaris-react/pull/4150))
 - Adjust `IndexTable` rows to have a grey hover state when unselected ([#4359](https://github.com/Shopify/polaris-react/pull/4359))
 - Properly support `selected` prop for `Navigation.Item` when `url` prop is not specified ([#4375](https://github.com/Shopify/polaris-react/pull/4375))
+- Fixed a bug in `Option` where the label would cause scrollbars to appear instead of wrapping ([#4411](https://github.com/Shopify/polaris-react/pull/4411))
 
 ### Documentation
 
diff --git a/src/components/OptionList/components/Option/Option.scss b/src/components/OptionList/components/Option/Option.scss
index 0298a61e844..159abb6cb7e 100644
--- a/src/components/OptionList/components/Option/Option.scss
+++ b/src/components/OptionList/components/Option/Option.scss
@@ -1,4 +1,5 @@
 @import '../../../../styles/common';
+@import '../../../../styles/shared/typography';
 
 $min-height: control-height();
 $control-vertical-adjustment: rem(2px);
@@ -48,6 +49,7 @@ $control-vertical-adjustment: rem(2px);
   cursor: pointer;
   border-radius: var(--p-border-radius-base);
   padding: spacing(tight);
+  @include text-breakword;
 
   &:hover:not(.disabled) {
     background: var(--p-surface-hovered);