[Autocomplete] fix long option label to wrap instead of scrollbar

UNRELEASED.md

@@ -20,6 +20,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - `PositionedOverlay` now exposes an imperative `forceReLayout()` API for programmatically triggering a re-render of the component ([#4385](https://github.com/Shopify/polaris-react/pull/4385))
 - `Popover` now exposes an imperative `forceUpdatePosition()` API for programmatically triggering a re-render of the underlying overlay component ([#4385](https://github.com/Shopify/polaris-react/pull/4385))
 - `PositionedOverlay` now exposes an imperative `forceUpdatePosition()` API for programmatically triggering a re-render of the component ([#4385](https://github.com/Shopify/polaris-react/pull/4385))
+- Added `wrapOverflow` prop to `AutocompleteProps` props to force text-breakword ([#4416](https://github.com/Shopify/polaris-react/pull/4416))
 
 ### Bug fixes
 
@@ -34,6 +35,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Properly support `selected` prop for `Navigation.Item` when `url` prop is not specified ([#4375](https://github.com/Shopify/polaris-react/pull/4375))
 - Fixed an accessibility bug in `Icon` where `aria-label` was used incorrectly ([#4414](https://github.com/Shopify/polaris-react/pull/4414))
 - 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))
+- Fixed a bug in `MappedOption` where the label will generate a scrollbar when the content is too long ([#4416](https://github.com/Shopify/polaris-react/pull/4416))
 
 ### Documentation
 

src/components/Autocomplete/Autocomplete.tsx

@@ -30,7 +30,10 @@ export interface AutocompleteProps {
   /** Allow more than one option to be selected */
   allowMultiple?: boolean;
   /** An action to render above the list of options */
-  actionBefore?: ActionListItemDescriptor;
+  actionBefore?: ActionListItemDescriptor & {
+    /** Specifies that if the label is too long it will wrap instead of being hidden  */
+    wrapOverflow?: boolean;
+  };
   /** Display loading state */
   loading?: boolean;
   /** Indicates if more results will load dynamically */

src/components/Autocomplete/README.md

@@ -700,6 +700,101 @@ function AutocompleteActionBeforeExample() {
 }
 ```
 
+### Autocomplete with wrapping action
+
+Use to indicate there are no search results.
+
+```jsx
+function AutocompleteActionBeforeExample() {
+  const deselectedOptions = [
+    {value: 'rustic', label: 'Rustic'},
+    {value: 'antique', label: 'Antique'},
+    {value: 'vinyl', label: 'Vinyl'},
+    {value: 'vintage', label: 'Vintage'},
+    {value: 'refurbished', label: 'Refurbished'},
+  ];
+  const [selectedOptions, setSelectedOptions] = useState([]);
+  const [inputValue, setInputValue] = useState('');
+  const [options, setOptions] = useState(deselectedOptions);
+  const [loading, setLoading] = useState(false);
+
+  const updateText = useCallback(
+    (value) => {
+      setInputValue(value);
+
+      if (!loading) {
+        setLoading(true);
+      }
+
+      setTimeout(() => {
+        if (value === '') {
+          setOptions(deselectedOptions);
+          setLoading(false);
+          return;
+        }
+        const filterRegex = new RegExp(value, 'i');
+        const resultOptions = options.filter((option) =>
+          option.label.match(filterRegex),
+        );
+        setOptions(resultOptions);
+        setLoading(false);
+      }, 300);
+    },
+    [deselectedOptions, loading, options],
+  );
+
+  const updateSelection = useCallback(
+    (selected) => {
+      const selectedText = selected.map((selectedItem) => {
+        const matchedOption = options.find((option) => {
+          return option.value.match(selectedItem);
+        });
+        return matchedOption && matchedOption.label;
+      });
+      setSelectedOptions(selected);
+      setInputValue(selectedText[0]);
+    },
+    [options],
+  );
+
+  const textField = (
+    <Autocomplete.TextField
+      onChange={updateText}
+      label="Tags"
+      value={inputValue}
+      prefix={<Icon source={SearchMinor} color="inkLighter" />}
+      placeholder="Search"
+    />
+  );
+
+  return (
+    <div style={{height: '225px'}}>
+      <Autocomplete
+        actionBefore={{
+          accessibilityLabel: 'Action label',
+          badge: {
+            status: 'new',
+            content: 'New!',
+          },
+          content:
+            'Action with long name that will need to wrap on small display in order to have a nice display',
+          ellipsis: true,
+          helpText: 'Help text',
+          icon: CirclePlusMinor,
+          wrapOverflow: true,
+        }}
+        options={options}
+        selected={selectedOptions}
+        onSelect={updateSelection}
+        listTitle="Suggested tags"
+        loading={loading}
+        textField={textField}
+      />
+    </div>
+  );
+}
+```
+
 ### Autocomplete with destructive action
 
 Use to indicate there are no search results.

src/components/Autocomplete/components/MappedAction/MappedAction.scss

@@ -109,4 +109,8 @@ $item-vertical-padding: ($item-min-height - line-height(body)) / 2;
 .Text {
   @include layout-flex-fix;
   flex: 1 1 auto;
+
+  .ContentWrap {
+    @include text-breakword;
+  }
 }

src/components/Autocomplete/components/MappedAction/MappedAction.tsx

@@ -11,7 +11,9 @@ import {useI18n} from '../../../../utilities/i18n';
 
 import styles from './MappedAction.scss';
 
-interface MappedAction extends ActionListItemDescriptor {}
+interface MappedAction extends ActionListItemDescriptor {
+  wrapOverflow?: boolean;
+}
 
 export function MappedAction({
   active,
@@ -29,11 +31,14 @@ export function MappedAction({
   destructive,
   badge,
   helpText,
+  wrapOverflow = false,
 }: MappedAction) {
   const i18n = useI18n();
 
   let prefixMarkup: React.ReactNode | null = null;
 
+  const contentOverflowStyle = wrapOverflow ? styles.ContentWrap : undefined;
+
   if (prefix) {
     prefixMarkup = <div className={styles.Prefix}>{prefix}</div>;
   } else if (icon) {
@@ -69,14 +74,8 @@ export function MappedAction({
 
   const contentMarkup = (
     <div className={styles.Text}>
-      {helpText ? (
-        <>
-          <div>{contentText}</div>
-          <TextStyle variation="subdued">{helpText}</TextStyle>
-        </>
-      ) : (
-        contentText
-      )}
+      <div className={contentOverflowStyle}>{contentText}</div>
+      {helpText ? <TextStyle variation="subdued">{helpText}</TextStyle> : null}
     </div>
   );
 

src/components/Autocomplete/components/MappedOption/MappedOption.scss

@@ -3,6 +3,8 @@
 .Content {
   display: flex;
   flex: 1;
+
+  @include text-breakword;
 }
 
 .Media {