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

[patrickracicot]

WHY are these changes introduced?

Part of #22937
Port of #4411 to v7

The problem resides mostly on small display with very long labels in the options. An easy example of this is when a merchant is trying to add tags to orders or draft orders. In that case, the merchant can select up to 40 characters, which on mobile display is too big to fit on the screen and will then generate a horizontal scrollbar.

NOTE This issue only happens when theirs no spaces in the word.

WHAT is this pull request doing?

• The first fix included in this PR will force the label content to wrap for the normal options which are inside the MappedOption.
• The second fix included in this PR adds a new prop on the Autocomplete component which allows the dev to specify if the MappedAction label should wrap it's content or not. This new prop was added due to the fact that we have another prop which controls if ellipsis are added or not at the end of the label.

Before

After

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import {CirclePlusMinor} from '@shopify/polaris-icons';
import React, {useState} from 'react';

import {Autocomplete, Icon, Key, KeypressListener, Page} from '../src';

export function Playground() {
  const [textFieldValue, setTextFieldValue] = useState('');
  const [textFieldFocused, setTextFieldFocused] = useState(false);
  const [currentTags, setCurrentTags] = useState<string[]>([]);
  const options = [
    {value: 'cheese_pizza', label: 'Cheese Pizza'},
    {value: 'macaroni_pizza', label: 'Macaroni Pizza'},
    {value: 'pepperoni_pizza', label: 'Pepperoni Pizza'},
    {
      value: 'ok',
      active: true,
      media: <Icon source={CirclePlusMinor} color="base" />,
      label:
        'asdasdasddasdasdasddasdasdasddasdasdasddasdasdasddasdasdasddasdasdasddasdasdasdd',
    },
  ];

  function handleTextFieldEnter() {
    setTextFieldValue('');
  }
  function handleTextFieldChange(nextTextFieldValue: string) {
    setTextFieldValue(nextTextFieldValue);
  }
  function handleTextFieldFocused() {
    setTextFieldValue('');
    setTextFieldFocused(true);
  }

  const textFieldMarkup = (
    <>
      <KeypressListener keyCode={Key.Enter} handler={handleTextFieldEnter} />
      <Autocomplete.TextField
        autoComplete="off"
        label="Text Field label"
        labelHidden
        onBlur={() => {
          setTextFieldFocused(false);
        }}
        onChange={handleTextFieldChange}
        onFocus={handleTextFieldFocused}
        placeholder="The placeholder"
        value={textFieldFocused ? textFieldValue : ''}
      />
    </>
  );

  return (
    <Page title="Playground">
      <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={currentTags}
        onSelect={(selected: string[]) => {
          setCurrentTags(selected);
          setTextFieldValue('');
        }}
        listTitle="Suggested tags"
        textField={textFieldMarkup}
      />
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, ping @ sarahill to update the Polaris UI kit

[github-actions]

size-limit report

Path	Size
cjs	143.97 KB (+0.03% 🔺)
esm	97.85 KB (+0.04% 🔺)
esnext	143.55 KB (+0.05% 🔺)
css	34.54 KB (+0.05% 🔺)

[Juanita-Dash]

LGTM!

[voiid]

This type is used by other components - can you double check the possible impact of this change? I'm guessing it'll show up as an available prop for ActionList items or other things but it wouldn't have any effect on those components.

[patrickracicot]

Since no other component except MappedAction actually use the prop, their will be no side effects.
Now this could be an irritation for dev since the intellisense will offer the prop even for components that don't use it. A solution for this would be to change the comment to inform devs that this prop is currently only supported by Autocomplete. This will also allow polaris maintainers to decide if and when they want to support this prop on other components.

[voiid]

I wonder if it would make more sense to extend the type that's used for mapped actions directly? So instead of adding the field to the shared ActionListItemDescriptor, we would only have it be available for autocomplete.

Something along these lines (with a better name? 😂 )

interface ActionDescriptor = ActionListItemDescriptor & {
    /** Specifies that if the label is too long it will wrap instead of being hidden  */
    wrapOverflow?: boolean;
}

...

actionBefore?: ActionDescriptor;

[patrickracicot]

Currently the MappedAction component has an internal interface named MappedAction which extends the ActionListItemDescriptor. Maybe we could simply move this type hire in the component hierarchy in order to be able to consume it inside AutocompleteProps 🤔

[voiid]

Yeah, I think that makes sense. Shouldn't be called MappedAction since that's an implementation detail that we don't want to leak externally but we can remove the type extension in MappedAction and move it up to Autocomplete. Could follow the same pattern that's being used for OptionDescriptor? I defer to you on that though :)

[patrickracicot]

Following the proposal, I added type extension directly in the AutocompleteProps and inside the private MappedAction. This way, we do not expose our internals and we only have the new prop available for the auto complete component.