diff --git a/docs/pages/api-docs/accordion-actions.json b/docs/pages/api-docs/accordion-actions.json
index 5213ad669034f0..8bac62912da24f 100644
--- a/docs/pages/api-docs/accordion-actions.json
+++ b/docs/pages/api-docs/accordion-actions.json
@@ -2,7 +2,8 @@
"props": {
"children": { "type": { "name": "node" } },
"classes": { "type": { "name": "object" } },
- "disableSpacing": { "type": { "name": "bool" } }
+ "disableSpacing": { "type": { "name": "bool" } },
+ "sx": { "type": { "name": "object" } }
},
"name": "AccordionActions",
"styles": { "classes": ["root", "spacing"], "globalClasses": {}, "name": "MuiAccordionActions" },
@@ -11,6 +12,6 @@
"filename": "/packages/material-ui/src/AccordionActions/AccordionActions.js",
"inheritance": null,
"demos": "
",
- "styledComponent": false,
+ "styledComponent": true,
"cssComponent": false
}
diff --git a/docs/translations/api-docs/accordion-actions/accordion-actions.json b/docs/translations/api-docs/accordion-actions/accordion-actions.json
index 52b117283775a2..3d3e91923f6c1f 100644
--- a/docs/translations/api-docs/accordion-actions/accordion-actions.json
+++ b/docs/translations/api-docs/accordion-actions/accordion-actions.json
@@ -3,7 +3,8 @@
"propDescriptions": {
"children": "The content of the component.",
"classes": "Override or extend the styles applied to the component. See CSS API below for more details.",
- "disableSpacing": "If true
, the actions do not have additional margin."
+ "disableSpacing": "If true
, the actions do not have additional margin.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
},
"classDescriptions": {
"root": { "description": "Styles applied to the root element." },
diff --git a/packages/material-ui/src/AccordionActions/AccordionActions.d.ts b/packages/material-ui/src/AccordionActions/AccordionActions.d.ts
index 34baee1ff3246c..ee12853b9721b0 100644
--- a/packages/material-ui/src/AccordionActions/AccordionActions.d.ts
+++ b/packages/material-ui/src/AccordionActions/AccordionActions.d.ts
@@ -1,5 +1,6 @@
import * as React from 'react';
-import { InternalStandardProps as StandardProps } from '..';
+import { SxProps } from '@material-ui/system';
+import { InternalStandardProps as StandardProps, Theme } from '..';
export interface AccordionActionsProps extends StandardProps> {
/**
@@ -20,6 +21,10 @@ export interface AccordionActionsProps extends StandardProps;
}
export type AccordionActionsClassKey = keyof NonNullable;
diff --git a/packages/material-ui/src/AccordionActions/AccordionActions.js b/packages/material-ui/src/AccordionActions/AccordionActions.js
index d425275d2e54d3..367b0a0b6b4828 100644
--- a/packages/material-ui/src/AccordionActions/AccordionActions.js
+++ b/packages/material-ui/src/AccordionActions/AccordionActions.js
@@ -1,31 +1,64 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
-import withStyles from '../styles/withStyles';
+import { deepmerge } from '@material-ui/utils';
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
+import experimentalStyled from '../styles/experimentalStyled';
+import useThemeProps from '../styles/useThemeProps';
+import { getAccordionActionsUtilityClass } from './accordionActionsClasses';
-export const styles = {
- /* Styles applied to the root element. */
- root: {
- display: 'flex',
- alignItems: 'center',
- padding: 8,
- justifyContent: 'flex-end',
+const overridesResolver = (props, styles) => {
+ const { styleProps } = props;
+
+ return deepmerge(styles.root || {}, {
+ ...(!styleProps.disableSpacing && styles.spacing),
+ });
+};
+
+const useUtilityClasses = (styleProps) => {
+ const { classes, disableSpacing } = styleProps;
+
+ const slots = {
+ root: ['root', !disableSpacing && 'spacing'],
+ };
+
+ return composeClasses(slots, getAccordionActionsUtilityClass, classes);
+};
+
+const AccordionActionsRoot = experimentalStyled(
+ 'div',
+ {},
+ {
+ name: 'MuiAccordionActions',
+ slot: 'Root',
+ overridesResolver,
},
+)(({ styleProps }) => ({
+ /* Styles applied to the root element. */
+ display: 'flex',
+ alignItems: 'center',
+ padding: 8,
+ justifyContent: 'flex-end',
/* Styles applied to the root element unless `disableSpacing={true}`. */
- spacing: {
- '& > :not(:first-child)': {
+ ...(!styleProps.disableSpacing && {
+ '& > :not(:first-of-type)': {
marginLeft: 8,
},
- },
-};
+ }),
+}));
-const AccordionActions = React.forwardRef(function AccordionActions(props, ref) {
- const { classes, className, disableSpacing = false, ...other } = props;
+const AccordionActions = React.forwardRef(function AccordionActions(inProps, ref) {
+ const props = useThemeProps({ props: inProps, name: 'MuiAccordionActions' });
+ const { className, disableSpacing = false, ...other } = props;
+ const styleProps = { ...props, disableSpacing };
+
+ const classes = useUtilityClasses(styleProps);
return (
-
);
@@ -53,6 +86,10 @@ AccordionActions.propTypes = {
* @default false
*/
disableSpacing: PropTypes.bool,
+ /**
+ * The system prop that allows defining system overrides as well as additional CSS styles.
+ */
+ sx: PropTypes.object,
};
-export default withStyles(styles, { name: 'MuiAccordionActions' })(AccordionActions);
+export default AccordionActions;
diff --git a/packages/material-ui/src/AccordionActions/AccordionActions.test.js b/packages/material-ui/src/AccordionActions/AccordionActions.test.js
index cee1de671d2a4b..b5a58a8249ccb1 100644
--- a/packages/material-ui/src/AccordionActions/AccordionActions.test.js
+++ b/packages/material-ui/src/AccordionActions/AccordionActions.test.js
@@ -1,20 +1,18 @@
import * as React from 'react';
-import { getClasses, createMount, describeConformance } from 'test/utils';
+import { createMount, describeConformanceV5 } from 'test/utils';
import AccordionActions from './AccordionActions';
+import classes from './accordionActionsClasses';
describe('', () => {
const mount = createMount();
- let classes;
- before(() => {
- classes = getClasses(foo);
- });
-
- describeConformance(Conformance, () => ({
+ describeConformanceV5(Conformance, () => ({
classes,
inheritComponent: 'div',
mount,
refInstanceof: window.HTMLDivElement,
- skip: ['componentProp'],
+ muiName: 'MuiAccordionActions',
+ testVariantProps: { disableSpacing: true },
+ skip: ['componentProp', 'componentsProp'],
}));
});
diff --git a/packages/material-ui/src/AccordionActions/accordionActionsClasses.d.ts b/packages/material-ui/src/AccordionActions/accordionActionsClasses.d.ts
new file mode 100644
index 00000000000000..ef4402339bd098
--- /dev/null
+++ b/packages/material-ui/src/AccordionActions/accordionActionsClasses.d.ts
@@ -0,0 +1,10 @@
+export interface AccordionActionsClasses {
+ root: string;
+ spacing: string;
+}
+
+declare const accordionActionsClasses: AccordionActionsClasses;
+
+export function getAccordionActionsUtilityClass(slot: string): string;
+
+export default accordionActionsClasses;
diff --git a/packages/material-ui/src/AccordionActions/accordionActionsClasses.js b/packages/material-ui/src/AccordionActions/accordionActionsClasses.js
new file mode 100644
index 00000000000000..076f1be91d6da2
--- /dev/null
+++ b/packages/material-ui/src/AccordionActions/accordionActionsClasses.js
@@ -0,0 +1,9 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getAccordionActionsUtilityClass(slot) {
+ return generateUtilityClass('MuiAccordionActions', slot);
+}
+
+const accordionActionsClasses = generateUtilityClasses('MuiAccordionActions', ['root', 'spacing']);
+
+export default accordionActionsClasses;
diff --git a/packages/material-ui/src/AccordionActions/index.d.ts b/packages/material-ui/src/AccordionActions/index.d.ts
index f5b4b351fca1f0..7c2bf2d04d5b70 100644
--- a/packages/material-ui/src/AccordionActions/index.d.ts
+++ b/packages/material-ui/src/AccordionActions/index.d.ts
@@ -1,2 +1,5 @@
export { default } from './AccordionActions';
export * from './AccordionActions';
+
+export { default as accordionActionsClasses } from './accordionActionsClasses';
+export * from './accordionActionsClasses';
diff --git a/packages/material-ui/src/AccordionActions/index.js b/packages/material-ui/src/AccordionActions/index.js
index 929ebfd5671c2f..a3292ff6ef4ed3 100644
--- a/packages/material-ui/src/AccordionActions/index.js
+++ b/packages/material-ui/src/AccordionActions/index.js
@@ -1 +1,4 @@
export { default } from './AccordionActions';
+
+export { default as accordionActionsClasses } from './accordionActionsClasses';
+export * from './accordionActionsClasses';