[Option] fix word-break on option label

[patrickracicot]

WHY are these changes introduced?

Fixes part of #22937
Prevents horizontal scrollbar for very long option text inside an OptionList.

WHAT is this pull request doing?

This PR ensures that the label in the Option of the OptionList breaks when it's too long for the space of the option list.

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
        listTitle="Title"
        onSelect={(selected: string[]) => {
          setCurrentTags(selected);
          setTextFieldValue('');
        }}
        options={options}
        preferredPosition="mostSpace"
        selected={currentTags}
        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	142.64 KB (0%)
esm	96.38 KB (0%)
esnext	139.59 KB (+0.01% 🔺)
css	33.77 KB (+0.02% 🔺)

[kyledurand]

👋 Just a heads up this property is deprecated

Better to use overflow-wrap: anywhere which should work in the same way

[patrickracicot]

🤔 anywhere isn't supported by Safari. In that case should we include both for backward compatibility ?
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#browser_compatibility

Unless we go with word-break: break-all;

[patrickracicot]

As discussed on slack, overflow-wrap: anywhere is not an option as it isn't supported by Safari. Instead, I went with word-break: break-all which achieves intended fix and also works with Chinese/Japanese/Korean (CJK) text.

[patrickracicot]

So after another find 💡 by Kyle, I've instead used the mixin text-breakword

[chloerice]

Thank you @patrickracicot! 🚀

[ghost]

🎉 Thanks for your contribution to Polaris React!