Skip to content

[charts] Refactor FunnelChart classes structure#21652

Merged
JCQuintas merged 13 commits intomui:masterfrom
JCQuintas:refactor-funnel-chart-classes
Mar 17, 2026
Merged

[charts] Refactor FunnelChart classes structure#21652
JCQuintas merged 13 commits intomui:masterfrom
JCQuintas:refactor-funnel-chart-classes

Conversation

@JCQuintas
Copy link
Copy Markdown
Member

Summary

Part of #18496

Follows the same pattern as #21601 (BarChart).

  • Creates new funnelClasses.ts with MuiFunnelChart prefix
  • Old funnelSectionClasses.ts (MuiFunnelSection) kept fully functional with @deprecated markers
  • Components apply BOTH new and old classes to DOM elements
  • Theme augmentation updated with MuiFunnelChart entry, MuiFunnelSection deprecated
  • New slots: root, section, sectionFilled, sectionOutlined, sectionLabel

Test plan

  • TypeScript passes
  • Unit tests pass
  • Old class selectors still work on DOM elements
  • New funnelClasses.* selectors work on DOM elements

🤖 Generated with Claude Code

Introduce a new consolidated `funnelClasses` with `MuiFunnelChart` prefix,
following the same pattern as the BarChart refactoring. The deprecated
`funnelSectionClasses` with `MuiFunnelSection` prefix remains functional.
Components now apply both old and new classes for backward compatibility.
@mui-bot
Copy link
Copy Markdown

mui-bot commented Mar 6, 2026

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

Bundle size report

Bundle Parsed size Gzip size
@mui/x-data-grid 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-pro 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-premium 0B(0.00%) 0B(0.00%)
@mui/x-charts 0B(0.00%) 0B(0.00%)
@mui/x-charts-pro 🔺+779B(+0.16%) 🔺+220B(+0.15%)
@mui/x-charts-premium 🔺+779B(+0.15%) 🔺+233B(+0.15%)
@mui/x-date-pickers 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers-pro 0B(0.00%) 0B(0.00%)
@mui/x-tree-view 0B(0.00%) 0B(0.00%)
@mui/x-tree-view-pro 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against fc1bdf1

@alexfauquette
Copy link
Copy Markdown
Member

I noticed the FunnelSection and FunnelSectionLabel are both using consumeSlots()

which starts by

const themedProps = useThemeProps({
      props,
      // eslint-disable-next-line mui/material-ui-name-matches-component-name
      name,
    });

So I added them in the types of the theme props override, because it would be sad to pay the cost of a theme props override and do not make it available at the type checking level.

@github-actions github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 12, 2026
@github-actions
Copy link
Copy Markdown
Contributor

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

@JCQuintas JCQuintas added type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. needs cherry-pick The PR should be cherry-picked to master after merge. scope: charts Changes related to the charts. v9.x v8.x and removed v9.x labels Mar 16, 2026
@github-actions github-actions Bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 16, 2026
@JCQuintas JCQuintas marked this pull request as ready for review March 16, 2026 17:31
@codspeed-hq
Copy link
Copy Markdown

codspeed-hq Bot commented Mar 16, 2026

Merging this PR will not alter performance

✅ 14 untouched benchmarks


Comparing JCQuintas:refactor-funnel-chart-classes (fc1bdf1) with master (7491991)

Open in CodSpeed

Copy link
Copy Markdown
Member

@alexfauquette alexfauquette left a comment

Choose a reason for hiding this comment

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

Looks more like a cleanup than a refactor of the classes

Comment on lines +33 to 37
MuiHeatmapPlot: {
styleOverrides: {
highlighted: { backgroundColor: 'red' },
// @ts-expect-error invalid MuiHeatmap class key
root: { backgroundColor: 'red' },
// @ts-expect-error invalid MuiChartsAxis class key
constent: { color: 'red' },
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I don't get why

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

I think I just scrambled the merge 😆

@JCQuintas JCQuintas merged commit 80991c7 into mui:master Mar 17, 2026
21 checks passed
@JCQuintas JCQuintas deleted the refactor-funnel-chart-classes branch March 17, 2026 14:53
@github-actions
Copy link
Copy Markdown
Contributor

Cherry-pick PRs will be created targeting branches: v8.x

github-actions Bot pushed a commit that referenced this pull request Mar 17, 2026
Co-authored-by: alex <alex.fauquette@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

needs cherry-pick The PR should be cherry-picked to master after merge. scope: charts Changes related to the charts. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. v8.x

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants