[Accordion] Convert to support CSS extraction (#41221)

mui · Mar 13, 2024 · e0e9a2d · e0e9a2d
1 parent 1ff3d5f
commit e0e9a2d
Show file tree

Hide file tree

Showing 6 changed files with 190 additions and 46 deletions.
diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-accordion/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-accordion/page.tsx
@@ -0,0 +1,58 @@
+'use client';
+import * as React from 'react';
+import AccordionExpandDefault from '../../../../../../docs/data/material/components/accordion/AccordionExpandDefault';
+import AccordionExpandIcon from '../../../../../../docs/data/material/components/accordion/AccordionExpandIcon';
+import AccordionTransition from '../../../../../../docs/data/material/components/accordion/AccordionTransition';
+import AccordionUsage from '../../../../../../docs/data/material/components/accordion/AccordionUsage';
+import ControlledAccordions from '../../../../../../docs/data/material/components/accordion/ControlledAccordions';
+import CustomizedAccordions from '../../../../../../docs/data/material/components/accordion/CustomizedAccordions';
+import DisabledAccordion from '../../../../../../docs/data/material/components/accordion/DisabledAccordion';
+
+export default function Accordion() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Accordion Expand Default</h2>
+        <div className="demo-container">
+          <AccordionExpandDefault />
+        </div>
+      </section>
+      <section>
+        <h2> Accordion Expand Icon</h2>
+        <div className="demo-container">
+          <AccordionExpandIcon />
+        </div>
+      </section>
+      <section>
+        <h2> Accordion Transition</h2>
+        <div className="demo-container">
+          <AccordionTransition />
+        </div>
+      </section>
+      <section>
+        <h2> Accordion Usage</h2>
+        <div className="demo-container">
+          <AccordionUsage />
+        </div>
+      </section>
+      <section>
+        <h2> Controlled Accordions</h2>
+        <div className="demo-container">
+          <ControlledAccordions />
+        </div>
+      </section>
+      <section>
+        <h2> Customized Accordions</h2>
+        <div className="demo-container">
+          <CustomizedAccordions />
+        </div>
+      </section>
+      <section>
+        <h2> Disabled Accordion</h2>
+        <div className="demo-container">
+          <DisabledAccordion />
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}
diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-accordion.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-accordion.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import MaterialUILayout from '../../Layout';
+import AccordionExpandDefault from '../../../../../docs/data/material/components/accordion/AccordionExpandDefault.tsx';
+import AccordionExpandIcon from '../../../../../docs/data/material/components/accordion/AccordionExpandIcon.tsx';
+import AccordionTransition from '../../../../../docs/data/material/components/accordion/AccordionTransition.tsx';
+import AccordionUsage from '../../../../../docs/data/material/components/accordion/AccordionUsage.tsx';
+import ControlledAccordions from '../../../../../docs/data/material/components/accordion/ControlledAccordions.tsx';
+import CustomizedAccordions from '../../../../../docs/data/material/components/accordion/CustomizedAccordions.tsx';
+import DisabledAccordion from '../../../../../docs/data/material/components/accordion/DisabledAccordion.tsx';
+
+export default function Accordion() {
+  return (
+    <MaterialUILayout>
+      <h1>Accordion</h1>
+      <section>
+        <h2> Accordion Expand Default</h2>
+        <div className="demo-container">
+          <AccordionExpandDefault />
+        </div>
+      </section>
+      <section>
+        <h2> Accordion Expand Icon</h2>
+        <div className="demo-container">
+          <AccordionExpandIcon />
+        </div>
+      </section>
+      <section>
+        <h2> Accordion Transition</h2>
+        <div className="demo-container">
+          <AccordionTransition />
+        </div>
+      </section>
+      <section>
+        <h2> Accordion Usage</h2>
+        <div className="demo-container">
+          <AccordionUsage />
+        </div>
+      </section>
+      <section>
+        <h2> Controlled Accordions</h2>
+        <div className="demo-container">
+          <ControlledAccordions />
+        </div>
+      </section>
+      <section>
+        <h2> Customized Accordions</h2>
+        <div className="demo-container">
+          <CustomizedAccordions />
+        </div>
+      </section>
+      <section>
+        <h2> Disabled Accordion</h2>
+        <div className="demo-container">
+          <DisabledAccordion />
+        </div>
+      </section>
+    </MaterialUILayout>
+  );
+}
diff --git a/packages/mui-material/src/Accordion/Accordion.js b/packages/mui-material/src/Accordion/Accordion.js
@@ -5,15 +5,16 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Collapse from '../Collapse';
 import Paper from '../Paper';
 import AccordionContext from './AccordionContext';
 import useControlled from '../utils/useControlled';
 import useSlot from '../utils/useSlot';
 import accordionClasses, { getAccordionUtilityClass } from './accordionClasses';
 
+const useThemeProps = createUseThemeProps('MuiAccordion');
+
 const useUtilityClasses = (ownerState) => {
   const { classes, square, expanded, disabled, disableGutters } = ownerState;
 
@@ -91,28 +92,36 @@ const AccordionRoot = styled(Paper, {
       },
     };
   },
-  ({ theme, ownerState }) => ({
-    ...(!ownerState.square && {
-      borderRadius: 0,
-      '&:first-of-type': {
-        borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
-        borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
-      },
-      '&:last-of-type': {
-        borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
-        borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
-        // Fix a rendering issue on Edge
-        '@supports (-ms-ime-align: auto)': {
-          borderBottomLeftRadius: 0,
-          borderBottomRightRadius: 0,
+  ({ theme }) => ({
+    variants: [
+      {
+        props: (props) => !props.square,
+        style: {
+          borderRadius: 0,
+          '&:first-of-type': {
+            borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+            borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
+          },
+          '&:last-of-type': {
+            borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
+            borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
+            // Fix a rendering issue on Edge
+            '@supports (-ms-ime-align: auto)': {
+              borderBottomLeftRadius: 0,
+              borderBottomRightRadius: 0,
+            },
+          },
         },
       },
-    }),
-    ...(!ownerState.disableGutters && {
-      [`&.${accordionClasses.expanded}`]: {
-        margin: '16px 0',
+      {
+        props: (props) => !props.disableGutters,
+        style: {
+          [`&.${accordionClasses.expanded}`]: {
+            margin: '16px 0',
+          },
+        },
       },
-    }),
+    ],
   }),
 );
 

diff --git a/packages/mui-material/src/AccordionActions/AccordionActions.js b/packages/mui-material/src/AccordionActions/AccordionActions.js
@@ -3,10 +3,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getAccordionActionsUtilityClass } from './accordionActionsClasses';
 
+const useThemeProps = createUseThemeProps('MuiAccordionActions');
+
 const useUtilityClasses = (ownerState) => {
   const { classes, disableSpacing } = ownerState;
 
@@ -25,17 +26,22 @@ const AccordionActionsRoot = styled('div', {
 
     return [styles.root, !ownerState.disableSpacing && styles.spacing];
   },
-})(({ ownerState }) => ({
+})({
   display: 'flex',
   alignItems: 'center',
   padding: 8,
   justifyContent: 'flex-end',
-  ...(!ownerState.disableSpacing && {
-    '& > :not(style) ~ :not(style)': {
-      marginLeft: 8,
+  variants: [
+    {
+      props: (props) => !props.disableSpacing,
+      style: {
+        '& > :not(style) ~ :not(style)': {
+          marginLeft: 8,
+        },
+      },
     },
-  }),
-}));
+  ],
+});
 
 const AccordionActions = React.forwardRef(function AccordionActions(inProps, ref) {
   const props = useThemeProps({ props: inProps, name: 'MuiAccordionActions' });

diff --git a/packages/mui-material/src/AccordionDetails/AccordionDetails.js b/packages/mui-material/src/AccordionDetails/AccordionDetails.js
@@ -3,10 +3,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getAccordionDetailsUtilityClass } from './accordionDetailsClasses';
 
+const useThemeProps = createUseThemeProps('MuiAccordionDetails');
+
 const useUtilityClasses = (ownerState) => {
   const { classes } = ownerState;
 

diff --git a/packages/mui-material/src/AccordionSummary/AccordionSummary.js b/packages/mui-material/src/AccordionSummary/AccordionSummary.js
@@ -3,14 +3,15 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import ButtonBase from '../ButtonBase';
 import AccordionContext from '../Accordion/AccordionContext';
 import accordionSummaryClasses, {
   getAccordionSummaryUtilityClass,
 } from './accordionSummaryClasses';
 
+const useThemeProps = createUseThemeProps('MuiAccordionSummary');
+
 const useUtilityClasses = (ownerState) => {
   const { classes, expanded, disabled, disableGutters } = ownerState;
 
@@ -28,7 +29,7 @@ const AccordionSummaryRoot = styled(ButtonBase, {
   name: 'MuiAccordionSummary',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})(({ theme, ownerState }) => {
+})(({ theme }) => {
   const transition = {
     duration: theme.transitions.duration.shortest,
   };
@@ -47,30 +48,40 @@ const AccordionSummaryRoot = styled(ButtonBase, {
     [`&:hover:not(.${accordionSummaryClasses.disabled})`]: {
       cursor: 'pointer',
     },
-    ...(!ownerState.disableGutters && {
-      [`&.${accordionSummaryClasses.expanded}`]: {
-        minHeight: 64,
+    variants: [
+      {
+        props: (props) => !props.disableGutters,
+        style: {
+          [`&.${accordionSummaryClasses.expanded}`]: {
+            minHeight: 64,
+          },
+        },
       },
-    }),
+    ],
   };
 });
 
 const AccordionSummaryContent = styled('div', {
   name: 'MuiAccordionSummary',
   slot: 'Content',
   overridesResolver: (props, styles) => styles.content,
-})(({ theme, ownerState }) => ({
+})(({ theme }) => ({
   display: 'flex',
   flexGrow: 1,
   margin: '12px 0',
-  ...(!ownerState.disableGutters && {
-    transition: theme.transitions.create(['margin'], {
-      duration: theme.transitions.duration.shortest,
-    }),
-    [`&.${accordionSummaryClasses.expanded}`]: {
-      margin: '20px 0',
+  variants: [
+    {
+      props: (props) => !props.disableGutters,
+      style: {
+        transition: theme.transitions.create(['margin'], {
+          duration: theme.transitions.duration.shortest,
+        }),
+        [`&.${accordionSummaryClasses.expanded}`]: {
+          margin: '20px 0',
+        },
+      },
     },
-  }),
+  ],
 }));
 
 const AccordionSummaryExpandIconWrapper = styled('div', {