[EuiBreadcrumb] Fix styling on application types with popovers + perf improvements
#7580
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
cee-chen
changed the title
application types with popoversapplication types with popovers + perf improvements
22 tasks
- separate `truncation` styles from breadcrumb type styles (truncation styles go on the inner text, breadcrumb styles go on the outer element) - create new separate `EuiBreadcrumbPopover` subcomponent for easier dev readability and one-off behavior
cee-chen
force-pushed
the
breadcrumb/application-style-fix
branch
from
cabbf97
to
4df60c5
Compare
cee-chen
commented
Mar 14, 2024
mgadewoll
reviewed
Mar 14, 2024
…types into a separate file - the breadcrumb types weren't super married to the actual component usage in any case + move unit tests for content to its own file, add new basic it renders test for other components
|
Preview staging links for this PR:
|
💚 Build Succeeded
History
|
mgadewoll
reviewed
Mar 18, 2024
mgadewoll
approved these changes
Mar 18, 2024
|
Merging to get this fix in for today's release |
cee-chen
added a commit
to elastic/kibana
that referenced
this pull request
Mar 22, 2024
`v93.3.0`⏩ `v93.4.0` --- ## [`v93.4.0`](https://github.com/elastic/eui/releases/v93.4.0) - Added the following properties to `EuiButtonGroup`'s `options` configs: `toolTipContent`, `toolTipProps`, and `title`. These new properties allow wrapping buttons in `EuiToolTips`, and additionally customizing or disabling the native browser `title` tooltip. ([#7461](elastic/eui#7461)) - Enhanced `EuiResizeObserver` and `useResizeObserver`'s performance to not trigger page reflows on resize event ([#7575](elastic/eui#7575)) - Updated `EuiSuperUpdateButton` to support custom button text via an optional `children` prop ([#7576](elastic/eui#7576)) **Bug fixes** - Fixed `EuiFlyout` to not repeatedly remove/add a body class on resize ([#7462](elastic/eui#7462)) - Fixed `EuiToast` title text to wrap instead of overflowing out of the container ([#7568](elastic/eui#7568)) - Fixed a visual bug with `EuiHeaderBreadcrumbs` with popovers ([#7580](elastic/eui#7580)) **Deprecations** - Deprecated `euiPalettePositive` and `euiPaletteNegative` in favour of a more culturally inclusive `euiPaletteGreen` and `euiPaletteRed` ([#7570](elastic/eui#7570)) - Deprecated all charts theme exports in favor of `@elastic/charts` exports: ([#7572](elastic/eui#7572)) - Deprecated `EUI_CHARTS_THEME_<DARK|LIGHT>` in favor of `<DARK|LIGHT>_THEME` from `@elastic/charts`. ([#7572](elastic/eui#7572)) - Deprecated `EUI_SPARKLINE_THEME_PARTIAL` in favor of `useSparklineOverrides` theme from the kibana `charts` plugin `theme` service. **Accessibility** - Updated `EuiModal` to set an `aria-modal` attribute and a default `dialog` role ([#7564](elastic/eui#7564)) - Updated `EuiConfirmModal` to set a default `alertdialog` role ([#7564](elastic/eui#7564)) - Fixed `EuiModal` and `EuiConfirmModal` to properly trap Safari+VoiceOver's virtual cursor ([#7564](elastic/eui#7564))
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
closes #7577
The underlying fix is to separate out the breadcrumb CSS from the truncation CSS and passing them to separate DOM elements for breadcrumbs with popovers. The final diff is a bit hard to follow because I ended up just pulling out breadcrumbs with popovers to a separate subcomponent, apologies for that 😬
QA
maxcontrol to2...collapsed button does not look brokenbreadcrumbsarray and toggle the last breadcrumb. Click the+button and add a field:popoverContent: 'anything'General checklist