Skip to content

Commit e0e9a2d

Browse files
mnajdovamnajdova
authoredMar 13, 2024··
[Accordion] Convert to support CSS extraction (#41221)
·
v7.0.0-beta.4v5.15.14
1 parent 1ff3d5f commit e0e9a2d

File tree

6 files changed

+190
-46
lines changed

6 files changed

+190
-46
lines changed
 

‎apps/pigment-css-next-app/src/app/material-ui/react-accordion/page.tsx

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
'use client';
2+
import * as React from 'react';
3+
import AccordionExpandDefault from '../../../../../../docs/data/material/components/accordion/AccordionExpandDefault';
4+
import AccordionExpandIcon from '../../../../../../docs/data/material/components/accordion/AccordionExpandIcon';
5+
import AccordionTransition from '../../../../../../docs/data/material/components/accordion/AccordionTransition';
6+
import AccordionUsage from '../../../../../../docs/data/material/components/accordion/AccordionUsage';
7+
import ControlledAccordions from '../../../../../../docs/data/material/components/accordion/ControlledAccordions';
8+
import CustomizedAccordions from '../../../../../../docs/data/material/components/accordion/CustomizedAccordions';
9+
import DisabledAccordion from '../../../../../../docs/data/material/components/accordion/DisabledAccordion';
10+
11+
export default function Accordion() {
12+
return (
13+
<React.Fragment>
14+
<section>
15+
<h2> Accordion Expand Default</h2>
16+
<div className="demo-container">
17+
<AccordionExpandDefault />
18+
</div>
19+
</section>
20+
<section>
21+
<h2> Accordion Expand Icon</h2>
22+
<div className="demo-container">
23+
<AccordionExpandIcon />
24+
</div>
25+
</section>
26+
<section>
27+
<h2> Accordion Transition</h2>
28+
<div className="demo-container">
29+
<AccordionTransition />
30+
</div>
31+
</section>
32+
<section>
33+
<h2> Accordion Usage</h2>
34+
<div className="demo-container">
35+
<AccordionUsage />
36+
</div>
37+
</section>
38+
<section>
39+
<h2> Controlled Accordions</h2>
40+
<div className="demo-container">
41+
<ControlledAccordions />
42+
</div>
43+
</section>
44+
<section>
45+
<h2> Customized Accordions</h2>
46+
<div className="demo-container">
47+
<CustomizedAccordions />
48+
</div>
49+
</section>
50+
<section>
51+
<h2> Disabled Accordion</h2>
52+
<div className="demo-container">
53+
<DisabledAccordion />
54+
</div>
55+
</section>
56+
</React.Fragment>
57+
);
58+
}

‎apps/pigment-css-vite-app/src/pages/material-ui/react-accordion.tsx

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import * as React from 'react';
2+
import MaterialUILayout from '../../Layout';
3+
import AccordionExpandDefault from '../../../../../docs/data/material/components/accordion/AccordionExpandDefault.tsx';
4+
import AccordionExpandIcon from '../../../../../docs/data/material/components/accordion/AccordionExpandIcon.tsx';
5+
import AccordionTransition from '../../../../../docs/data/material/components/accordion/AccordionTransition.tsx';
6+
import AccordionUsage from '../../../../../docs/data/material/components/accordion/AccordionUsage.tsx';
7+
import ControlledAccordions from '../../../../../docs/data/material/components/accordion/ControlledAccordions.tsx';
8+
import CustomizedAccordions from '../../../../../docs/data/material/components/accordion/CustomizedAccordions.tsx';
9+
import DisabledAccordion from '../../../../../docs/data/material/components/accordion/DisabledAccordion.tsx';
10+
11+
export default function Accordion() {
12+
return (
13+
<MaterialUILayout>
14+
<h1>Accordion</h1>
15+
<section>
16+
<h2> Accordion Expand Default</h2>
17+
<div className="demo-container">
18+
<AccordionExpandDefault />
19+
</div>
20+
</section>
21+
<section>
22+
<h2> Accordion Expand Icon</h2>
23+
<div className="demo-container">
24+
<AccordionExpandIcon />
25+
</div>
26+
</section>
27+
<section>
28+
<h2> Accordion Transition</h2>
29+
<div className="demo-container">
30+
<AccordionTransition />
31+
</div>
32+
</section>
33+
<section>
34+
<h2> Accordion Usage</h2>
35+
<div className="demo-container">
36+
<AccordionUsage />
37+
</div>
38+
</section>
39+
<section>
40+
<h2> Controlled Accordions</h2>
41+
<div className="demo-container">
42+
<ControlledAccordions />
43+
</div>
44+
</section>
45+
<section>
46+
<h2> Customized Accordions</h2>
47+
<div className="demo-container">
48+
<CustomizedAccordions />
49+
</div>
50+
</section>
51+
<section>
52+
<h2> Disabled Accordion</h2>
53+
<div className="demo-container">
54+
<DisabledAccordion />
55+
</div>
56+
</section>
57+
</MaterialUILayout>
58+
);
59+
}

‎packages/mui-material/src/Accordion/Accordion.js

+30-21
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,16 @@ import PropTypes from 'prop-types';
55
import clsx from 'clsx';
66
import chainPropTypes from '@mui/utils/chainPropTypes';
77
import composeClasses from '@mui/utils/composeClasses';
8-
import styled from '../styles/styled';
9-
import useThemeProps from '../styles/useThemeProps';
8+
import { styled, createUseThemeProps } from '../zero-styled';
109
import Collapse from '../Collapse';
1110
import Paper from '../Paper';
1211
import AccordionContext from './AccordionContext';
1312
import useControlled from '../utils/useControlled';
1413
import useSlot from '../utils/useSlot';
1514
import accordionClasses, { getAccordionUtilityClass } from './accordionClasses';
1615

16+
const useThemeProps = createUseThemeProps('MuiAccordion');
17+
1718
const useUtilityClasses = (ownerState) => {
1819
const { classes, square, expanded, disabled, disableGutters } = ownerState;
1920

@@ -91,28 +92,36 @@ const AccordionRoot = styled(Paper, {
9192
},
9293
};
9394
},
94-
({ theme, ownerState }) => ({
95-
...(!ownerState.square && {
96-
borderRadius: 0,
97-
'&:first-of-type': {
98-
borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
99-
borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
100-
},
101-
'&:last-of-type': {
102-
borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
103-
borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
104-
// Fix a rendering issue on Edge
105-
'@supports (-ms-ime-align: auto)': {
106-
borderBottomLeftRadius: 0,
107-
borderBottomRightRadius: 0,
95+
({ theme }) => ({
96+
variants: [
97+
{
98+
props: (props) => !props.square,
99+
style: {
100+
borderRadius: 0,
101+
'&:first-of-type': {
102+
borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
103+
borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
104+
},
105+
'&:last-of-type': {
106+
borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
107+
borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
108+
// Fix a rendering issue on Edge
109+
'@supports (-ms-ime-align: auto)': {
110+
borderBottomLeftRadius: 0,
111+
borderBottomRightRadius: 0,
112+
},
113+
},
108114
},
109115
},
110-
}),
111-
...(!ownerState.disableGutters && {
112-
[`&.${accordionClasses.expanded}`]: {
113-
margin: '16px 0',
116+
{
117+
props: (props) => !props.disableGutters,
118+
style: {
119+
[`&.${accordionClasses.expanded}`]: {
120+
margin: '16px 0',
121+
},
122+
},
114123
},
115-
}),
124+
],
116125
}),
117126
);
118127

‎packages/mui-material/src/AccordionActions/AccordionActions.js

+14-8
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@ import * as React from 'react';
33
import PropTypes from 'prop-types';
44
import clsx from 'clsx';
55
import composeClasses from '@mui/utils/composeClasses';
6-
import styled from '../styles/styled';
7-
import useThemeProps from '../styles/useThemeProps';
6+
import { styled, createUseThemeProps } from '../zero-styled';
87
import { getAccordionActionsUtilityClass } from './accordionActionsClasses';
98

9+
const useThemeProps = createUseThemeProps('MuiAccordionActions');
10+
1011
const useUtilityClasses = (ownerState) => {
1112
const { classes, disableSpacing } = ownerState;
1213

@@ -25,17 +26,22 @@ const AccordionActionsRoot = styled('div', {
2526

2627
return [styles.root, !ownerState.disableSpacing && styles.spacing];
2728
},
28-
})(({ ownerState }) => ({
29+
})({
2930
display: 'flex',
3031
alignItems: 'center',
3132
padding: 8,
3233
justifyContent: 'flex-end',
33-
...(!ownerState.disableSpacing && {
34-
'& > :not(style) ~ :not(style)': {
35-
marginLeft: 8,
34+
variants: [
35+
{
36+
props: (props) => !props.disableSpacing,
37+
style: {
38+
'& > :not(style) ~ :not(style)': {
39+
marginLeft: 8,
40+
},
41+
},
3642
},
37-
}),
38-
}));
43+
],
44+
});
3945

4046
const AccordionActions = React.forwardRef(function AccordionActions(inProps, ref) {
4147
const props = useThemeProps({ props: inProps, name: 'MuiAccordionActions' });

‎packages/mui-material/src/AccordionDetails/AccordionDetails.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@ import * as React from 'react';
33
import PropTypes from 'prop-types';
44
import clsx from 'clsx';
55
import composeClasses from '@mui/utils/composeClasses';
6-
import styled from '../styles/styled';
7-
import useThemeProps from '../styles/useThemeProps';
6+
import { styled, createUseThemeProps } from '../zero-styled';
87
import { getAccordionDetailsUtilityClass } from './accordionDetailsClasses';
98

9+
const useThemeProps = createUseThemeProps('MuiAccordionDetails');
10+
1011
const useUtilityClasses = (ownerState) => {
1112
const { classes } = ownerState;
1213

‎packages/mui-material/src/AccordionSummary/AccordionSummary.js

+26-15
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,15 @@ import * as React from 'react';
33
import PropTypes from 'prop-types';
44
import clsx from 'clsx';
55
import composeClasses from '@mui/utils/composeClasses';
6-
import styled from '../styles/styled';
7-
import useThemeProps from '../styles/useThemeProps';
6+
import { styled, createUseThemeProps } from '../zero-styled';
87
import ButtonBase from '../ButtonBase';
98
import AccordionContext from '../Accordion/AccordionContext';
109
import accordionSummaryClasses, {
1110
getAccordionSummaryUtilityClass,
1211
} from './accordionSummaryClasses';
1312

13+
const useThemeProps = createUseThemeProps('MuiAccordionSummary');
14+
1415
const useUtilityClasses = (ownerState) => {
1516
const { classes, expanded, disabled, disableGutters } = ownerState;
1617

@@ -28,7 +29,7 @@ const AccordionSummaryRoot = styled(ButtonBase, {
2829
name: 'MuiAccordionSummary',
2930
slot: 'Root',
3031
overridesResolver: (props, styles) => styles.root,
31-
})(({ theme, ownerState }) => {
32+
})(({ theme }) => {
3233
const transition = {
3334
duration: theme.transitions.duration.shortest,
3435
};
@@ -47,30 +48,40 @@ const AccordionSummaryRoot = styled(ButtonBase, {
4748
[`&:hover:not(.${accordionSummaryClasses.disabled})`]: {
4849
cursor: 'pointer',
4950
},
50-
...(!ownerState.disableGutters && {
51-
[`&.${accordionSummaryClasses.expanded}`]: {
52-
minHeight: 64,
51+
variants: [
52+
{
53+
props: (props) => !props.disableGutters,
54+
style: {
55+
[`&.${accordionSummaryClasses.expanded}`]: {
56+
minHeight: 64,
57+
},
58+
},
5359
},
54-
}),
60+
],
5561
};
5662
});
5763

5864
const AccordionSummaryContent = styled('div', {
5965
name: 'MuiAccordionSummary',
6066
slot: 'Content',
6167
overridesResolver: (props, styles) => styles.content,
62-
})(({ theme, ownerState }) => ({
68+
})(({ theme }) => ({
6369
display: 'flex',
6470
flexGrow: 1,
6571
margin: '12px 0',
66-
...(!ownerState.disableGutters && {
67-
transition: theme.transitions.create(['margin'], {
68-
duration: theme.transitions.duration.shortest,
69-
}),
70-
[`&.${accordionSummaryClasses.expanded}`]: {
71-
margin: '20px 0',
72+
variants: [
73+
{
74+
props: (props) => !props.disableGutters,
75+
style: {
76+
transition: theme.transitions.create(['margin'], {
77+
duration: theme.transitions.duration.shortest,
78+
}),
79+
[`&.${accordionSummaryClasses.expanded}`]: {
80+
margin: '20px 0',
81+
},
82+
},
7283
},
73-
}),
84+
],
7485
}));
7586

7687
const AccordionSummaryExpandIconWrapper = styled('div', {

0 commit comments

Comments
 (0)
Please sign in to comment.