Create new EuiTextBlockTruncate component #7250
Conversation
+ update `<GuideTabbedPage>` to not require a `page` component, and use the `sections` array instead
|
@elastic/eui-team I'm looking for feedback on the component name! I struggled a lot with trying to come up with something that wasn't overly wordy - I ended up going with If you have any other suggestions, I'd love to hear them! |
|
Preview staging links for this PR:
|
💚 Build Succeeded
|
There was a problem hiding this comment.
👍 LGTM! I stepped through the Storybook demos using VoiceOver on Firefox and Safari to get a sense how the line-clamp would drive. The text is all still available and readable as expected. Safari + VO even allows users to move which lines of text are shown in the container viewport which is pretty cool.
Haha whoa, that's wild! I wonder if that's intentional (because the |
|
@cee-chen I'm 👍 on the name. Having the word |
|
@cee-chen To echo Trevor, I'm good with this name. |
|
Thank you all, that's super helpful! |
`v88.5.4`⏩`v89.0.0` --- ## [`89.0.0`](https://github.com/elastic/eui/tree/v89.0.0) - Added new `pushAnimation` prop to push `EuiFlyout`s, which enables a slide in animation ([#7239](elastic/eui#7239)) - Updated `EuiComboBox` to use `EuiInputPopover` under the hood ([#7246](elastic/eui#7246)) - Added `inputPopoverProps` to `EuiComboBox`, which allows customizing the underlying popover ([#7246](elastic/eui#7246)) - Added a new beta `EuiTextBlockTruncate` component for multi-line truncation ([#7250](elastic/eui#7250)) - Updated `EuiBasicTable` and `EuiInMemoryTable` to support multi-line truncation. This can be set via `truncateText.lines` in the `columns` prop. ([#7254](elastic/eui#7254)) **Bug fixes** - Fixed `EuiFlexGroup` and `EuiFlexGrid`'s `m` gutter size ([#7251](elastic/eui#7251)) - Fixed focus trap rerender issues in `EuiFlyout` with memoization ([#7259](elastic/eui#7259)) - Fixed a visual bug with `EuiContextMenu`'s animation between panels ([#7268](elastic/eui#7268)) **Breaking changes** - EUI's global body font-size now respects the `font.defaultUnits` token. This means that the global font size will use the `rem` unit by default, instead of `px`. ([#7182](elastic/eui#7182)) - Removed exported `accessibleClickKeys`, `comboBoxKeys`, and `cascadingMenuKeys` services. Use the generic `keys` service instead ([#7256](elastic/eui#7256)) - Removed `EuiColorStops` due to low usage ([#7262](elastic/eui#7262)) - Removed `EuiSuggest`. We recommend using `EuiSelectable` or `EuiComboBox` instead ([#7263](elastic/eui#7263)) - Removed `euiHeaderAffordForFixed` Sass mixin, and `$euiHeaderHeight` and `$euiHeaderHeightCompensation` Sass variables. Use the CSS variable `--var(euiFixedHeadersOffset, 0)` instead. ([#7264](elastic/eui#7264)) **Accessibility** - When using `rem` or `em` font units, EUI now respects, instead of ignoring, browser default font sizes set by end users. ([#7182](elastic/eui#7182))
`v88.5.4`⏩`v89.0.0` --- ## [`89.0.0`](https://github.com/elastic/eui/tree/v89.0.0) - Added new `pushAnimation` prop to push `EuiFlyout`s, which enables a slide in animation ([elastic#7239](elastic/eui#7239)) - Updated `EuiComboBox` to use `EuiInputPopover` under the hood ([elastic#7246](elastic/eui#7246)) - Added `inputPopoverProps` to `EuiComboBox`, which allows customizing the underlying popover ([elastic#7246](elastic/eui#7246)) - Added a new beta `EuiTextBlockTruncate` component for multi-line truncation ([elastic#7250](elastic/eui#7250)) - Updated `EuiBasicTable` and `EuiInMemoryTable` to support multi-line truncation. This can be set via `truncateText.lines` in the `columns` prop. ([elastic#7254](elastic/eui#7254)) **Bug fixes** - Fixed `EuiFlexGroup` and `EuiFlexGrid`'s `m` gutter size ([elastic#7251](elastic/eui#7251)) - Fixed focus trap rerender issues in `EuiFlyout` with memoization ([elastic#7259](elastic/eui#7259)) - Fixed a visual bug with `EuiContextMenu`'s animation between panels ([elastic#7268](elastic/eui#7268)) **Breaking changes** - EUI's global body font-size now respects the `font.defaultUnits` token. This means that the global font size will use the `rem` unit by default, instead of `px`. ([elastic#7182](elastic/eui#7182)) - Removed exported `accessibleClickKeys`, `comboBoxKeys`, and `cascadingMenuKeys` services. Use the generic `keys` service instead ([elastic#7256](elastic/eui#7256)) - Removed `EuiColorStops` due to low usage ([elastic#7262](elastic/eui#7262)) - Removed `EuiSuggest`. We recommend using `EuiSelectable` or `EuiComboBox` instead ([elastic#7263](elastic/eui#7263)) - Removed `euiHeaderAffordForFixed` Sass mixin, and `$euiHeaderHeight` and `$euiHeaderHeightCompensation` Sass variables. Use the CSS variable `--var(euiFixedHeadersOffset, 0)` instead. ([elastic#7264](elastic/eui#7264)) **Accessibility** - When using `rem` or `em` font units, EUI now respects, instead of ignoring, browser default font sizes set by end users. ([elastic#7182](elastic/eui#7182))
Summary
closes #6312
Part 1 of #7226 (note: does not close the issue, as @walterra would like the component to be baked into EuiBasicTable's
columnsAPI - I'm separating that second part into another PR for easier review)QA
linestruncates as expectedcloneElementcontrol to true and inspect the text in the DOM. Confirm the parent element is now a<p>tag and not a<div>(toggle back and forth to see the difference)General checklist
- [ ] Checked in both light and dark modeskeyboard-only andscreenreader modes@defaultif default values are missing) and playground toggles- [ ] Checked Code Sandbox works for any docs examplesand cypress tests- [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)