-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
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
[charts] Improve default tooltip content #12257
Conversation
Deploy preview: https://deploy-preview-12257--material-ui-x.netlify.app/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The current change introduces a regression. 🙈
839b093
to
c95bd98
Compare
This comment was marked as resolved.
This comment was marked as resolved.
<ChartsTooltipMark ownerState={{ color }} className={classes.mark} /> | ||
<ChartsTooltipMark color={color} className={classes.mark} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure about ownerState
here.
@@ -50,16 +50,13 @@ function DefaultChartsAxisTooltipContent(props: ChartsAxisContentProps) { | |||
<ChartsTooltipRow key={id} className={classes.row}> | |||
<ChartsTooltipCell className={clsx(classes.markCell, classes.cell)}> | |||
<ChartsTooltipMark | |||
ownerState={{ color: getColor(dataIndex) ?? color }} | |||
boxShadow={1} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It doesn't feel like the UI should be different based on the type of tooltip. It also makes the code simpler.
boxShadow: theme.shadows[1], | ||
backgroundColor: (theme.vars || theme).palette.background.paper, | ||
color: (theme.vars || theme).palette.text.primary, | ||
transition: theme.transitions.create('box-shadow'), | ||
border: `1px solid ${(theme.vars || theme).palette.divider}`, | ||
borderRadius: theme.shape.borderRadius, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Get it closer to how https://mui.com/material-ui/react-paper/ feels.
// eslint-disable-next-line material-ui/no-styled-box | ||
export const ChartsTooltipMark = styled(Box, { | ||
export const ChartsTooltipMark = styled('div', { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Avoid expensive work, div is much faster than Box.
A few opportunities I saw looking randomly at the code.