[charts] Update Tooltip style (#15630)

Co-authored-by: Jose C Quintas Jr <[email protected]>
mui · Dec 9, 2024 · 79bda06 · 79bda06
1 parent 7eccbd0
commit 79bda06
Show file tree

Hide file tree

Showing 13 changed files with 81 additions and 14 deletions.
diff --git a/docs/pages/x/api/charts/charts-axis-tooltip-content.json b/docs/pages/x/api/charts/charts-axis-tooltip-content.json
@@ -7,6 +7,12 @@
     "import { ChartsAxisTooltipContent } from '@mui/x-charts-pro';"
   ],
   "classes": [
+    {
+      "key": "axisValueCell",
+      "className": "MuiChartsAxisTooltipContent-axisValueCell",
+      "description": "Styles applied to the axisValueCell element. Only available for axis tooltip.",
+      "isGlobal": false
+    },
     {
       "key": "cell",
       "className": "MuiChartsAxisTooltipContent-cell",

diff --git a/docs/pages/x/api/charts/charts-item-tooltip-content.json b/docs/pages/x/api/charts/charts-item-tooltip-content.json
@@ -7,6 +7,12 @@
     "import { ChartsItemTooltipContent } from '@mui/x-charts-pro';"
   ],
   "classes": [
+    {
+      "key": "axisValueCell",
+      "className": "MuiChartsItemTooltipContent-axisValueCell",
+      "description": "Styles applied to the axisValueCell element. Only available for axis tooltip.",
+      "isGlobal": false
+    },
     {
       "key": "cell",
       "className": "MuiChartsItemTooltipContent-cell",

diff --git a/docs/pages/x/api/charts/charts-tooltip-container.json b/docs/pages/x/api/charts/charts-tooltip-container.json
@@ -81,6 +81,12 @@
     "import { ChartsTooltipContainer } from '@mui/x-charts-pro';"
   ],
   "classes": [
+    {
+      "key": "axisValueCell",
+      "className": "MuiChartsTooltipContainer-axisValueCell",
+      "description": "Styles applied to the axisValueCell element. Only available for axis tooltip.",
+      "isGlobal": false
+    },
     {
       "key": "cell",
       "className": "MuiChartsTooltipContainer-cell",

diff --git a/docs/pages/x/api/charts/charts-tooltip.json b/docs/pages/x/api/charts/charts-tooltip.json
@@ -80,6 +80,12 @@
     "import { ChartsTooltip } from '@mui/x-charts-pro';"
   ],
   "classes": [
+    {
+      "key": "axisValueCell",
+      "className": "MuiChartsTooltip-axisValueCell",
+      "description": "Styles applied to the axisValueCell element. Only available for axis tooltip.",
+      "isGlobal": false
+    },
     {
       "key": "cell",
       "className": "MuiChartsTooltip-cell",

diff --git a/docs/pages/x/api/charts/heatmap-tooltip.json b/docs/pages/x/api/charts/heatmap-tooltip.json
@@ -72,6 +72,12 @@
     "import { HeatmapTooltip } from '@mui/x-charts-pro';"
   ],
   "classes": [
+    {
+      "key": "axisValueCell",
+      "className": "MuiHeatmapTooltip-axisValueCell",
+      "description": "Styles applied to the axisValueCell element. Only available for axis tooltip.",
+      "isGlobal": false
+    },
     {
       "key": "cell",
       "className": "MuiHeatmapTooltip-cell",

diff --git a/...translations/api-docs/charts/charts-axis-tooltip-content/charts-axis-tooltip-content.json b/...translations/api-docs/charts/charts-axis-tooltip-content/charts-axis-tooltip-content.json
@@ -4,6 +4,10 @@
     "classes": { "description": "Override or extend the styles applied to the component." }
   },
   "classDescriptions": {
+    "axisValueCell": {
+      "description": "Styles applied to {{nodeName}}. Only available for axis tooltip.",
+      "nodeName": "the axisValueCell element"
+    },
     "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
     "labelCell": {
       "description": "Styles applied to {{nodeName}}.",

diff --git a/...translations/api-docs/charts/charts-item-tooltip-content/charts-item-tooltip-content.json b/...translations/api-docs/charts/charts-item-tooltip-content/charts-item-tooltip-content.json
@@ -4,6 +4,10 @@
     "classes": { "description": "Override or extend the styles applied to the component." }
   },
   "classDescriptions": {
+    "axisValueCell": {
+      "description": "Styles applied to {{nodeName}}. Only available for axis tooltip.",
+      "nodeName": "the axisValueCell element"
+    },
     "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
     "labelCell": {
       "description": "Styles applied to {{nodeName}}.",

diff --git a/docs/translations/api-docs/charts/charts-tooltip-container/charts-tooltip-container.json b/docs/translations/api-docs/charts/charts-tooltip-container/charts-tooltip-container.json
@@ -46,6 +46,10 @@
     }
   },
   "classDescriptions": {
+    "axisValueCell": {
+      "description": "Styles applied to {{nodeName}}. Only available for axis tooltip.",
+      "nodeName": "the axisValueCell element"
+    },
     "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
     "labelCell": {
       "description": "Styles applied to {{nodeName}}.",

diff --git a/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json b/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json
@@ -45,6 +45,10 @@
     }
   },
   "classDescriptions": {
+    "axisValueCell": {
+      "description": "Styles applied to {{nodeName}}. Only available for axis tooltip.",
+      "nodeName": "the axisValueCell element"
+    },
     "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
     "labelCell": {
       "description": "Styles applied to {{nodeName}}.",

diff --git a/docs/translations/api-docs/charts/heatmap-tooltip/heatmap-tooltip.json b/docs/translations/api-docs/charts/heatmap-tooltip/heatmap-tooltip.json
@@ -42,6 +42,10 @@
     }
   },
   "classDescriptions": {
+    "axisValueCell": {
+      "description": "Styles applied to {{nodeName}}. Only available for axis tooltip.",
+      "nodeName": "the axisValueCell element"
+    },
     "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
     "labelCell": {
       "description": "Styles applied to {{nodeName}}.",

diff --git a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx
@@ -44,8 +44,8 @@ function ChartsAxisTooltipContent(props: ChartsAxisTooltipContentProps) {
       <ChartsTooltipTable className={classes.table}>
         {axisValue != null && !axis.hideTooltip && (
           <thead>
-            <ChartsTooltipRow>
-              <ChartsTooltipCell colSpan={3}>
+            <ChartsTooltipRow className={classes.row}>
+              <ChartsTooltipCell colSpan={3} className={clsx(classes.cell, classes.axisValueCell)}>
                 <Typography>{axisFormattedValue}</Typography>
               </ChartsTooltipCell>
             </ChartsTooltipRow>

diff --git a/packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts b/packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts
@@ -10,11 +10,10 @@ export const ChartsTooltipPaper = styled('div', {
   slot: 'Container',
   overridesResolver: (props, styles) => styles.paper,
 })(({ 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'),
   borderRadius: theme.shape.borderRadius,
+  border: `solid ${(theme.vars || theme).palette.divider} 1px`,
 }));
 
 /**
@@ -40,10 +39,10 @@ export const ChartsTooltipRow = styled('tr', {
   overridesResolver: (props, styles) => styles.row,
 })(({ theme }) => ({
   'tr:first-of-type& td': {
-    paddingTop: theme.spacing(1),
+    paddingTop: theme.spacing(0.5),
   },
   'tr:last-of-type& td': {
-    paddingBottom: theme.spacing(1),
+    paddingBottom: theme.spacing(0.5),
   },
 }));
 
@@ -59,16 +58,23 @@ export const ChartsTooltipCell = styled('td', {
   color: (theme.vars || theme).palette.text.secondary,
   [`&.${chartsTooltipClasses.labelCell}`]: {
     paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1.5),
+    fontWeight: theme.typography.fontWeightRegular,
   },
-  [`&.${chartsTooltipClasses.valueCell}`]: {
-    paddingLeft: theme.spacing(4),
+
+  [`&.${chartsTooltipClasses.valueCell}, &.${chartsTooltipClasses.axisValueCell}`]: {
     color: (theme.vars || theme).palette.text.primary,
+    fontWeight: theme.typography.fontWeightMedium,
+  },
+  [`&.${chartsTooltipClasses.valueCell}`]: {
+    paddingLeft: theme.spacing(1.5),
+    paddingRight: theme.spacing(1.5),
   },
   'td:first-of-type&': {
-    paddingLeft: theme.spacing(2),
+    paddingLeft: theme.spacing(1.5),
   },
   'td:last-of-type&': {
-    paddingRight: theme.spacing(2),
+    paddingRight: theme.spacing(1.5),
   },
 }));
 
@@ -84,9 +90,6 @@ export const ChartsTooltipMark = styled('div', {
   width: theme.spacing(1),
   height: theme.spacing(1),
   borderRadius: '50%',
-  boxShadow: theme.shadows[1],
   background: 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/chartsTooltipClasses.ts b/packages/x-charts/src/ChartsTooltip/chartsTooltipClasses.ts
@@ -21,6 +21,8 @@ export interface ChartsTooltipClasses {
   labelCell: string;
   /** Styles applied to the valueCell element. */
   valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
 }
 
 export type ChartsTooltipClassKey = keyof Omit<
@@ -34,7 +36,18 @@ export function getChartsTooltipUtilityClass(slot: string) {
 }
 export const chartsTooltipClasses: ChartsTooltipClasses = generateUtilityClasses(
   'MuiChartsTooltip',
-  ['root', 'paper', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell'],
+  [
+    'root',
+    'paper',
+    'table',
+    'row',
+    'cell',
+    'mark',
+    'markCell',
+    'labelCell',
+    'valueCell',
+    'axisValueCell',
+  ],
 );
 
 export const useUtilityClasses = (classes?: Partial<ChartsTooltipClasses>) => {
@@ -48,6 +61,7 @@ export const useUtilityClasses = (classes?: Partial<ChartsTooltipClasses>) => {
     markCell: ['markCell'],
     labelCell: ['labelCell'],
     valueCell: ['valueCell'],
+    axisValueCell: ['axisValueCell'],
   };
 
   return composeClasses(slots, getChartsTooltipUtilityClass, classes);