Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[EuiComboBox] Allow ComboBoxPill components to truncate when displaying long text #7193

Merged
merged 4 commits into from
Sep 18, 2023
Merged

[EuiComboBox] Allow ComboBoxPill components to truncate when displaying long text #7193

merged 4 commits into from
Sep 18, 2023

Conversation

breehall
Copy link
Contributor

@breehall breehall commented Sep 14, 2023 •
edited
Loading

Closes #7173

Summary

This PR fixes the truncation for selected EuiComboBox items in two parts:

  1. Truncation added for combo boxes that have singleSelection: {{ asPlainText: true }}
  2. Truncation restored for all combo box pills when the length of the text exceeds with width of the pill

QA

  1. View the basic combo box demo (https://eui.elastic.co/pr_7193/#/forms/combo-box) and add the option beginning with Pandora to your selected options. This pill should truncate.
  2. View the single selection demo (https://eui.elastic.co/pr_7193/#/forms/combo-box#single-selection) and add the option beginning with Pandora. This plain text should truncate.

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
  • Code quality checklist
  • Release checklist
    • A changelog entry exists and is marked appropriately.
    • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
  • Designer checklist
    • Updated the Figma library counterpart

@breehall
[EuiComboBox] Wrap EuiComboBoxPill content in a span to allow long te…
c2153d9 
…xt to truncate. .euiBadge__text normally text truncates, but because we set it to flex to align prepend/append it breaks and we need to restore it manually.
@breehall breehall changed the title [EuiComboBox] Wrap EuiComboBoxPill content in a span to allow long te… [EuiComboBox] Allow ComboBoxPill components to truncate when displaying long text Sep 14, 2023
@breehall breehall marked this pull request as ready for review September 14, 2023 20:58
@breehall breehall requested a review from cee-chen September 18, 2023 19:31
cee-chen
cee-chen approved these changes Sep 18, 2023
View reviewed changes
Copy link
Contributor

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Great work on this Bree!

@breehall breehall enabled auto-merge (squash) September 18, 2023 19:34
@cee-chen
Copy link
Contributor

Going to hit auto-merge on this, as I'd like to get it in with this week's release alongside with #7028 (they're both combobox and truncation related)

@kibanamachine
Copy link

Preview staging links for this PR:

@breehall breehall merged commit dd9e512 into elastic:main Sep 18, 2023
1 check passed
@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

@cee-chen cee-chen mentioned this pull request Sep 20, 2023
Merged
jbudz pushed a commit to elastic/kibana that referenced this pull request Sep 27, 2023
@cee-chen @patrykkopycinski @janmonschke
Upgrade EUI to v88.5.0 (#166868)
581b30b 
`v88.3.0`⏩`v88.5.0`

closes #151514

---

## [`88.5.0`](https://github.com/elastic/eui/tree/v88.5.0)

- Updated `EuiCallOut` with a new `onDismiss` prop
([#7156](elastic/eui#7156))
- Added a new `renderCustomToolbar` prop to `EuiDataGrid`, which allows
custom rendering of the toolbar.
([#7190](elastic/eui#7190))
- Added a new `allowResetButton` prop to
`toolbarVisibility.showDisplaySelector` of `EuiDataGrid`, which allows
hiding the "Reset to default" button from the display settings popover.
([#7190](elastic/eui#7190))
- Added a new `additionalDisplaySettings` prop to
`toolbarVisibility.showDisplaySelector` of `EuiDataGrid`, which allows
rendering extra settings inside the display settings popover.
([#7190](elastic/eui#7190))
- Updated `EuiDataGrid`'s toolbar display settings button icon
([#7190](elastic/eui#7190))
- Updated `EuiTextTruncate` with significantly improved iteration
performance. Removed `measurementRenderAPI` prop, as `EuiTextTruncation`
now only uses more performant canvas render API
([#7210](elastic/eui#7210))
- Updated `EuiPopover` with a new configurable `repositionToCrossAxis`
prop ([#7211](elastic/eui#7211))
- Updated `EuiDatePicker` to support `compressed` input styling
([#7218](elastic/eui#7218))
- Added `gradient` and `palette` icon glyphs.
([#7220](elastic/eui#7220))

**Bug fixes**

- Fixed `EuiPopover`'s missing animations on popover close
([#7211](elastic/eui#7211))
- Fixed `EuiInputPopover` anchoring to the wrong side and missing
shadows on smaller screens
([#7211](elastic/eui#7211))
- Fixed `EuiSuperDatePicker` icon spacing on the quick select button
([#7217](elastic/eui#7217))
- Fixed a missing type in `EuiMarkdownEditor`'s default processing
plugins ([#7221](elastic/eui#7221))


## [`88.4.1`](https://github.com/elastic/eui/tree/v88.4.1)

**Bug fixes**

- Fixed missing `className`s on `EuiTextTruncate`
([#7212](elastic/eui#7212))
- Fixed `title`s on `EuiComboBox` dropdown options to always be present
([#7212](elastic/eui#7212))
- Fixed `EuiComboBox` truncation issues when search is an empty space
([#7212](elastic/eui#7212))

## [`88.4.0`](https://github.com/elastic/eui/tree/v88.4.0)

- Updated `EuiComboBox` to allow configuring text truncation behavior
via `truncationProps`. These props can be set on the entire combobox as
well as on on individual dropdown options.
([#7028](elastic/eui#7028))
- Updated `EuiInMemoryTable` with a new `searchFormat` prop (defaults to
`eql`). When setting this prop to `text`, the built-in search bar will
ignore EQL syntax and allow searching for plain strings with special
characters and symbols.
([#7175](elastic/eui#7175))

**Bug fixes**

- `EuiComboBox` now always shows the highlighted search text, even on
truncated text ([#7028](elastic/eui#7028))
- Fixed missing i18n in `EuiSearchBar`'s default placeholder and
aria-label text ([#7175](elastic/eui#7175))
- Fixed the inline compressed styles of `EuiDescriptionListTitle` to use
a taller line-height for readability
([#7185](elastic/eui#7185))
- Fixed `EuiComboBox` to correctly truncate selected items when
displayed as pills and plain text
([#7193](elastic/eui#7193))

**Accessibility**

- Added `aria-current` attribute to `EuiTablePagination`
([#7186](elastic/eui#7186))

**CSS-in-JS conversions**

- Converted `EuiDroppable` and `EuiDraggable` to Emotion; Removed
`$euiDragAndDropSpacing` Sass variables
([#7187](elastic/eui#7187))

---------

Co-authored-by: Patryk Kopycinski <[email protected]>
Co-authored-by: Jan Monschke <[email protected]>
Co-authored-by: Thomas Watson <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@cee-chen cee-chen cee-chen approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[EuiComboBox] Should truncate single value selection
4 participants
@breehall @cee-chen @kibanamachine @elasticmachine