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.

Sign up for GitHub

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

Jump to bottom

[Infra UI] Consistency in the popover styling #165960

Closed
crespocarlos opened this issue Sep 7, 2023 · 6 comments · Fixed by #166189
Closed

[Infra UI] Consistency in the popover styling #165960

crespocarlos opened this issue Sep 7, 2023 · 6 comments · Fixed by #166189
Assignees
@jennypavlova
Labels
Feature:Metrics UI Metrics UI feature Feature:ObsHosts Hosts feature within Observability Team:Infra Monitoring UI - DEPRECATED DEPRECATED - Label for the Infra Monitoring UI team. Use Team:obs-ux-infra_services

Comments

@crespocarlos
Copy link
Contributor

Summary

The tooltips metadata and processes tooltips don't match with those of the rest of the Host details view and Asset Details.

Metadata and Processes tooltips

Image

Image

Flyout tooltips

Image

Image

Another example

Image

The Metadata and Processes tooltips have bigger paddings and larger font-size. Ideally, there should be only one style for the tooltips, therefore we'll need to decide which of both styles will be the default one.

Acceptance Criteria

  • Tooltip styles should be the same across the Host View page and Asset Details
@crespocarlos crespocarlos added the Team:Infra Monitoring UI - DEPRECATED DEPRECATED - Label for the Infra Monitoring UI team. Use Team:obs-ux-infra_services label Sep 7, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/infra-monitoring-ui (Team:Infra Monitoring UI)

@crespocarlos crespocarlos added Feature:Metrics UI Metrics UI feature Feature:ObsHosts Hosts feature within Observability labels Sep 7, 2023
@crespocarlos
Copy link
Contributor Author

cc @roshan-elastic @kkurstak

@crespocarlos crespocarlos changed the title [Infra UI] Consistency in the popover font-size and padding [Infra UI] Consistency in the popover styling Sep 7, 2023
@jennypavlova
Copy link
Member

@crespocarlos I added the extra space there based on the Figma design added in this issue. I see now that it's not the same as the others but I am not sure which should be the correct one 🤔
So do we actually want to add extra space to the other tooltips or do we want to decrease the space in the new popups?

@crespocarlos
Copy link
Contributor Author

hey @jennypavlova. I'm not sure which one would be the best either. Both look fine, tbh. Pinging @kkurstak so she can make a decision about this.

@kkurstak
Copy link

kkurstak commented Sep 8, 2023

Hi guys, thanks for the ping. In the new designs I just used the defaults from the library. Double checked the source of truth [EUI] and it does not make a good job at helping us here "Adjust the title, content and footer padding via Auto Layout. The available sizes are 0, 8, 16, and 24." ...
Let's go with the 8px paddings - I would usually prefer the 16px (more breathing space), but I've checked other parts of Kibana and the popovers and tooltips usually go with the 8px padding - so let's keep consistent. @crespocarlos @jennypavlova

@kkurstak
Copy link

kkurstak commented Sep 8, 2023

Apologies about my mistake in the new designs - will keep this in mind the next time.

@jennypavlova jennypavlova self-assigned this Sep 11, 2023
@jennypavlova jennypavlova mentioned this issue Sep 11, 2023
Merged
jennypavlova added a commit that referenced this issue Sep 12, 2023
@jennypavlova
[Infra UI] Consistency in the popover styling (#166189)
11d88cd 
Closes #165960 
## Summary

This PR sets all popups inside host view padding to size s (8px)

### Testing

- Open the host view and check the popup size (should be 8px - size s):
<img width="1303" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/b3242de6-5644-4a1d-9f10-7b9a76269848">

- Open metadata and processes message popups - they should have the same
padding size:
   - Metadata Tab
   
<img width="1002" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/e1c157aa-ced6-4a2e-9458-a38b99328276">

   - Overview Tab
   
<img width="585" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/878c1325-28af-4b16-9ec4-93a0fc620c87">

   - Processes Tab
   
<img width="1147" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/70dfc49f-ef1a-4786-bab4-7a3715af7f85">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jennypavlova jennypavlova

Labels
Feature:Metrics UI Metrics UI feature Feature:ObsHosts Hosts feature within Observability Team:Infra Monitoring UI - DEPRECATED DEPRECATED - Label for the Infra Monitoring UI team. Use Team:obs-ux-infra_services
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Infra UI] Consistency in the popover styling jennypavlova/kibana
4 participants
@crespocarlos @jennypavlova @elasticmachine @kkurstak