Skip to content

[8.x] [Embeddable] Fix presentation panel styles (#210113)#210710

Merged
Heenawter merged 2 commits intoelastic:8.xfrom
Heenawter:backport/8.x/pr-210113
Feb 12, 2025
Merged

[8.x] [Embeddable] Fix presentation panel styles (#210113)#210710
Heenawter merged 2 commits intoelastic:8.xfrom
Heenawter:backport/8.x/pr-210113

Conversation

@Heenawter
Copy link
Copy Markdown
Contributor

Backport

This will backport the following commits from main to 8.x:

Questions ?

Please refer to the Backport tool documentation

## Summary

When elastic#207275 merged, some Security
Cypress tests started failing because the embeddables were no longer
taking up any width in their containers. This was caused by us switching
over to using the CSS container type `inline-size` on the hover anchor
wrapper, which makes it so that it can no longer be sized to its
contents (see [this
comment](https://stackoverflow.com/a/73980194/28754956) for a really
good explanation). Instead, the width of the `PresentationPanel` needs
to be set **by the parent** - so, by applying the `min-width` to the
Metric wrapper rather than the Lens embeddable, the metric now takes up
the expected width:

| Before | After |
|--------|--------|
|
![image](https://github.com/user-attachments/assets/0aa1d563-e50f-4a3d-a91e-3555b7e0d48d)
|
![image](https://github.com/user-attachments/assets/1fa9d728-b84e-4c1a-958f-76734ff6c95f)
|

When doing this work, I noticed that, because we added a delay to hiding
the hover actions, there was a slightly jarring transition when hovering
over panels without `border` enabled. So, I fixed this by adding a
transition to the border on the panel as well, so that it matches the
animation on the hover actions:

| Before | After |
|--------|--------|
| ![Feb-07-2025
11-09-33](https://github.com/user-attachments/assets/9b2a0c67-47fe-46a5-81e8-42231ed7b0a3)
| ![Feb-07-2025
11-08-26](https://github.com/user-attachments/assets/35d50475-174c-4cba-8c42-76521f79f235)
|

### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

(cherry picked from commit 3716441)

# Conflicts:
#	x-pack/test/security_solution_cypress/cypress/e2e/explore/inspect/inspect_button.cy.ts
@Heenawter Heenawter added the backport This PR is a backport of another PR label Feb 11, 2025
@Heenawter Heenawter enabled auto-merge (squash) February 11, 2025 23:49
@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
presentationPanel 36.4KB 36.6KB +228.0B
securitySolution 18.7MB 18.7MB +15.0B
total +243.0B

History

@Heenawter Heenawter merged commit 004dc31 into elastic:8.x Feb 12, 2025
@Heenawter Heenawter deleted the backport/8.x/pr-210113 branch February 12, 2025 17:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport This PR is a backport of another PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants