Skip to content

Commit 8f5efee

Browse files
sai6855pluvio72
sai6855
authored and
pluvio72
committed
[material-ui][Divider] Convert to support CSS extraction (mui#41366)
1 parent 5e7012b commit 8f5efee

File tree

3 files changed

+243
-76
lines changed

3 files changed

+243
-76
lines changed

‎apps/pigment-css-next-app/src/app/material-ui/react-divider/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 DividerText from '../../../../../../docs/data/material/components/dividers/DividerText';
4+
import DividerVariants from '../../../../../../docs/data/material/components/dividers/DividerVariants';
5+
import FlexDivider from '../../../../../../docs/data/material/components/dividers/FlexDivider';
6+
import IntroDivider from '../../../../../../docs/data/material/components/dividers/IntroDivider';
7+
import ListDividers from '../../../../../../docs/data/material/components/dividers/ListDividers';
8+
import VerticalDividerMiddle from '../../../../../../docs/data/material/components/dividers/VerticalDividerMiddle';
9+
import VerticalDividers from '../../../../../../docs/data/material/components/dividers/VerticalDividers';
10+
11+
export default function Dividers() {
12+
return (
13+
<React.Fragment>
14+
<section>
15+
<h2> Divider Text</h2>
16+
<div className="demo-container">
17+
<DividerText />
18+
</div>
19+
</section>
20+
<section>
21+
<h2> Divider Variants</h2>
22+
<div className="demo-container">
23+
<DividerVariants />
24+
</div>
25+
</section>
26+
<section>
27+
<h2> Flex Divider</h2>
28+
<div className="demo-container">
29+
<FlexDivider />
30+
</div>
31+
</section>
32+
<section>
33+
<h2> Intro Divider</h2>
34+
<div className="demo-container">
35+
<IntroDivider />
36+
</div>
37+
</section>
38+
<section>
39+
<h2> List Dividers</h2>
40+
<div className="demo-container">
41+
<ListDividers />
42+
</div>
43+
</section>
44+
<section>
45+
<h2> Vertical Divider Middle</h2>
46+
<div className="demo-container">
47+
<VerticalDividerMiddle />
48+
</div>
49+
</section>
50+
<section>
51+
<h2> Vertical Dividers</h2>
52+
<div className="demo-container">
53+
<VerticalDividers />
54+
</div>
55+
</section>
56+
</React.Fragment>
57+
);
58+
}

‎apps/pigment-css-vite-app/src/pages/material-ui/react-divider.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 DividerText from '../../../../../docs/data/material/components/dividers/DividerText.tsx';
4+
import DividerVariants from '../../../../../docs/data/material/components/dividers/DividerVariants.tsx';
5+
import FlexDivider from '../../../../../docs/data/material/components/dividers/FlexDivider.tsx';
6+
import IntroDivider from '../../../../../docs/data/material/components/dividers/IntroDivider.tsx';
7+
import ListDividers from '../../../../../docs/data/material/components/dividers/ListDividers.tsx';
8+
import VerticalDividerMiddle from '../../../../../docs/data/material/components/dividers/VerticalDividerMiddle.tsx';
9+
import VerticalDividers from '../../../../../docs/data/material/components/dividers/VerticalDividers.tsx';
10+
11+
export default function Dividers() {
12+
return (
13+
<MaterialUILayout>
14+
<h1>Dividers</h1>
15+
<section>
16+
<h2> Divider Text</h2>
17+
<div className="demo-container">
18+
<DividerText />
19+
</div>
20+
</section>
21+
<section>
22+
<h2> Divider Variants</h2>
23+
<div className="demo-container">
24+
<DividerVariants />
25+
</div>
26+
</section>
27+
<section>
28+
<h2> Flex Divider</h2>
29+
<div className="demo-container">
30+
<FlexDivider />
31+
</div>
32+
</section>
33+
<section>
34+
<h2> Intro Divider</h2>
35+
<div className="demo-container">
36+
<IntroDivider />
37+
</div>
38+
</section>
39+
<section>
40+
<h2> List Dividers</h2>
41+
<div className="demo-container">
42+
<ListDividers />
43+
</div>
44+
</section>
45+
<section>
46+
<h2> Vertical Divider Middle</h2>
47+
<div className="demo-container">
48+
<VerticalDividerMiddle />
49+
</div>
50+
</section>
51+
<section>
52+
<h2> Vertical Dividers</h2>
53+
<div className="demo-container">
54+
<VerticalDividers />
55+
</div>
56+
</section>
57+
</MaterialUILayout>
58+
);
59+
}

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

+126-76
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@ import PropTypes from 'prop-types';
44
import clsx from 'clsx';
55
import composeClasses from '@mui/utils/composeClasses';
66
import { alpha } from '@mui/system/colorManipulator';
7-
import styled from '../styles/styled';
8-
import useThemeProps from '../styles/useThemeProps';
7+
import { styled, createUseThemeProps } from '../zero-styled';
98
import { getDividerUtilityClass } from './dividerClasses';
109

10+
const useThemeProps = createUseThemeProps('MuiDivider');
11+
1112
const useUtilityClasses = (ownerState) => {
1213
const { absolute, children, classes, flexItem, light, orientation, textAlign, variant } =
1314
ownerState;
@@ -54,100 +55,140 @@ const DividerRoot = styled('div', {
5455
styles.textAlignLeft,
5556
];
5657
},
57-
})(
58-
({ theme, ownerState }) => ({
59-
margin: 0, // Reset browser default style.
60-
flexShrink: 0,
61-
borderWidth: 0,
62-
borderStyle: 'solid',
63-
borderColor: (theme.vars || theme).palette.divider,
64-
borderBottomWidth: 'thin',
65-
...(ownerState.absolute && {
66-
position: 'absolute',
67-
bottom: 0,
68-
left: 0,
69-
width: '100%',
70-
}),
71-
...(ownerState.light && {
72-
borderColor: theme.vars
73-
? `rgba(${theme.vars.palette.dividerChannel} / 0.08)`
74-
: alpha(theme.palette.divider, 0.08),
75-
}),
76-
...(ownerState.variant === 'inset' && {
77-
marginLeft: 72,
78-
}),
79-
...(ownerState.variant === 'middle' &&
80-
ownerState.orientation === 'horizontal' && {
58+
})(({ theme }) => ({
59+
margin: 0, // Reset browser default style.
60+
flexShrink: 0,
61+
borderWidth: 0,
62+
borderStyle: 'solid',
63+
borderColor: (theme.vars || theme).palette.divider,
64+
borderBottomWidth: 'thin',
65+
variants: [
66+
{
67+
props: {
68+
absolute: true,
69+
},
70+
style: {
71+
position: 'absolute',
72+
bottom: 0,
73+
left: 0,
74+
width: '100%',
75+
},
76+
},
77+
{
78+
props: {
79+
light: true,
80+
},
81+
style: {
82+
borderColor: theme.vars
83+
? `rgba(${theme.vars.palette.dividerChannel} / 0.08)`
84+
: alpha(theme.palette.divider, 0.08),
85+
},
86+
},
87+
{
88+
props: {
89+
variant: 'inset',
90+
},
91+
style: {
92+
marginLeft: 72,
93+
},
94+
},
95+
{
96+
props: {
97+
variant: 'middle',
98+
orientation: 'horizontal',
99+
},
100+
style: {
81101
marginLeft: theme.spacing(2),
82102
marginRight: theme.spacing(2),
83-
}),
84-
...(ownerState.variant === 'middle' &&
85-
ownerState.orientation === 'vertical' && {
103+
},
104+
},
105+
{
106+
props: {
107+
variant: 'middle',
108+
orientation: 'vertical',
109+
},
110+
style: {
86111
marginTop: theme.spacing(1),
87112
marginBottom: theme.spacing(1),
88-
}),
89-
...(ownerState.orientation === 'vertical' && {
90-
height: '100%',
91-
borderBottomWidth: 0,
92-
borderRightWidth: 'thin',
93-
}),
94-
...(ownerState.flexItem && {
95-
alignSelf: 'stretch',
96-
height: 'auto',
97-
}),
98-
}),
99-
({ ownerState }) => ({
100-
...(ownerState.children && {
101-
display: 'flex',
102-
whiteSpace: 'nowrap',
103-
textAlign: 'center',
104-
border: 0,
105-
'&::before, &::after': {
106-
content: '""',
107-
alignSelf: 'center',
108113
},
109-
}),
110-
}),
111-
({ theme, ownerState }) => ({
112-
...(ownerState.children &&
113-
ownerState.orientation !== 'vertical' && {
114+
},
115+
{
116+
props: {
117+
orientation: 'vertical',
118+
},
119+
style: {
120+
height: '100%',
121+
borderBottomWidth: 0,
122+
borderRightWidth: 'thin',
123+
},
124+
},
125+
{
126+
props: {
127+
flexItem: true,
128+
},
129+
style: {
130+
alignSelf: 'stretch',
131+
height: 'auto',
132+
},
133+
},
134+
{
135+
props: ({ ownerState }) => !!ownerState.children,
136+
style: {
137+
display: 'flex',
138+
whiteSpace: 'nowrap',
139+
textAlign: 'center',
140+
border: 0,
141+
'&::before, &::after': {
142+
content: '""',
143+
alignSelf: 'center',
144+
},
145+
},
146+
},
147+
{
148+
props: ({ ownerState }) => ownerState.children && ownerState.orientation !== 'vertical',
149+
style: {
114150
'&::before, &::after': {
115151
width: '100%',
116152
borderTop: `thin solid ${(theme.vars || theme).palette.divider}`,
117153
},
118-
}),
119-
}),
120-
({ theme, ownerState }) => ({
121-
...(ownerState.children &&
122-
ownerState.orientation === 'vertical' && {
154+
},
155+
},
156+
{
157+
props: ({ ownerState }) => ownerState.orientation === 'vertical' && ownerState.children,
158+
style: {
123159
flexDirection: 'column',
124160
'&::before, &::after': {
125161
height: '100%',
126162
borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`,
127163
},
128-
}),
129-
}),
130-
({ ownerState }) => ({
131-
...(ownerState.textAlign === 'right' &&
132-
ownerState.orientation !== 'vertical' && {
164+
},
165+
},
166+
{
167+
props: ({ ownerState }) =>
168+
ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical',
169+
style: {
133170
'&::before': {
134171
width: '90%',
135172
},
136173
'&::after': {
137174
width: '10%',
138175
},
139-
}),
140-
...(ownerState.textAlign === 'left' &&
141-
ownerState.orientation !== 'vertical' && {
176+
},
177+
},
178+
{
179+
props: ({ ownerState }) =>
180+
ownerState.textAlign === 'left' && ownerState.orientation !== 'vertical',
181+
style: {
142182
'&::before': {
143183
width: '10%',
144184
},
145185
'&::after': {
146186
width: '90%',
147187
},
148-
}),
149-
}),
150-
);
188+
},
189+
},
190+
],
191+
}));
151192

152193
const DividerWrapper = styled('span', {
153194
name: 'MuiDivider',
@@ -157,14 +198,21 @@ const DividerWrapper = styled('span', {
157198

158199
return [styles.wrapper, ownerState.orientation === 'vertical' && styles.wrapperVertical];
159200
},
160-
})(({ theme, ownerState }) => ({
201+
})(({ theme }) => ({
161202
display: 'inline-block',
162203
paddingLeft: `calc(${theme.spacing(1)} * 1.2)`,
163204
paddingRight: `calc(${theme.spacing(1)} * 1.2)`,
164-
...(ownerState.orientation === 'vertical' && {
165-
paddingTop: `calc(${theme.spacing(1)} * 1.2)`,
166-
paddingBottom: `calc(${theme.spacing(1)} * 1.2)`,
167-
}),
205+
variants: [
206+
{
207+
props: {
208+
orientation: 'vertical',
209+
},
210+
style: {
211+
paddingTop: `calc(${theme.spacing(1)} * 1.2)`,
212+
paddingBottom: `calc(${theme.spacing(1)} * 1.2)`,
213+
},
214+
},
215+
],
168216
}));
169217

170218
const Divider = React.forwardRef(function Divider(inProps, ref) {
@@ -219,7 +267,9 @@ const Divider = React.forwardRef(function Divider(inProps, ref) {
219267
* The following flag is used to ensure that this component isn't tabbable i.e.
220268
* does not get highlight/focus inside of MUI List.
221269
*/
222-
Divider.muiSkipListHighlight = true;
270+
if (Divider) {
271+
Divider.muiSkipListHighlight = true;
272+
}
223273

224274
Divider.propTypes /* remove-proptypes */ = {
225275
// ┌────────────────────────────── Warning ──────────────────────────────┐

0 commit comments

Comments
 (0)