diff --git a/CHANGELOG.md b/CHANGELOG.md index 568054f9cfb..cec19347311 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/src-docs/src/views/selectable/selectable_example.js b/src-docs/src/views/selectable/selectable_example.js index c23b1a6c000..64fb41972e8 100644 --- a/src-docs/src/views/selectable/selectable_example.js +++ b/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 = {

There are two object properties you can add to enhance the content - of you options, option.prepend and{' '} + of your options, option.prepend and{' '} option.append. 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 listProps.isVirtualized is set to{' '} false, 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 {'textWrap="wrap"'} when + virtualization is off.

Custom content

diff --git a/src-docs/src/views/suggest/suggest_example.js b/src-docs/src/views/suggest/suggest_example.js index 7861229ec5b..55c6b57781c 100644 --- a/src-docs/src/views/suggest/suggest_example.js +++ b/src-docs/src/views/suggest/suggest_example.js @@ -117,11 +117,10 @@ export const SuggestExample = { iconType and color.

- Set truncate to false to force line-wrapping of - both the label and description. Note that wrapping text is not - compatible with the virtualized setting on{' '} - EuiSuggest. See{' '} - + Set truncate to false to encourage + line-wrapping of both the label and description. Note that when + the virtualized setting on, truncation will be enforced. See{' '} + EuiSelectable {' '} for more information on rendering items virtually. diff --git a/src/components/selectable/__snapshots__/selectable.test.tsx.snap b/src/components/selectable/__snapshots__/selectable.test.tsx.snap index 4d4136c31f0..e3930f73ec5 100644 --- a/src/components/selectable/__snapshots__/selectable.test.tsx.snap +++ b/src/components/selectable/__snapshots__/selectable.test.tsx.snap @@ -44,7 +44,7 @@ exports[`EuiSelectable custom options with data 1`] = ` data-euiicon-type="empty" /> VI: Titan @@ -72,7 +72,7 @@ exports[`EuiSelectable custom options with data 1`] = ` data-euiicon-type="empty" /> II: Enceladus @@ -100,7 +100,7 @@ exports[`EuiSelectable custom options with data 1`] = ` data-euiicon-type="empty" /> 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" /> Titan @@ -214,7 +214,7 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de data-euiicon-type="empty" /> Enceladus @@ -242,7 +242,7 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de data-euiicon-type="empty" /> Pandora is one of Saturn's moons, named for a Titaness of Greek mythology diff --git a/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap b/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap index f58e9971917..9eafde3b3f5 100644 --- a/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap +++ b/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap @@ -36,7 +36,7 @@ exports[`EuiSelectableListItem is rendered 1`] = ` data-euiicon-type="empty" /> Titan @@ -64,7 +64,7 @@ exports[`EuiSelectableListItem is rendered 1`] = ` data-euiicon-type="empty" /> Enceladus @@ -92,7 +92,7 @@ exports[`EuiSelectableListItem is rendered 1`] = ` data-euiicon-type="empty" /> Mimas @@ -120,7 +120,7 @@ exports[`EuiSelectableListItem is rendered 1`] = ` data-euiicon-type="empty" /> Pandora is one of Saturn's moons, named for a Titaness of Greek mythology @@ -148,7 +148,7 @@ exports[`EuiSelectableListItem is rendered 1`] = ` data-euiicon-type="empty" /> Tethys @@ -176,7 +176,7 @@ exports[`EuiSelectableListItem is rendered 1`] = ` data-euiicon-type="empty" /> Hyperion @@ -226,7 +226,7 @@ exports[`EuiSelectableListItem props activeOptionIndex 1`] = ` data-euiicon-type="empty" /> Titan @@ -254,7 +254,7 @@ exports[`EuiSelectableListItem props activeOptionIndex 1`] = ` data-euiicon-type="empty" /> Enceladus @@ -282,7 +282,7 @@ exports[`EuiSelectableListItem props activeOptionIndex 1`] = ` data-euiicon-type="empty" /> Mimas @@ -329,7 +329,7 @@ exports[`EuiSelectableListItem props activeOptionIndex 1`] = ` data-euiicon-type="empty" /> Pandora is one of Saturn's moons, named for a Titaness of Greek mythology @@ -357,7 +357,7 @@ exports[`EuiSelectableListItem props activeOptionIndex 1`] = ` data-euiicon-type="empty" /> Tethys @@ -385,7 +385,7 @@ exports[`EuiSelectableListItem props activeOptionIndex 1`] = ` data-euiicon-type="empty" /> Hyperion @@ -435,7 +435,7 @@ exports[`EuiSelectableListItem props allowExclusions 1`] = ` data-euiicon-type="empty" /> Titan @@ -468,7 +468,7 @@ exports[`EuiSelectableListItem props allowExclusions 1`] = ` data-euiicon-type="empty" /> Enceladus @@ -501,7 +501,7 @@ exports[`EuiSelectableListItem props allowExclusions 1`] = ` data-euiicon-type="empty" /> Mimas @@ -534,7 +534,7 @@ exports[`EuiSelectableListItem props allowExclusions 1`] = ` data-euiicon-type="empty" /> Pandora is one of Saturn's moons, named for a Titaness of Greek mythology @@ -567,7 +567,7 @@ exports[`EuiSelectableListItem props allowExclusions 1`] = ` data-euiicon-type="empty" /> Tethys @@ -600,7 +600,7 @@ exports[`EuiSelectableListItem props allowExclusions 1`] = ` data-euiicon-type="empty" /> Hyperion @@ -655,7 +655,7 @@ exports[`EuiSelectableListItem props bordered 1`] = ` data-euiicon-type="empty" /> Titan @@ -683,7 +683,7 @@ exports[`EuiSelectableListItem props bordered 1`] = ` data-euiicon-type="empty" /> Enceladus @@ -711,7 +711,7 @@ exports[`EuiSelectableListItem props bordered 1`] = ` data-euiicon-type="empty" /> Mimas @@ -739,7 +739,7 @@ exports[`EuiSelectableListItem props bordered 1`] = ` data-euiicon-type="empty" /> Pandora is one of Saturn's moons, named for a Titaness of Greek mythology @@ -767,7 +767,7 @@ exports[`EuiSelectableListItem props bordered 1`] = ` data-euiicon-type="empty" /> Tethys @@ -795,7 +795,7 @@ exports[`EuiSelectableListItem props bordered 1`] = ` data-euiicon-type="empty" /> Hyperion @@ -845,7 +845,7 @@ exports[`EuiSelectableListItem props height is forced 1`] = ` data-euiicon-type="empty" /> Titan @@ -873,7 +873,7 @@ exports[`EuiSelectableListItem props height is forced 1`] = ` data-euiicon-type="empty" /> Enceladus @@ -901,7 +901,7 @@ exports[`EuiSelectableListItem props height is forced 1`] = ` data-euiicon-type="empty" /> Mimas @@ -929,7 +929,7 @@ exports[`EuiSelectableListItem props height is forced 1`] = ` data-euiicon-type="empty" /> Pandora is one of Saturn's moons, named for a Titaness of Greek mythology @@ -957,7 +957,7 @@ exports[`EuiSelectableListItem props height is forced 1`] = ` data-euiicon-type="empty" /> Tethys @@ -985,7 +985,7 @@ exports[`EuiSelectableListItem props height is forced 1`] = ` data-euiicon-type="empty" /> Hyperion @@ -1035,7 +1035,7 @@ exports[`EuiSelectableListItem props height is full 1`] = ` data-euiicon-type="empty" /> Titan @@ -1063,7 +1063,7 @@ exports[`EuiSelectableListItem props height is full 1`] = ` data-euiicon-type="empty" /> Enceladus @@ -1091,7 +1091,7 @@ exports[`EuiSelectableListItem props height is full 1`] = ` data-euiicon-type="empty" /> Mimas @@ -1119,7 +1119,7 @@ exports[`EuiSelectableListItem props height is full 1`] = ` data-euiicon-type="empty" /> Pandora is one of Saturn's moons, named for a Titaness of Greek mythology @@ -1147,7 +1147,7 @@ exports[`EuiSelectableListItem props height is full 1`] = ` data-euiicon-type="empty" /> Tethys @@ -1175,7 +1175,7 @@ exports[`EuiSelectableListItem props height is full 1`] = ` data-euiicon-type="empty" /> Hyperion @@ -1218,7 +1218,7 @@ exports[`EuiSelectableListItem props isVirtualized can be false 1`] = ` data-euiicon-type="empty" /> Titan @@ -1245,7 +1245,7 @@ exports[`EuiSelectableListItem props isVirtualized can be false 1`] = ` data-euiicon-type="empty" /> Enceladus @@ -1272,7 +1272,7 @@ exports[`EuiSelectableListItem props isVirtualized can be false 1`] = ` data-euiicon-type="empty" /> Mimas @@ -1299,7 +1299,7 @@ exports[`EuiSelectableListItem props isVirtualized can be false 1`] = ` data-euiicon-type="empty" /> Pandora is one of Saturn's moons, named for a Titaness of Greek mythology @@ -1326,7 +1326,7 @@ exports[`EuiSelectableListItem props isVirtualized can be false 1`] = ` data-euiicon-type="empty" /> Tethys @@ -1353,7 +1353,7 @@ exports[`EuiSelectableListItem props isVirtualized can be false 1`] = ` data-euiicon-type="empty" /> Hyperion @@ -1402,7 +1402,7 @@ exports[`EuiSelectableListItem props paddingSize none is rendered 1`] = ` data-euiicon-type="empty" /> Titan @@ -1430,7 +1430,7 @@ exports[`EuiSelectableListItem props paddingSize none is rendered 1`] = ` data-euiicon-type="empty" /> Enceladus @@ -1458,7 +1458,7 @@ exports[`EuiSelectableListItem props paddingSize none is rendered 1`] = ` data-euiicon-type="empty" /> Mimas @@ -1486,7 +1486,7 @@ exports[`EuiSelectableListItem props paddingSize none is rendered 1`] = ` data-euiicon-type="empty" /> Pandora is one of Saturn's moons, named for a Titaness of Greek mythology @@ -1514,7 +1514,7 @@ exports[`EuiSelectableListItem props paddingSize none is rendered 1`] = ` data-euiicon-type="empty" /> Tethys @@ -1542,7 +1542,7 @@ exports[`EuiSelectableListItem props paddingSize none is rendered 1`] = ` data-euiicon-type="empty" /> Hyperion @@ -1592,7 +1592,7 @@ exports[`EuiSelectableListItem props paddingSize s is rendered 1`] = ` data-euiicon-type="empty" /> Titan @@ -1620,7 +1620,7 @@ exports[`EuiSelectableListItem props paddingSize s is rendered 1`] = ` data-euiicon-type="empty" /> Enceladus @@ -1648,7 +1648,7 @@ exports[`EuiSelectableListItem props paddingSize s is rendered 1`] = ` data-euiicon-type="empty" /> Mimas @@ -1676,7 +1676,7 @@ exports[`EuiSelectableListItem props paddingSize s is rendered 1`] = ` data-euiicon-type="empty" /> Pandora is one of Saturn's moons, named for a Titaness of Greek mythology @@ -1704,7 +1704,7 @@ exports[`EuiSelectableListItem props paddingSize s is rendered 1`] = ` data-euiicon-type="empty" /> Tethys @@ -1732,7 +1732,7 @@ exports[`EuiSelectableListItem props paddingSize s is rendered 1`] = ` data-euiicon-type="empty" /> Hyperion @@ -1782,7 +1782,7 @@ exports[`EuiSelectableListItem props renderOption 1`] = ` data-euiicon-type="empty" /> => Titan @@ -1810,7 +1810,7 @@ exports[`EuiSelectableListItem props renderOption 1`] = ` data-euiicon-type="empty" /> => Enceladus @@ -1838,7 +1838,7 @@ exports[`EuiSelectableListItem props renderOption 1`] = ` data-euiicon-type="empty" /> => Mimas @@ -1866,7 +1866,7 @@ exports[`EuiSelectableListItem props renderOption 1`] = ` data-euiicon-type="empty" /> => Pandora is one of Saturn's moons, named for a Titaness of Greek mythology @@ -1894,7 +1894,7 @@ exports[`EuiSelectableListItem props renderOption 1`] = ` data-euiicon-type="empty" /> => Tethys @@ -1922,7 +1922,7 @@ exports[`EuiSelectableListItem props renderOption 1`] = ` data-euiicon-type="empty" /> => Hyperion @@ -1972,7 +1972,7 @@ exports[`EuiSelectableListItem props rowHeight 1`] = ` data-euiicon-type="empty" /> Titan @@ -2000,7 +2000,7 @@ exports[`EuiSelectableListItem props rowHeight 1`] = ` data-euiicon-type="empty" /> Enceladus @@ -2028,7 +2028,7 @@ exports[`EuiSelectableListItem props rowHeight 1`] = ` data-euiicon-type="empty" /> Mimas @@ -2056,7 +2056,7 @@ exports[`EuiSelectableListItem props rowHeight 1`] = ` data-euiicon-type="empty" /> Pandora is one of Saturn's moons, named for a Titaness of Greek mythology @@ -2084,7 +2084,7 @@ exports[`EuiSelectableListItem props rowHeight 1`] = ` data-euiicon-type="empty" /> Tethys @@ -2112,7 +2112,7 @@ exports[`EuiSelectableListItem props rowHeight 1`] = ` data-euiicon-type="empty" /> Hyperion @@ -2162,7 +2162,7 @@ exports[`EuiSelectableListItem props searchValue 1`] = ` data-euiicon-type="empty" /> Titan @@ -2190,7 +2190,7 @@ exports[`EuiSelectableListItem props searchValue 1`] = ` data-euiicon-type="empty" /> Enceladus @@ -2218,7 +2218,7 @@ exports[`EuiSelectableListItem props searchValue 1`] = ` data-euiicon-type="empty" /> Pandora is one of Saturn's moons, named for a Titaness of Greek mythology @@ -2279,7 +2279,7 @@ exports[`EuiSelectableListItem props searchValue 1`] = ` data-euiicon-type="empty" /> Tethys @@ -2307,7 +2307,7 @@ exports[`EuiSelectableListItem props searchValue 1`] = ` data-euiicon-type="empty" /> Hyperion @@ -2357,7 +2357,7 @@ exports[`EuiSelectableListItem props searchValue 2`] = ` data-euiicon-type="empty" /> Titan @@ -2385,7 +2385,7 @@ exports[`EuiSelectableListItem props searchValue 2`] = ` data-euiicon-type="empty" /> Enceladus @@ -2413,7 +2413,7 @@ exports[`EuiSelectableListItem props searchValue 2`] = ` data-euiicon-type="empty" /> Pandora is one of Saturn's moons, named for a Titaness of Greek mythology @@ -2474,7 +2474,7 @@ exports[`EuiSelectableListItem props searchValue 2`] = ` data-euiicon-type="empty" /> Tethys @@ -2502,7 +2502,7 @@ exports[`EuiSelectableListItem props searchValue 2`] = ` data-euiicon-type="empty" /> Hyperion @@ -2552,7 +2552,7 @@ exports[`EuiSelectableListItem props searchable enables correct screen reader in data-euiicon-type="empty" /> Titan @@ -2580,7 +2580,7 @@ exports[`EuiSelectableListItem props searchable enables correct screen reader in data-euiicon-type="empty" /> Enceladus @@ -2608,7 +2608,7 @@ exports[`EuiSelectableListItem props searchable enables correct screen reader in data-euiicon-type="empty" /> Mimas @@ -2636,7 +2636,7 @@ exports[`EuiSelectableListItem props searchable enables correct screen reader in data-euiicon-type="empty" /> Pandora is one of Saturn's moons, named for a Titaness of Greek mythology @@ -2664,7 +2664,7 @@ exports[`EuiSelectableListItem props searchable enables correct screen reader in data-euiicon-type="empty" /> Tethys @@ -2692,7 +2692,7 @@ exports[`EuiSelectableListItem props searchable enables correct screen reader in data-euiicon-type="empty" /> Hyperion @@ -2734,8 +2734,16 @@ exports[`EuiSelectableListItem props showIcons can be turned off 1`] = ` style="position:absolute;left:0;top:0;height:32px;width:100%" title="Titan" > - - Titan + + + + Titan + +

  • - - Enceladus + + + + Enceladus + +
  • - - Mimas + + + + Mimas + +
  • - - Pandora is one of Saturn's moons, named for a Titaness of Greek mythology + + + + Pandora is one of Saturn's moons, named for a Titaness of Greek mythology + +
  • - - Tethys + + + + Tethys + +
  • - - Hyperion + + + + Hyperion + +
    • @@ -2860,7 +2908,7 @@ exports[`EuiSelectableListItem props singleSelection can be forced so that at le data-euiicon-type="empty" /> Titan @@ -2888,7 +2936,7 @@ exports[`EuiSelectableListItem props singleSelection can be forced so that at le data-euiicon-type="empty" /> Enceladus @@ -2916,7 +2964,7 @@ exports[`EuiSelectableListItem props singleSelection can be forced so that at le data-euiicon-type="empty" /> Mimas @@ -2944,7 +2992,7 @@ exports[`EuiSelectableListItem props singleSelection can be forced so that at le data-euiicon-type="empty" /> Pandora is one of Saturn's moons, named for a Titaness of Greek mythology @@ -2972,7 +3020,7 @@ exports[`EuiSelectableListItem props singleSelection can be forced so that at le data-euiicon-type="empty" /> Tethys @@ -3000,7 +3048,7 @@ exports[`EuiSelectableListItem props singleSelection can be forced so that at le data-euiicon-type="empty" /> Hyperion @@ -3050,7 +3098,197 @@ exports[`EuiSelectableListItem props singleSelection can be turned on 1`] = ` data-euiicon-type="empty" /> + + Titan + + + + +
  • + + + + + Enceladus + + + +
    • +
  • + + + + + Mimas + + + +
    • +
  • + + + + + Pandora is one of Saturn's moons, named for a Titaness of Greek mythology + + + +
    • +
  • + + + + + Tethys + + + +
    • +
  • + + + + + Hyperion + + + +
    • + + + + +`; + +exports[`EuiSelectableListItem props textWrap can be "wrap" 1`] = ` +
    +
    +
    +
      +
    • + + + Titan @@ -3078,7 +3316,7 @@ exports[`EuiSelectableListItem props singleSelection can be turned on 1`] = ` data-euiicon-type="empty" /> Enceladus @@ -3106,7 +3344,7 @@ exports[`EuiSelectableListItem props singleSelection can be turned on 1`] = ` data-euiicon-type="empty" /> Mimas @@ -3134,7 +3372,7 @@ exports[`EuiSelectableListItem props singleSelection can be turned on 1`] = ` data-euiicon-type="empty" /> Pandora is one of Saturn's moons, named for a Titaness of Greek mythology @@ -3162,7 +3400,7 @@ exports[`EuiSelectableListItem props singleSelection can be turned on 1`] = ` data-euiicon-type="empty" /> Tethys @@ -3190,7 +3428,7 @@ exports[`EuiSelectableListItem props singleSelection can be turned on 1`] = ` data-euiicon-type="empty" /> Hyperion @@ -3239,7 +3477,7 @@ exports[`EuiSelectableListItem props visibleOptions 1`] = ` data-euiicon-type="empty" /> Mimas @@ -3267,7 +3505,7 @@ exports[`EuiSelectableListItem props visibleOptions 1`] = ` data-euiicon-type="empty" /> Pandora is one of Saturn's moons, named for a Titaness of Greek mythology @@ -3295,7 +3533,7 @@ exports[`EuiSelectableListItem props visibleOptions 1`] = ` data-euiicon-type="empty" /> Tethys @@ -3323,7 +3561,7 @@ exports[`EuiSelectableListItem props visibleOptions 1`] = ` data-euiicon-type="empty" /> Hyperion diff --git a/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap b/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap index 0473c0b11b7..1286cd82504 100644 --- a/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap +++ b/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap @@ -17,7 +17,7 @@ exports[`EuiSelectableListItem is rendered 1`] = ` data-euiicon-type="empty" />
      • @@ -38,7 +38,7 @@ exports[`EuiSelectableListItem props append 1`] = ` data-euiicon-type="empty" />
      @@ -145,7 +145,7 @@ exports[`EuiSelectableListItem props isFocused 1`] = ` data-euiicon-type="empty" /> @@ -206,7 +206,7 @@ exports[`EuiSelectableListItem props onFocusBadge can be true 1`] = ` data-euiicon-type="empty" /> @@ -227,7 +227,7 @@ exports[`EuiSelectableListItem props paddingSize none is rendered 1`] = ` data-euiicon-type="empty" /> @@ -248,7 +248,7 @@ exports[`EuiSelectableListItem props paddingSize s is rendered 1`] = ` data-euiicon-type="empty" /> @@ -274,7 +274,7 @@ exports[`EuiSelectableListItem props prepend 1`] = ` @@ -286,5 +286,34 @@ exports[`EuiSelectableListItem props showIcons can be turned off 1`] = ` class="euiSelectableListItem euiSelectableListItem--paddingSmall" data-test-selected="false" role="option" -/> +> + + + + +`; + +exports[`EuiSelectableListItem props textWrap can be "wrap" 1`] = ` +
    • + + + + +
      • `; diff --git a/src/components/selectable/selectable_list/_selectable_list_item.scss b/src/components/selectable/selectable_list/_selectable_list_item.scss index 0cbd588acf6..9ff1966fef4 100644 --- a/src/components/selectable/selectable_list/_selectable_list_item.scss +++ b/src/components/selectable/selectable_list/_selectable_list_item.scss @@ -50,6 +50,9 @@ } .euiSelectableListItem__text { - @include euiTextTruncate; flex-grow: 1; // Pushes appended content to the far right + + &--truncate { + @include euiTextTruncate; + } } diff --git a/src/components/selectable/selectable_list/selectable_list.test.tsx b/src/components/selectable/selectable_list/selectable_list.test.tsx index d4b722fecec..ac3adedc273 100644 --- a/src/components/selectable/selectable_list/selectable_list.test.tsx +++ b/src/components/selectable/selectable_list/selectable_list.test.tsx @@ -255,5 +255,19 @@ describe('EuiSelectableListItem', () => { }); }); }); + + describe('textWrap', () => { + test('can be "wrap"', () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); + }); }); }); diff --git a/src/components/selectable/selectable_list/selectable_list.tsx b/src/components/selectable/selectable_list/selectable_list.tsx index eb460b904b2..89c20d28390 100644 --- a/src/components/selectable/selectable_list/selectable_list.tsx +++ b/src/components/selectable/selectable_list/selectable_list.tsx @@ -83,9 +83,14 @@ export type EuiSelectableOptionsListProps = CommonProps & */ onFocusBadge?: EuiSelectableListItemProps['onFocusBadge']; /** - * See #EuiSelectableListItemProps + * Padding for the list items. */ paddingSize?: EuiSelectableListItemProps['paddingSize']; + /** + * How to handle long text within the item. + * Wrapping only works if virtualization is off. + */ + textWrap?: EuiSelectableListItemProps['textWrap']; } & EuiSelectableOptionsListVirtualizedProps; export type EuiSelectableListProps = EuiSelectableOptionsListProps & { @@ -238,6 +243,7 @@ export class EuiSelectableList extends Component> { renderOption, setActiveOptionIndex, searchable, + textWrap, } = this.props; if (isGroupLabel) { @@ -282,6 +288,7 @@ export class EuiSelectableList extends Component> { showIcons={showIcons} paddingSize={paddingSize} searchable={searchable} + textWrap={textWrap} {...(optionRest as EuiSelectableListItemProps)} > {renderOption ? ( @@ -324,6 +331,7 @@ export class EuiSelectableList extends Component> { 'aria-describedby': ariaDescribedby, role, isVirtualized, + textWrap, ...rest } = this.props; diff --git a/src/components/selectable/selectable_list/selectable_list_item.test.tsx b/src/components/selectable/selectable_list/selectable_list_item.test.tsx index 12446c3e36e..65b4147bcf5 100644 --- a/src/components/selectable/selectable_list/selectable_list_item.test.tsx +++ b/src/components/selectable/selectable_list/selectable_list_item.test.tsx @@ -74,6 +74,14 @@ describe('EuiSelectableListItem', () => { }); }); + describe('textWrap', () => { + test('can be "wrap"', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); + describe('onFocusBadge', () => { test('can be true', () => { const component = render(); diff --git a/src/components/selectable/selectable_list/selectable_list_item.tsx b/src/components/selectable/selectable_list/selectable_list_item.tsx index 4526b293f8c..38c90e58fb6 100644 --- a/src/components/selectable/selectable_list/selectable_list_item.tsx +++ b/src/components/selectable/selectable_list/selectable_list_item.tsx @@ -74,6 +74,11 @@ export type EuiSelectableListItemProps = LiHTMLAttributes & * other ARIA attributes such as `aria-checked` will not be automatically configured. */ role?: LiHTMLAttributes['role']; + /** + * How to handle long text within the item. + * Wrapping only works if virtualization is off. + */ + textWrap?: 'truncate' | 'wrap'; }; // eslint-disable-next-line react/prefer-stateless-function @@ -83,6 +88,7 @@ export class EuiSelectableListItem extends Component< static defaultProps = { showIcons: true, onFocusBadge: true, + textWrap: 'truncate', }; constructor(props: EuiSelectableListItemProps) { @@ -104,6 +110,7 @@ export class EuiSelectableListItem extends Component< paddingSize = 's', role = 'option', searchable, + textWrap, ...rest } = this.props; @@ -116,6 +123,10 @@ export class EuiSelectableListItem extends Component< className ); + const textClasses = classNames('euiSelectableListItem__text', { + [`euiSelectableListItem__text--${textWrap}`]: textWrap, + }); + let optionIcon: React.ReactNode; if (showIcons) { const { icon, color } = resolveIconAndColor(checked); @@ -252,22 +263,15 @@ export class EuiSelectableListItem extends Component< aria-disabled={disabled} {...rest} > - {optionIcon || prependNode || appendNode ? ( - - {optionIcon} - {prependNode} - - {children} - {instructions} - - {appendNode} - - ) : ( - <> + + {optionIcon} + {prependNode} + {children} {instructions} - - )} + + {appendNode} + ); } diff --git a/src/components/suggest/__snapshots__/suggest.test.tsx.snap b/src/components/suggest/__snapshots__/suggest.test.tsx.snap index eb8a7ffd72f..0bc7f63e0e6 100644 --- a/src/components/suggest/__snapshots__/suggest.test.tsx.snap +++ b/src/components/suggest/__snapshots__/suggest.test.tsx.snap @@ -155,6 +155,7 @@ exports[`EuiSuggest props isVirtualized 1`] = ` "onFocusBadge": false, "paddingSize": "none", "showIcons": false, + "textWrap": "truncate", } } options={ @@ -170,6 +171,7 @@ exports[`EuiSuggest props isVirtualized 1`] = ` }, }, "label": "Field sample", + "truncate": true, }, Object { "className": "euiSuggestItemOption", @@ -182,6 +184,7 @@ exports[`EuiSuggest props isVirtualized 1`] = ` }, }, "label": "Value sample", + "truncate": true, }, ] } @@ -314,6 +317,7 @@ exports[`EuiSuggest props isVirtualized 1`] = ` }, }, "label": "Field sample", + "truncate": true, }, Object { "className": "euiSuggestItemOption", @@ -326,6 +330,7 @@ exports[`EuiSuggest props isVirtualized 1`] = ` }, }, "label": "Value sample", + "truncate": true, }, ] } @@ -475,6 +480,7 @@ exports[`EuiSuggest props maxHeight 1`] = ` "onFocusBadge": false, "paddingSize": "none", "showIcons": false, + "textWrap": "wrap", } } options={ @@ -490,6 +496,7 @@ exports[`EuiSuggest props maxHeight 1`] = ` }, }, "label": "Field sample", + "truncate": undefined, }, Object { "className": "euiSuggestItemOption", @@ -502,6 +509,7 @@ exports[`EuiSuggest props maxHeight 1`] = ` }, }, "label": "Value sample", + "truncate": undefined, }, ] } @@ -634,6 +642,7 @@ exports[`EuiSuggest props maxHeight 1`] = ` }, }, "label": "Field sample", + "truncate": undefined, }, Object { "className": "euiSuggestItemOption", @@ -646,6 +655,7 @@ exports[`EuiSuggest props maxHeight 1`] = ` }, }, "label": "Value sample", + "truncate": undefined, }, ] } diff --git a/src/components/suggest/suggest.tsx b/src/components/suggest/suggest.tsx index bad59f74d8c..2337595e716 100644 --- a/src/components/suggest/suggest.tsx +++ b/src/components/suggest/suggest.tsx @@ -258,6 +258,8 @@ export const EuiSuggest: FunctionComponent = ({ ...(liProps as typeof props), data, className: classNames(className, 'euiSuggestItemOption'), + // Force truncation if `isVirtualized` is true + truncate: isVirtualized ? true : props.truncate, }; }); @@ -284,6 +286,7 @@ export const EuiSuggest: FunctionComponent = ({ showIcons: false, onFocusBadge: false, paddingSize: 'none', + textWrap: isVirtualized ? 'truncate' : 'wrap', isVirtualized, ...rest, }}