Skip to content

[Dashboard usability] Shiny add panel highlight#223614

Merged
ThomThomson merged 7 commits intoelastic:mainfrom
ThomThomson:dashboard/sparkleHighlight
Jun 17, 2025
Merged

[Dashboard usability] Shiny add panel highlight#223614
ThomThomson merged 7 commits intoelastic:mainfrom
ThomThomson:dashboard/sparkleHighlight

Conversation

@ThomThomson
Copy link
Contributor

@ThomThomson ThomThomson commented Jun 12, 2025 •
edited
Loading

Summary

✨ ✨ No one asked for this but I did it anyway! ✨ ✨

Now, when you add a panel, there is a neat shiny Borealis-ish effect.

Light mode

Light mode

Dark mode

Dark Mode

How does it work?

This effect is made up of 2 parts:

  1. A gradient outline that rotates
  2. A blurred gradient background that makes it look like the gradient in step 2 is giving off light

Other changes

This PR also:

  1. Makes the add from library flyout push so you can see what you're doing.
  2. Makes a change to the no-margins styles for Dashboards so the outline retains its dashes when hover leaves.

noMargins
@ThomThomson ThomThomson added Feature:Dashboard Dashboard related features Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas t// loe:small Small Level of Effort impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. Project:Dashboard Usability Related to the Dashboard Usability initiative labels Jun 12, 2025
@ThomThomson
Copy link
Contributor Author

ThomThomson commented Jun 12, 2025

/ci
@ThomThomson
Copy link
Contributor Author

ThomThomson commented Jun 12, 2025

/ci
@ThomThomson
Copy link
Contributor Author

ThomThomson commented Jun 16, 2025

/ci
@ThomThomson ThomThomson marked this pull request as ready for review June 16, 2025 20:44
@ThomThomson ThomThomson requested a review from a team as a code owner June 16, 2025 20:44
@elasticmachine
Copy link
Contributor

elasticmachine commented Jun 16, 2025

Pinging @elastic/kibana-presentation (Team:Presentation)
@ThomThomson ThomThomson added the backport:skip This PR does not require backporting label Jun 16, 2025
mbondyra
mbondyra approved these changes Jun 16, 2025
View reviewed changes
Copy link
Contributor

@mbondyra mbondyra left a comment

Choose a reason for hiding this comment

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

🪄 ✨ Tested on Chrome and FF and both look great! Very cool!
@elasticmachine
Copy link
Contributor

elasticmachine commented Jun 16, 2025

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
dashboard 669 670 +1

Async chunks

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

id before after diff
dashboard 615.0KB 616.3KB +1.3KB
presentationPanel 95.7KB 95.7KB +31.0B
total +1.3KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id before after diff
embeddable 16.7KB 16.7KB +12.0B

History
@ThomThomson ThomThomson merged commit f0a9a9c into elastic:main Jun 17, 2025
10 checks passed
@ryankeairns
Copy link
Contributor

ryankeairns commented Jun 26, 2025

This is neat. Going to track it as a possible addition to EuiPanel
@mbondyra mbondyra mentioned this pull request Jul 11, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport:skip This PR does not require backporting Feature:Dashboard Dashboard related features impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. loe:small Small Level of Effort Project:Dashboard Usability Related to the Dashboard Usability initiative release_note:enhancement Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas t// v9.1.0

5 participants

@ThomThomson @elasticmachine @ryankeairns @mbondyra @kibanamachine