[charts] Add item class to list item around each series in legend (#18411)

Author: bernardobelchior

docs/pages/x/api/charts/charts-legend.json

@@ -39,6 +39,12 @@
       "description": "Styles applied to the legend in row layout.",
       "isGlobal": false
     },
+    {
+      "key": "item",
+      "className": "MuiChartsLegend-item",
+      "description": "Styles applied to the list item around each series in the legend.",
+      "isGlobal": false
+    },
     {
       "key": "label",
       "className": "MuiChartsLegend-label",

docs/translations/api-docs/charts/charts-legend/charts-legend.json

@@ -21,6 +21,10 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the legend in row layout"
     },
+    "item": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the list item around each series in the legend"
+    },
     "label": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the series label" },
     "mark": { "description": "Styles applied to {{nodeName}}.", "nodeName": "series mark element" },
     "root": { "description": "Styles applied to the root element." },

packages/x-charts/src/ChartsLegend/ChartsLegend.tsx

@@ -107,7 +107,7 @@ const ChartsLegend = consumeSlots(
       >
         {data.items.map((item, i) => {
           return (
-            <li key={item.id}>
+            <li key={item.id} className={classes?.item}>
               <Element
                 className={classes?.series}
                 role={onItemClick ? 'button' : undefined}

packages/x-charts/src/ChartsLegend/chartsLegendClasses.ts

@@ -7,6 +7,8 @@ import type { ChartsLegendSlotExtension } from './chartsLegend.types';
 export interface ChartsLegendClasses {
   /** Styles applied to the root element. */
   root: string;
+  /** Styles applied to the list item around each series in the legend. */
+  item: string;
   /** Styles applied to a series element. */
   series: string;
   /** Styles applied to series mark element. */
@@ -27,6 +29,7 @@ export const useUtilityClasses = (props: ChartsLegendProps & ChartsLegendSlotExt
   const { classes, direction } = props;
   const slots = {
     root: ['root', direction],
+    item: ['item'],
     mark: ['mark'],
     label: ['label'],
     series: ['series'],
@@ -37,6 +40,7 @@ export const useUtilityClasses = (props: ChartsLegendProps & ChartsLegendSlotExt
 
 export const legendClasses: ChartsLegendClasses = generateUtilityClasses('MuiChartsLegend', [
   'root',
+  'item',
   'series',
   'mark',
   'label',