Skip to content

[Lens] Use flyout toolbar for visualization configuration: appearance, titles and text, axis, and legend settings#240804

Merged
mariairiartef merged 34 commits intoelastic:mainfrom
mariairiartef:lens/238794-2
Nov 4, 2025
Merged

[Lens] Use flyout toolbar for visualization configuration: appearance, titles and text, axis, and legend settings#240804
mariairiartef merged 34 commits intoelastic:mainfrom
mariairiartef:lens/238794-2

Conversation

@mariairiartef
Copy link
Copy Markdown
Contributor

@mariairiartef mariairiartef commented Oct 27, 2025

Summary

Enables flyout toolbar in dashboard visualization in-line editing and Lens workspace, for appearance, titles and text, axis and legend settings configuration.

Closes #238794

Important

In #240088, we will delete all the deprecated components related to the previously used toolbar popover.

Dashboard visualization in-line editing

Screen.Recording.2025-10-31.at.07.44.54.mov

Lens workspace

Screen.Recording.2025-10-31.at.07.43.08.mov

Checklist

Release Notes

In dashboard visualization in-line editing and Lens workspace, the 'Appearance', 'Titles and text', 'Axis', and 'Legend' settings have been moved from a popover into a dedicated flyout panel.

@mariairiartef mariairiartef force-pushed the lens/238794-2 branch 4 times, most recently from 28d6c85 to 9393b59 Compare October 27, 2025 13:51
@mariairiartef mariairiartef self-assigned this Oct 27, 2025
@mariairiartef mariairiartef added release_note:enhancement Feature:Lens backport:skip This PR does not require backporting Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// labels Oct 27, 2025
@mariairiartef
Copy link
Copy Markdown
Contributor Author

/ci

4 similar comments
@mariairiartef
Copy link
Copy Markdown
Contributor Author

/ci

@mariairiartef
Copy link
Copy Markdown
Contributor Author

/ci

@mariairiartef
Copy link
Copy Markdown
Contributor Author

/ci

@mariairiartef
Copy link
Copy Markdown
Contributor Author

/ci

@gvnmagni
Copy link
Copy Markdown

It looks great, I noticed one detail (bear with me) which might not be in our control, I am not sure if that is a flyout thing or we can fix it on our side...

I noticed that whenever we open any of these flyouts (legend or style) there is a double border on the left side that shouldn't be there

Screenshot 2025-10-29 at 14 58 06
@mariairiartef
Copy link
Copy Markdown
Contributor Author

It looks great, I noticed one detail (bear with me) which might not be in our control, I am not sure if that is a flyout thing or we can fix it on our side...

I noticed that whenever we open any of these flyouts (legend or style) there is a double border on the left side that shouldn't be there

Screenshot 2025-10-29 at 14 58 06

This happens whenever we open a secondary flyout. We can try to fix this issue, if posible, on a separate PR

@mariairiartef
Copy link
Copy Markdown
Contributor Author

/ci

@mariairiartef
Copy link
Copy Markdown
Contributor Author

/ci

@mariairiartef mariairiartef marked this pull request as ready for review October 30, 2025 07:00
@mariairiartef mariairiartef requested review from a team as code owners October 30, 2025 07:00
@elasticmachine
Copy link
Copy Markdown
Contributor

Pinging @elastic/kibana-visualizations (Team:Visualizations)

@mariairiartef mariairiartef changed the title [Lens] Use flyout toolbar Oct 31, 2025
@mariairiartef mariairiartef changed the title [Lens] Use flyout toolbar for appearance, titles and text, axis and legend settings configuration Oct 31, 2025
Copy link
Copy Markdown
Contributor

@markov00 markov00 left a comment

Choose a reason for hiding this comment

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

Changes LGTM, tested locally and works perfectly. Left some nit comments.
Thanks also for some nice cleanup done in various files

@mariairiartef mariairiartef enabled auto-merge (squash) November 3, 2025 14:06
@elasticmachine
Copy link
Copy Markdown
Contributor

elasticmachine commented Nov 3, 2025

💔 Build Failed

Failed CI Steps

Test Failures

  • [job] [logs] Jest Tests #11 / TabbedContent correctly duplicates tabs with regex special characters in the label

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
lens 1440 1438 -2

Async chunks

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

id before after diff
lens 1.5MB 1.5MB -51.0B

History

cc @mariairiartef

@mariairiartef mariairiartef merged commit 3faf8f7 into elastic:main Nov 4, 2025
12 checks passed
wildemat pushed a commit to wildemat/kibana that referenced this pull request Nov 5, 2025
…, titles and text, axis, and legend settings (elastic#240804)

## Summary

Enables flyout toolbar in **dashboard visualization in-line editing**
and **Lens workspace**, for appearance, titles and text, axis and legend
settings configuration.

Closes elastic#238794

> [!IMPORTANT]
> In elastic#240088, we will delete all
the deprecated components related to the previously used toolbar
popover.

### Dashboard visualization in-line editing


https://github.com/user-attachments/assets/a2e54633-bb1a-4796-8682-70b2c9beb1be

### Lens workspace


https://github.com/user-attachments/assets/7eb2d165-180e-491c-a1d3-ea461d7c6a7e


## Checklist

- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [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
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [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)
- [x] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

### Release Notes

In **dashboard visualization in-line editing** and **Lens workspace**,
the 'Appearance', 'Titles and text', 'Axis', and 'Legend' settings have
been moved from a popover into a dedicated flyout panel.

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
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:Lens needs_docs release_note:enhancement Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// v9.3.0

8 participants