[EuiSelectableListItem] Revert layout changes and add textWrap option

CHANGELOG.md

@@ -7,11 +7,15 @@
 - Added `"xxl"` size to `EuiLoadingSpinner` ([#5668](https://github.com/elastic/eui/pull/5668))
 - Added `isLoading` prop to `EuiButtonIcon` ([#5668](https://github.com/elastic/eui/pull/5668))
 - Updated `EuiDataGrid` to allow setting individual cell `isExpandable` state via `setCellProps` ([#5667](https://github.com/elastic/eui/pull/5667))
+- Added `textWrap` to `EuiSelectableListItem`, `EuiSelectableList`, and `EuiSelectable.listOptions` ([#5679](https://github.com/elastic/eui/issues/5679))
+- Forced `truncation` on `EuiSuggest` items when `isVirtualize` ([#5679](https://github.com/elastic/eui/issues/5679))
 - Changed proportion handling between content and image in `horizontal` `EuiEmptyPrompt` and added spacing between ([#5663](https://github.com/elastic/eui/pull/5663))
 
 **Bug fixes**
 
 - Fixed `EuiDataGrid` cell props not resetting on column sort ([#5665](https://github.com/elastic/eui/issues/5665))
+- Fixed render of `EuiSelectableListItem` when no icons are present ([#5679](https://github.com/elastic/eui/issues/5679))
+- Fixed render of `EuiSelectableTemplateSitewide` items when no icons are present ([#5679](https://github.com/elastic/eui/issues/5679))
 
 ## [`49.0.0`](https://github.com/elastic/eui/tree/v49.0.0)
 

src-docs/src/views/selectable/selectable_example.js

@@ -21,7 +21,6 @@ import {
   Options,
   MetaData,
 } from './props';
-
 import Selectable from './selectable';
 const selectableSource = require('!!raw-loader!./selectable');
 
@@ -333,7 +332,7 @@ export const SelectableExample = {
         <Fragment>
           <p>
             There are two object properties you can add to enhance the content
-            of you options, <EuiCode>option.prepend</EuiCode> and{' '}
+            of your options, <EuiCode>option.prepend</EuiCode> and{' '}
             <EuiCode>option.append</EuiCode>. These will add nodes before and
             after the option label respectively. They will not be included in
             the searchable content as this only matches against the label
@@ -366,7 +365,9 @@ export const SelectableExample = {
             If <EuiCode>listProps.isVirtualized</EuiCode> is set to{' '}
             <EuiCode>false</EuiCode>, each row will fit its contents and removes
             all scrolling. Therefore, we recommend having a large enough
-            container to accomodate all optons.
+            container to accommodate all options. You can also remove truncation
+            by setting <EuiCode>{'textWrap="wrap"'}</EuiCode> when
+            virtualization is off.
           </p>
           <h3>Custom content</h3>
           <p>

src-docs/src/views/suggest/suggest_example.js

@@ -117,11 +117,10 @@ export const SuggestExample = {
               <EuiCode>iconType</EuiCode> and <EuiCode>color</EuiCode>.
             </p>
             <p>
-              Set <EuiCode>truncate</EuiCode> to false to force line-wrapping of
-              both the label and description. Note that wrapping text is not
-              compatible with the virtualized setting on{' '}
-              <strong>EuiSuggest</strong>. See{' '}
-              <Link to="forms/selectable#rendering-the-options">
+              Set <EuiCode>truncate</EuiCode> to false to encourage
+              line-wrapping of both the label and description. Note that when
+              the virtualized setting on, truncation will be enforced. See{' '}
+              <Link to="/forms/selectable#rendering-the-options">
                 EuiSelectable
               </Link>{' '}
               for more information on rendering items virtually.

src/components/selectable/__snapshots__/selectable.test.tsx.snap

@@ -44,7 +44,7 @@ exports[`EuiSelectable custom options with data 1`] = `
                 data-euiicon-type="empty"
               />
               <span
-                class="euiSelectableListItem__text"
+                class="euiSelectableListItem__text euiSelectableListItem__text--truncate"
               >
                 <span>
                   VI: Titan
@@ -72,7 +72,7 @@ exports[`EuiSelectable custom options with data 1`] = `
                 data-euiicon-type="empty"
               />
               <span
-                class="euiSelectableListItem__text"
+                class="euiSelectableListItem__text euiSelectableListItem__text--truncate"
               >
                 <span>
                   II: Enceladus
@@ -100,7 +100,7 @@ exports[`EuiSelectable custom options with data 1`] = `
                 data-euiicon-type="empty"
               />
               <span
-                class="euiSelectableListItem__text"
+                class="euiSelectableListItem__text euiSelectableListItem__text--truncate"
               >
                 <span>
                   XVII: Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
@@ -186,7 +186,7 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
                 data-euiicon-type="empty"
               />
               <span
-                class="euiSelectableListItem__text"
+                class="euiSelectableListItem__text euiSelectableListItem__text--truncate"
               >
                 <span>
                   Titan
@@ -214,7 +214,7 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
                 data-euiicon-type="empty"
               />
               <span
-                class="euiSelectableListItem__text"
+                class="euiSelectableListItem__text euiSelectableListItem__text--truncate"
               >
                 <span>
                   Enceladus
@@ -242,7 +242,7 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
                 data-euiicon-type="empty"
               />
               <span
-                class="euiSelectableListItem__text"
+                class="euiSelectableListItem__text euiSelectableListItem__text--truncate"
               >
                 <span>
                   Pandora is one of Saturn's moons, named for a Titaness of Greek mythology