Skip to content

[charts] Update Tooltip style #15630

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

Merged
merged 4 commits into from
Dec 9, 2024

Conversation

alexfauquette
Copy link
Member

@alexfauquette alexfauquette commented Nov 27, 2024

Implement the new default styling of tooltip

https://www.figma.com/design/upttiqJUQYGUu3xo6w7COx/Design-refinement?node-id=46-515&node-type=frame&t=kk9pUO7rSFzQXLYG-0

Some before/after screenshots

before after
image image
image image
image image
image image

Changelog

  • The default styling of the charts tooltip has been updated.

@alexfauquette alexfauquette added breaking change component: charts This is the name of the generic UI component, not the React module! design This is about UI or UX design, please involve a designer labels Nov 27, 2024
@alexfauquette alexfauquette changed the title update tooltip style [charts] Update tooltip style Nov 27, 2024
Copy link

codspeed-hq bot commented Nov 27, 2024

CodSpeed Performance Report

Merging #15630 will not alter performance

Comparing alexfauquette:update-tooltip-design (8c23d0a) with master (c185e2f)

Summary

✅ 6 untouched benchmarks

@alexfauquette alexfauquette changed the title [charts] Update tooltip style [charts] Update Tooltip style Nov 27, 2024
@mui-bot
Copy link

mui-bot commented Nov 27, 2024

Deploy preview: https://deploy-preview-15630--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 8c23d0a

Copy link
Member

@JCQuintas JCQuintas left a comment

Choose a reason for hiding this comment

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

This deals with the

  • "popper" styles
  • removing the shadow around the "series colors"
  • decreasing whitespace around values

What is missing

  • Different "color indicator" shapes for different graphs
  • I feel like the first picture should me more similar to this but @noraleonte should be able to confirm 😃

@alexfauquette
Copy link
Member Author

Different "color indicator" shapes for different graphs

Yes, I keep that one is a bit more technical so I prefer to keep it in a distinct PR. Notice it will also impact the legend.

I feel like the first picture should me more similar to this.

I agree mine feels a bit weird. Maybe a min-width could solve that

Copy link

github-actions bot commented Dec 4, 2024

This pull request has conflicts, please resolve those before we can evaluate the pull request.

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 4, 2024
@noraleonte
Copy link
Contributor

Looks like a nice first step towards the redesign 🎉 🚀

I'm fine with doing the different "color indicator" shapes for different graphs in a follow-up 👌

I agree mine feels a bit weird. Maybe a min-width could solve that

Yes, I would definitely add a min width to the tooltip. The new design should work well both with 'smaller' labels and longer ones. Spacing it out with a min-width could solve this 🙈
A few additional notes:

  • What font-sizes do we use for the labels? They feel a bit bloated to me 🤔
  • Are we using Roboto for the charts? The font-family looks off to me... Not sure if the plan for charts is to go towards a more material-ish default, but maybe we should use the same font-family as in the other component libraries
    image

@JCQuintas
Copy link
Member

JCQuintas commented Dec 9, 2024

  • using Roboto

Yeah they use the same style, but one is rendered in SVG and the other in HTML, so there are some differences there 🙃

Should be handled in #15733

@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 9, 2024
@JCQuintas JCQuintas merged commit 79bda06 into mui:master Dec 9, 2024
19 checks passed
@JCQuintas
Copy link
Member

I intend to do a pass on tooltips after legends are done. So we can use the correct mark shapes.

LukasTy pushed a commit to LukasTy/mui-x that referenced this pull request Dec 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
breaking change component: charts This is the name of the generic UI component, not the React module! design This is about UI or UX design, please involve a designer
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants