From 0b2a17a4eff883e74bf36f7d74b86ebe1158e814 Mon Sep 17 00:00:00 2001 From: Lukas Date: Wed, 21 Aug 2024 12:55:31 +0300 Subject: [PATCH] Revert start of PigmentCSS support --- .../ResponsiveChartContainerPro.tsx | 10 +--------- .../ChartsAxisHighlight.tsx | 8 ++++++-- packages/x-charts/src/Gauge/GaugeContainer.tsx | 12 +++--------- .../src/LineChart/LineHighlightElement.tsx | 18 +++++------------- .../x-charts/src/LineChart/MarkElement.tsx | 15 ++++++--------- .../ResizableContainer.tsx | 8 ++++---- .../ResponsiveChartContainer.tsx | 10 +--------- 7 files changed, 26 insertions(+), 55 deletions(-) diff --git a/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx b/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx index cd5f039c9c3b..e7a1f932174b 100644 --- a/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx +++ b/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx @@ -22,15 +22,7 @@ const ResponsiveChartContainerPro = React.forwardRef(function ResponsiveChartCon useResponsiveChartContainerProProps(props, ref); return ( - + {hasIntrinsicSize ? : null} diff --git a/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx b/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx index 842ae657bad1..fb9b4d2f74de 100644 --- a/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx +++ b/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx @@ -41,7 +41,9 @@ export const ChartsAxisHighlightPath = styled('path', { pointerEvents: 'none', variants: [ { - props: ({ ownerState }) => ownerState.axisHighlight === 'band', + props: { + axisHighlight: 'band', + }, style: { fill: 'white', fillOpacity: 0.1, @@ -51,7 +53,9 @@ export const ChartsAxisHighlightPath = styled('path', { }, }, { - props: ({ ownerState }) => ownerState.axisHighlight === 'line', + props: { + axisHighlight: 'line', + }, style: { strokeDasharray: '5 2', stroke: '#ffffff', diff --git a/packages/x-charts/src/Gauge/GaugeContainer.tsx b/packages/x-charts/src/Gauge/GaugeContainer.tsx index cd8c9e6331dd..48e61b403238 100644 --- a/packages/x-charts/src/Gauge/GaugeContainer.tsx +++ b/packages/x-charts/src/Gauge/GaugeContainer.tsx @@ -25,9 +25,9 @@ export interface GaugeContainerProps const ResizableContainer = styled('div', { name: 'MuiGauge', slot: 'Container', -})<{ ownerState: Pick }>(({ theme }) => ({ - width: 'var(--width, 100%)', - height: 'var(--height, 100%)', +})<{ ownerState: Pick }>(({ ownerState, theme }) => ({ + width: ownerState.width ?? '100%', + height: ownerState.height ?? '100%', display: 'flex', position: 'relative', flexGrow: 1, @@ -77,12 +77,6 @@ const GaugeContainer = React.forwardRef(function GaugeContainer(props: GaugeCont aria-valuenow={value === null ? undefined : value} aria-valuemin={valueMin} aria-valuemax={valueMax} - style={ - { - '--width': inWidth, - '--height': inHeight, - } as React.CSSProperties - } {...other} > {width && height ? ( diff --git a/packages/x-charts/src/LineChart/LineHighlightElement.tsx b/packages/x-charts/src/LineChart/LineHighlightElement.tsx index a3ade5908780..4bb282b55f60 100644 --- a/packages/x-charts/src/LineChart/LineHighlightElement.tsx +++ b/packages/x-charts/src/LineChart/LineHighlightElement.tsx @@ -43,11 +43,11 @@ const HighlightElement = styled('circle', { name: 'MuiHighlightElement', slot: 'Root', overridesResolver: (_, styles) => styles.root, -})<{ ownerState: LineHighlightElementOwnerState }>({ - transform: `translate(var(--x)px, var(--y)px)`, - transformOrigin: `var(--x)px var(--y)px`, - fill: 'var(--color)', -}); +})<{ ownerState: LineHighlightElementOwnerState }>(({ ownerState }) => ({ + transform: `translate(${ownerState.x}px, ${ownerState.y}px)`, + transformOrigin: `${ownerState.x}px ${ownerState.y}px`, + fill: ownerState.color, +})); export type LineHighlightElementProps = LineHighlightElementOwnerState & Omit, 'ref' | 'id'>; @@ -82,14 +82,6 @@ function LineHighlightElement(props: LineHighlightElementProps) { cx={0} cy={0} r={other.r === undefined ? 5 : other.r} - style={ - { - ...other.style, - '--x': x, - '--y': y, - '--color': color, - } as React.CSSProperties - } {...other} /> ); diff --git a/packages/x-charts/src/LineChart/MarkElement.tsx b/packages/x-charts/src/LineChart/MarkElement.tsx index 7a9ceb4733d4..137f44f252b7 100644 --- a/packages/x-charts/src/LineChart/MarkElement.tsx +++ b/packages/x-charts/src/LineChart/MarkElement.tsx @@ -54,9 +54,9 @@ const MarkElementPath = styled(animated.path, { name: 'MuiMarkElement', slot: 'Root', overridesResolver: (_, styles) => styles.root, -})<{ ownerState: MarkElementOwnerState }>(({ theme }) => ({ +})<{ ownerState: MarkElementOwnerState }>(({ ownerState, theme }) => ({ fill: (theme.vars || theme).palette.background.paper, - stroke: 'var(--color)', + stroke: ownerState.color, strokeWidth: 2, })); @@ -120,13 +120,10 @@ function MarkElement(props: MarkElementProps) { return ( `translate(${pX}px, ${pY}px)`), - transformOrigin: to([position.x, position.y], (pX, pY) => `${pX}px ${pY}px`), - '--color': color, - } as unknown as React.CSSProperties - } + style={{ + transform: to([position.x, position.y], (pX, pY) => `translate(${pX}px, ${pY}px)`), + transformOrigin: to([position.x, position.y], (pX, pY) => `${pX}px ${pY}px`), + }} ownerState={ownerState} className={classes.root} d={d3Symbol(d3SymbolsFill[getSymbol(shape)])()!} diff --git a/packages/x-charts/src/ResponsiveChartContainer/ResizableContainer.tsx b/packages/x-charts/src/ResponsiveChartContainer/ResizableContainer.tsx index e319b40fff66..2ea1f0f81c9a 100644 --- a/packages/x-charts/src/ResponsiveChartContainer/ResizableContainer.tsx +++ b/packages/x-charts/src/ResponsiveChartContainer/ResizableContainer.tsx @@ -9,9 +9,9 @@ import type { ResponsiveChartContainerProps } from './ResponsiveChartContainer'; export const ResizableContainer = styled('div', { name: 'MuiResponsiveChart', slot: 'Container', -})<{ ownerState: Pick }>({ - width: 'var(--width, 100%)', - height: 'var(--height, 100%)', +})<{ ownerState: Pick }>(({ ownerState }) => ({ + width: ownerState.width ?? '100%', + height: ownerState.height ?? '100%', display: 'flex', position: 'relative', flexGrow: 1, @@ -23,4 +23,4 @@ export const ResizableContainer = styled('div', { width: '100%', height: '100%', }, -}); +})); diff --git a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx index 38208e40b381..5293e22ae886 100644 --- a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx +++ b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx @@ -24,15 +24,7 @@ const ResponsiveChartContainer = React.forwardRef(function ResponsiveChartContai useResponsiveChartContainerProps(props, ref); return ( - + {hasIntrinsicSize ? : null} );