[charts] Improve default tooltip content (#12257)

mui · Apr 23, 2024 · 06ba75a · 06ba75a
1 parent c430321
commit 06ba75a
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 15 deletions.
diff --git a/packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts b/packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts
@@ -1,15 +1,15 @@
-import Box from '@mui/system/Box';
 import { styled } from '@mui/material/styles';
+import { shouldForwardProp } from '@mui/system';
 import { chartsTooltipClasses } from './chartsTooltipClasses';
 
 export const ChartsTooltipPaper = styled('div', {
   name: 'MuiChartsTooltip',
   slot: 'Container',
 })(({ theme }) => ({
+  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,
 }));
 
@@ -41,15 +41,13 @@ export const ChartsTooltipCell = styled('td', {
 })(({ theme }) => ({
   verticalAlign: 'middle',
   color: (theme.vars || theme).palette.text.secondary,
-
   [`&.${chartsTooltipClasses.labelCell}`]: {
     paddingLeft: theme.spacing(1),
   },
   [`&.${chartsTooltipClasses.valueCell}`]: {
     paddingLeft: theme.spacing(4),
     color: (theme.vars || theme).palette.text.primary,
   },
-
   'td:first-of-type&': {
     paddingLeft: theme.spacing(2),
   },
@@ -58,15 +56,16 @@ export const ChartsTooltipCell = styled('td', {
   },
 }));
 
-// eslint-disable-next-line material-ui/no-styled-box
-export const ChartsTooltipMark = styled(Box, {
+export const ChartsTooltipMark = styled('div', {
   name: 'MuiChartsTooltip',
   slot: 'Mark',
-})<{ ownerState: { color: string } }>(({ theme, ownerState }) => ({
+  shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'color',
+})<{ color: string }>(({ theme, color }) => ({
   width: theme.spacing(1),
   height: theme.spacing(1),
   borderRadius: '50%',
-  backgroundColor: ownerState.color,
+  boxShadow: theme.shadows[1],
+  backgroundColor: color,
   borderColor: (theme.vars || theme).palette.background.paper,
   border: `solid ${(theme.vars || theme).palette.background.paper} ${theme.spacing(0.25)}`,
   boxSizing: 'content-box',

diff --git a/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx
@@ -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}
+                      color={getColor(dataIndex) ?? color}
                       className={classes.mark}
                     />
                   </ChartsTooltipCell>
-
                   <ChartsTooltipCell className={clsx(classes.labelCell, classes.cell)}>
                     {label ? <Typography>{label}</Typography> : null}
                   </ChartsTooltipCell>
-
                   <ChartsTooltipCell className={clsx(classes.valueCell, classes.cell)}>
                     <Typography>{formattedValue}</Typography>
                   </ChartsTooltipCell>

diff --git a/packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx
@@ -41,13 +41,11 @@ function DefaultChartsItemTooltipContent<T extends ChartSeriesType = ChartSeries
         <tbody>
           <ChartsTooltipRow className={classes.row}>
             <ChartsTooltipCell className={clsx(classes.markCell, classes.cell)}>
-              <ChartsTooltipMark ownerState={{ color }} className={classes.mark} />
+              <ChartsTooltipMark color={color} className={classes.mark} />
             </ChartsTooltipCell>
-
             <ChartsTooltipCell className={clsx(classes.labelCell, classes.cell)}>
               {displayedLabel}
             </ChartsTooltipCell>
-
             <ChartsTooltipCell className={clsx(classes.valueCell, classes.cell)}>
               {formattedValue}
             </ChartsTooltipCell>