Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[charts] Fix themeAugmentation #14372

Merged
merged 8 commits into from
Aug 29, 2024
Merged

[charts] Fix themeAugmentation #14372

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e0293d7
ALlow style override on x/y axis
alexfauquette Aug 28, 2024
b4a3929
Fix legend
alexfauquette Aug 28, 2024
ce61cbd
update grid
alexfauquette Aug 28, 2024
fce8a7e
update tooltip
alexfauquette Aug 28, 2024
f73dcd8
fix tooltip default
alexfauquette Aug 28, 2024
f2e01fc
scripts
alexfauquette Aug 28, 2024
4b6e8eb
Rework ChartsGrid
alexfauquette Aug 29, 2024
690f1be
Merge branch 'master' into continue-yhemeOverride
JCQuintas Aug 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import useSlotProps from '@mui/utils/useSlotProps';
import composeClasses from '@mui/utils/composeClasses';
import { useThemeProps, useTheme, Theme } from '@mui/material/styles';
import { useThemeProps, useTheme, Theme, styled } from '@mui/material/styles';
import { useCartesianContext } from '../context/CartesianProvider';
import { useTicks, TickItemType } from '../hooks/useTicks';
import { AxisDefaultized, ChartsXAxisProps } from '../models/axis';
Expand Down Expand Up @@ -83,6 +83,12 @@ function addLabelDimension(
});
}

const XAxisRoot = styled(AxisRoot, {
name: 'MuiChartsXAxis',
slot: 'Root',
overridesResolver: (props, styles) => styles.root,
})({});
Comment on lines +86 to +90
Copy link
Member Author

Choose a reason for hiding this comment

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

Looks like a bit of overwork to style a component already styled. But it improve consistency.

I'm considering removing the AxisRoot for v8. WHat do you think?

Copy link
Member

Choose a reason for hiding this comment

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

What do you mean by removing it? Move the styles to each of the axis?


const defaultProps = {
position: 'bottom',
disableLine: false,
Expand Down Expand Up @@ -204,7 +210,7 @@ function ChartsXAxis(inProps: ChartsXAxisProps) {
return null;
}
return (
<AxisRoot
<XAxisRoot
transform={`translate(0, ${position === 'bottom' ? top + height : top})`}
className={classes.root}
sx={sx}
Expand Down Expand Up @@ -246,7 +252,7 @@ function ChartsXAxis(inProps: ChartsXAxisProps) {
<Label {...labelRefPoint} {...axisLabelProps} text={label} />
</g>
)}
</AxisRoot>
</XAxisRoot>
);
}

Expand Down
12 changes: 9 additions & 3 deletions packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import useSlotProps from '@mui/utils/useSlotProps';
import composeClasses from '@mui/utils/composeClasses';
import { useThemeProps, useTheme, Theme } from '@mui/material/styles';
import { useThemeProps, useTheme, Theme, styled } from '@mui/material/styles';
import { useCartesianContext } from '../context/CartesianProvider';
import { useTicks } from '../hooks/useTicks';
import { useDrawingArea } from '../hooks/useDrawingArea';
Expand All @@ -27,6 +27,12 @@ const useUtilityClasses = (ownerState: ChartsYAxisProps & { theme: Theme }) => {
return composeClasses(slots, getAxisUtilityClass, classes);
};

const YAxisRoot = styled(AxisRoot, {
name: 'MuiChartsYAxis',
slot: 'Root',
overridesResolver: (props, styles) => styles.root,
})({});

const defaultProps = {
position: 'left',
disableLine: false,
Expand Down Expand Up @@ -156,7 +162,7 @@ function ChartsYAxis(inProps: ChartsYAxisProps) {
}

return (
<AxisRoot
<YAxisRoot
transform={`translate(${position === 'right' ? left + width : left}, 0)`}
className={classes.root}
sx={sx}
Expand Down Expand Up @@ -203,7 +209,7 @@ function ChartsYAxis(inProps: ChartsYAxisProps) {
<Label {...labelRefPoint} {...axisLabelProps} text={label} />
</g>
)}
</AxisRoot>
</YAxisRoot>
);
}

Expand Down
2 changes: 2 additions & 0 deletions packages/x-charts/src/themeAugmentation/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,11 @@ export interface ChartsComponents<Theme = unknown> {
};
MuiChartsXAxis?: {
defaultProps?: ComponentsProps['MuiChartsXAxis'];
styleOverrides?: ComponentsOverrides<Theme>['MuiChartsXAxis'];
};
MuiChartsYAxis?: {
defaultProps?: ComponentsProps['MuiChartsYAxis'];
styleOverrides?: ComponentsOverrides<Theme>['MuiChartsYAxis'];
};
MuiChartsAxisHighlight?: {
styleOverrides?: ComponentsOverrides<Theme>['MuiChartsAxisHighlight'];
Expand Down
5 changes: 4 additions & 1 deletion packages/x-charts/src/themeAugmentation/overrides.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,10 @@ import { ChartsTooltipClassKey } from '../ChartsTooltip';
import { AreaElementClassKey, LineElementClassKey, MarkElementClassKey } from '../LineChart';

export interface ChartsComponentNameToClassKey {
MuiChartsAxis: 'root'; // Only the root component of axes is styled
MuiChartsAxis: 'root'; // Only the root component of axes is styled. We should probably remove this one in v8
MuiChartsXAxis: 'root'; // Only the root component of axes is styled
MuiChartsYAxis: 'root'; // Only the root component of axes is styled

MuiChartsAxisHighlight: ChartsAxisHighlightClassKey;
MuiChartsGrid: ChartsGridClassKey;
MuiChartsLegend: ChartsLegendClassKey;
Expand Down
10 changes: 10 additions & 0 deletions packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,23 @@ createTheme({
// @ts-expect-error invalid MuiChartsXAxis prop
someRandomProp: true,
},
styleOverrides: {
root: { backgroundColor: 'red' },
// @ts-expect-error invalid MuiChartsXAxis class key
line: { color: 'red' },
},
},
MuiChartsYAxis: {
defaultProps: {
axisId: 'test',
// @ts-expect-error invalid MuiChartsYAxis prop
someRandomProp: true,
},
styleOverrides: {
root: { backgroundColor: 'red' },
// @ts-expect-error invalid MuiChartsYAxis class key
line: { color: 'red' },
},
},
MuiChartsAxisHighlight: {
styleOverrides: {
Expand Down