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.

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

[Lens] Improve Toolbar Responsiveness #130175

Conversation

MichaelMarcialis
Copy link
Contributor

@MichaelMarcialis MichaelMarcialis commented Apr 13, 2022

Summary

This PR fixes issues that cause the Lens toolbar to appear broken/odd at smaller viewport sizes. Notable changes include:

  • Reduced overall toolbar flex gutters.
  • Corrected some problematic flex wrapping and alignment behaviors.
  • Converted some toolbar button text to screen-reader-only (i.e. visually hide) at certain breakpoints.

Closes issue #128428.

Screenshots of the changes at various viewport sizes

image

image

image

image

Checklist

Delete any items that are not applicable to this PR.

@MichaelMarcialis MichaelMarcialis added Team:Visualizations Visualization editors, elastic-charts and infrastructure release_note:skip Skip the PR/issue when compiling release notes Feature:Lens auto-backport Deprecated - use backport:version if exact versions are needed v8.2.0 v8.3.0 labels Apr 13, 2022
@MichaelMarcialis MichaelMarcialis linked an issue Apr 13, 2022 that may be closed by this pull request
@MichaelMarcialis MichaelMarcialis marked this pull request as ready for review April 13, 2022 19:10
@MichaelMarcialis MichaelMarcialis requested review from a team as code owners April 13, 2022 19:10
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-vis-editors @elastic/kibana-vis-editors-external (Team:VisEditors)

@kibana-ci
Copy link
Collaborator

💚 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
lens 1.0MB 1.1MB +6.2KB

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

Copy link
Contributor

@drewdaemon drewdaemon left a comment

Choose a reason for hiding this comment

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

Way better. Thank you!

Copy link
Contributor

@stratoula stratoula left a comment

Choose a reason for hiding this comment

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

This looks much better Michael, thank you! LGTM!

Copy link
Contributor

@ryankeairns ryankeairns left a comment

Choose a reason for hiding this comment

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

LGTM

@MichaelMarcialis MichaelMarcialis merged commit d5d798f into elastic:main Apr 14, 2022
@MichaelMarcialis MichaelMarcialis deleted the bug/128428/improve-toolbar-responsiveness branch April 14, 2022 13:56
kibanamachine pushed a commit that referenced this pull request Apr 14, 2022
* reduce flex gutters, fix wrapping behavior, etc.

* hide text at medium and lower bps for better fit

* adjust full screen toolbar styles

* expand hiding of button text to large bp

* adjust flex item alignment and wrapping

(cherry picked from commit d5d798f)
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
8.2

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

kibanamachine added a commit that referenced this pull request Apr 14, 2022
* reduce flex gutters, fix wrapping behavior, etc.

* hide text at medium and lower bps for better fit

* adjust full screen toolbar styles

* expand hiding of button text to large bp

* adjust flex item alignment and wrapping

(cherry picked from commit d5d798f)

Co-authored-by: Michael Marcialis <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
auto-backport Deprecated - use backport:version if exact versions are needed Feature:Lens release_note:skip Skip the PR/issue when compiling release notes Team:Visualizations Visualization editors, elastic-charts and infrastructure v8.2.0 v8.3.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Lens] Improve Toolbar Responsiveness
7 participants