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

[Dashboard] Compressed Styles for Controls #190636

Merged
merged 22 commits into from
Sep 3, 2024

Conversation

rshen91
Copy link
Contributor

@rshen91 rshen91 commented Aug 15, 2024

Summary

Closes #190355

This builds off @ryankeairns work in #189839 to have the compressed styles for controls

Applied to new controls in example apps:

Screenshot 2024-08-27 at 1 45 45 PM

Applied to existing dashboard controls:

Screenshot 2024-08-27 at 1 35 25 PM

@rshen91 rshen91 changed the title [Dashboard] Compressed Styles for Controls and Inputs [Dashboard] Compressed Styles for Controls Aug 15, 2024
@rshen91 rshen91 self-assigned this Aug 27, 2024
@rshen91 rshen91 added the Project:Dashboard Usability Related to the Dashboard Usability initiative label Aug 27, 2024
@rshen91 rshen91 added loe:small Small Level of Effort v8.16.0 labels Aug 27, 2024
@rshen91 rshen91 marked this pull request as ready for review August 27, 2024 19:46
@rshen91 rshen91 requested review from a team as code owners August 27, 2024 19:46
@rshen91 rshen91 added release_note:skip Skip the PR/issue when compiling release notes Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas labels Aug 27, 2024
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-presentation (Team:Presentation)

@rshen91 rshen91 added release_note:enhancement and removed release_note:skip Skip the PR/issue when compiling release notes labels Aug 27, 2024
Copy link
Contributor

@Heenawter Heenawter left a comment

Choose a reason for hiding this comment

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

Can we also change the size of the drag preview? It feels weird that it is now taller than the controls its meant to represent :)

Aug-29-2024 09-00-20

@nreese
Copy link
Contributor

nreese commented Sep 3, 2024

Main now uses react embeddable control group and we are activity working on removing the legacy control group. Changes to legacy control group should be discarded as they are not needed.

Copy link
Contributor

@andreadelrio andreadelrio left a comment

Choose a reason for hiding this comment

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

Tested locally. Design changes LGTM, thanks!

Copy link
Contributor

@Heenawter Heenawter 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 + code review.

@rshen91 rshen91 enabled auto-merge (squash) September 3, 2024 20:44
@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
controls 561.5KB 561.6KB +128.0B

Page load bundle

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

id before after diff
dashboard 42.4KB 42.4KB -38.0B

History

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

cc @rshen91

@rshen91 rshen91 merged commit 03bb0b2 into elastic:main Sep 3, 2024
19 checks passed
@kibanamachine kibanamachine added the backport:skip This commit does not require backporting label Sep 3, 2024
@rshen91 rshen91 deleted the compressed-inputs branch September 3, 2024 20:48
logeekal added a commit that referenced this pull request Sep 9, 2024
…ols on Alerts Page. (#192094)

## Summary

As stated in #192092 , the labels of filter controls were mis-aligned.
This was due to some changes in EUI were conflicting with our custom
styling. This PR removes the custom styling.

### Before


![grafik](https://github.com/user-attachments/assets/f167f909-6fff-442e-9ed8-a9781bb52bd1)

### Issues with Error state

It looks like recent PR #190636 on 03-Sept made the controls compact but
the error state was left out. This PR fixes that. I would request
@elastic/kibana-presentation team to review it once.
 
<img width="1920" alt="grafik"
src="https://github.com/user-attachments/assets/4025c79f-2602-4221-a136-436b6759096f">


### After

Below video shows fixes in success, loading and error states.
@elastic/response-ops team, Could you please check in other areas as
well where these filters are used. Thanks.



https://github.com/user-attachments/assets/7e0f6035-171c-4a4b-99c6-116ad577a019
gergoabraham pushed a commit to gergoabraham/kibana that referenced this pull request Sep 13, 2024
…ols on Alerts Page. (elastic#192094)

## Summary

As stated in elastic#192092 , the labels of filter controls were mis-aligned.
This was due to some changes in EUI were conflicting with our custom
styling. This PR removes the custom styling.

### Before


![grafik](https://github.com/user-attachments/assets/f167f909-6fff-442e-9ed8-a9781bb52bd1)

### Issues with Error state

It looks like recent PR elastic#190636 on 03-Sept made the controls compact but
the error state was left out. This PR fixes that. I would request
@elastic/kibana-presentation team to review it once.
 
<img width="1920" alt="grafik"
src="https://github.com/user-attachments/assets/4025c79f-2602-4221-a136-436b6759096f">


### After

Below video shows fixes in success, loading and error states.
@elastic/response-ops team, Could you please check in other areas as
well where these filters are used. Thanks.



https://github.com/user-attachments/assets/7e0f6035-171c-4a4b-99c6-116ad577a019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport:skip This commit does not require backporting 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 v8.16.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Dashboard Usability] Use compressed inputs for controls
7 participants