From d94af9006828e26bb2452df7afb870ecfb4ab198 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Mon, 25 Jan 2021 11:56:15 -0300 Subject: [PATCH 1/4] feat: Migrate to emotion --- docs/pages/api-docs/dialog-actions.json | 5 +- .../dialog-actions/dialog-actions.json | 3 +- .../src/DialogActions/DialogActions.d.ts | 7 +- .../src/DialogActions/DialogActions.js | 79 ++++++++++++++----- .../src/DialogActions/DialogActions.test.js | 12 ++- .../DialogActions/dialogActionsClasses.d.ts | 10 +++ .../src/DialogActions/dialogActionsClasses.js | 9 +++ .../material-ui/src/DialogActions/index.d.ts | 2 + .../material-ui/src/DialogActions/index.js | 2 + 9 files changed, 100 insertions(+), 29 deletions(-) create mode 100644 packages/material-ui/src/DialogActions/dialogActionsClasses.d.ts create mode 100644 packages/material-ui/src/DialogActions/dialogActionsClasses.js diff --git a/docs/pages/api-docs/dialog-actions.json b/docs/pages/api-docs/dialog-actions.json index ef5bc2588940ff..78b2bd5a0f737f 100644 --- a/docs/pages/api-docs/dialog-actions.json +++ b/docs/pages/api-docs/dialog-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": "DialogActions", "styles": { "classes": ["root", "spacing"], "globalClasses": {}, "name": "MuiDialogActions" }, @@ -11,6 +12,6 @@ "filename": "/packages/material-ui/src/DialogActions/DialogActions.js", "inheritance": null, "demos": "", - "styledComponent": false, + "styledComponent": true, "cssComponent": false } diff --git a/docs/translations/api-docs/dialog-actions/dialog-actions.json b/docs/translations/api-docs/dialog-actions/dialog-actions.json index 52b117283775a2..3d3e91923f6c1f 100644 --- a/docs/translations/api-docs/dialog-actions/dialog-actions.json +++ b/docs/translations/api-docs/dialog-actions/dialog-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/DialogActions/DialogActions.d.ts b/packages/material-ui/src/DialogActions/DialogActions.d.ts index 00077bade9e7b1..e2a2a08c1dd937 100644 --- a/packages/material-ui/src/DialogActions/DialogActions.d.ts +++ b/packages/material-ui/src/DialogActions/DialogActions.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 DialogActionsProps extends StandardProps> { /** @@ -15,6 +16,10 @@ export interface DialogActionsProps extends StandardProps; /** * If `true`, the actions do not have additional margin. * @default false diff --git a/packages/material-ui/src/DialogActions/DialogActions.js b/packages/material-ui/src/DialogActions/DialogActions.js index aab91751f5b2e4..f4754ea6c3639f 100644 --- a/packages/material-ui/src/DialogActions/DialogActions.js +++ b/packages/material-ui/src/DialogActions/DialogActions.js @@ -1,31 +1,68 @@ 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 { getDialogActionsUtilityClass } from './dialogActionsClasses'; -export const styles = { - /* Styles applied to the root element. */ - root: { - display: 'flex', - alignItems: 'center', - padding: 8, - justifyContent: 'flex-end', - flex: '0 0 auto', +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, getDialogActionsUtilityClass, classes); +}; + +const DialogActionsRoot = experimentalStyled( + 'div', + {}, + { + name: 'MuiDialogActions', + slot: 'Root', + overridesResolver, }, +)(({ styleProps }) => ({ + /* Styles applied to the root element. */ + display: 'flex', + alignItems: 'center', + padding: 8, + justifyContent: 'flex-end', + flex: '0 0 auto', + backgroundColor: 'red', /* Styles applied to the root element unless `disableSpacing={true}`. */ - spacing: { - '& > :not(:first-child)': { + ...(!styleProps.disableSpacing && { + '& > :not(:first-of-type)': { marginLeft: 8, }, - }, -}; + }), +})); + +const DialogActions = React.forwardRef(function DialogActions(inProps, ref) { + const props = useThemeProps({ + props: inProps, + name: 'MuiDialogActions', + }); -const DialogActions = React.forwardRef(function DialogActions(props, ref) { - const { disableSpacing = false, classes, className, ...other } = props; + const { className, disableSpacing = false, ...other } = props; + const styleProps = { ...props, disableSpacing }; + const classes = useUtilityClasses(styleProps); return ( -
@@ -54,6 +91,12 @@ DialogActions.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: 'MuiDialogActions' })(DialogActions); +DialogActions.name = 'MuiDialogActions'; + +export default DialogActions; diff --git a/packages/material-ui/src/DialogActions/DialogActions.test.js b/packages/material-ui/src/DialogActions/DialogActions.test.js index 4dba96cb82fbe5..c130bfcd8132de 100644 --- a/packages/material-ui/src/DialogActions/DialogActions.test.js +++ b/packages/material-ui/src/DialogActions/DialogActions.test.js @@ -1,20 +1,18 @@ import * as React from 'react'; -import { getClasses, createMount, describeConformance } from 'test/utils'; +import { createMount, describeConformance } from 'test/utils'; import DialogActions from './DialogActions'; +import classes from './dialogActionsClasses'; describe('', () => { const mount = createMount(); - let classes; - - before(() => { - classes = getClasses(); - }); describeConformance(, () => ({ classes, inheritComponent: 'div', mount, refInstanceof: window.HTMLDivElement, - skip: ['componentProp'], + muiName: 'MuiDialogActions', + testVariantProps: { disableSpacing: true }, + skip: ['componentProp', 'componentsProp'], })); }); diff --git a/packages/material-ui/src/DialogActions/dialogActionsClasses.d.ts b/packages/material-ui/src/DialogActions/dialogActionsClasses.d.ts new file mode 100644 index 00000000000000..231eadda6dd7c6 --- /dev/null +++ b/packages/material-ui/src/DialogActions/dialogActionsClasses.d.ts @@ -0,0 +1,10 @@ +export interface DialogActionsClasses { + root: string; + spacing: string; +} + +declare const dialogActionsClasses: DialogActionsClasses; + +export function getDialogActionsUtilityClass(slot: string): string; + +export default dialogActionsClasses; diff --git a/packages/material-ui/src/DialogActions/dialogActionsClasses.js b/packages/material-ui/src/DialogActions/dialogActionsClasses.js new file mode 100644 index 00000000000000..248fa8696a421c --- /dev/null +++ b/packages/material-ui/src/DialogActions/dialogActionsClasses.js @@ -0,0 +1,9 @@ +import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; + +export function getDialogActionsUtilityClass(slot) { + return generateUtilityClass('MuiDialogActions', slot); +} + +const dialogActionsClasses = generateUtilityClasses('MuiDialogActions', ['root', 'spacing']); + +export default dialogActionsClasses; diff --git a/packages/material-ui/src/DialogActions/index.d.ts b/packages/material-ui/src/DialogActions/index.d.ts index bd8b2b8032c261..1c98aee7f1c25f 100644 --- a/packages/material-ui/src/DialogActions/index.d.ts +++ b/packages/material-ui/src/DialogActions/index.d.ts @@ -1,2 +1,4 @@ export { default } from './DialogActions'; export * from './DialogActions'; +export { default as dialogActionsClasses } from './dialogActionsClasses'; +export * from './dialogActionsClasses'; diff --git a/packages/material-ui/src/DialogActions/index.js b/packages/material-ui/src/DialogActions/index.js index 87231228cf88bb..b6e8e52cdd346f 100644 --- a/packages/material-ui/src/DialogActions/index.js +++ b/packages/material-ui/src/DialogActions/index.js @@ -1 +1,3 @@ export { default } from './DialogActions'; +export { default as dialogActionsClasses } from './dialogActionsClasses'; +export * from './dialogActionsClasses'; From 43520ab093512a47165632cbdfdc3bc79d072d7d Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Mon, 25 Jan 2021 12:26:52 -0300 Subject: [PATCH 2/4] fix: style css --- packages/material-ui/src/DialogActions/DialogActions.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/material-ui/src/DialogActions/DialogActions.js b/packages/material-ui/src/DialogActions/DialogActions.js index f4754ea6c3639f..4654659e721338 100644 --- a/packages/material-ui/src/DialogActions/DialogActions.js +++ b/packages/material-ui/src/DialogActions/DialogActions.js @@ -40,7 +40,6 @@ const DialogActionsRoot = experimentalStyled( padding: 8, justifyContent: 'flex-end', flex: '0 0 auto', - backgroundColor: 'red', /* Styles applied to the root element unless `disableSpacing={true}`. */ ...(!styleProps.disableSpacing && { '& > :not(:first-of-type)': { From d60424c6eeba755e41f8caeb4738563705e78c47 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Mon, 25 Jan 2021 13:09:02 -0300 Subject: [PATCH 3/4] fix: Update component DialogAction --- packages/material-ui/src/DialogActions/DialogActions.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/material-ui/src/DialogActions/DialogActions.js b/packages/material-ui/src/DialogActions/DialogActions.js index 4654659e721338..01de32471234c2 100644 --- a/packages/material-ui/src/DialogActions/DialogActions.js +++ b/packages/material-ui/src/DialogActions/DialogActions.js @@ -96,6 +96,4 @@ DialogActions.propTypes = { sx: PropTypes.object, }; -DialogActions.name = 'MuiDialogActions'; - export default DialogActions; From 2170e4cb6c10cdb16fe7fe59ac334a75d360d5db Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Mon, 25 Jan 2021 13:57:51 -0300 Subject: [PATCH 4/4] test: Update --- packages/material-ui/src/DialogActions/DialogActions.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/material-ui/src/DialogActions/DialogActions.test.js b/packages/material-ui/src/DialogActions/DialogActions.test.js index c130bfcd8132de..2796d53df360ac 100644 --- a/packages/material-ui/src/DialogActions/DialogActions.test.js +++ b/packages/material-ui/src/DialogActions/DialogActions.test.js @@ -1,12 +1,12 @@ import * as React from 'react'; -import { createMount, describeConformance } from 'test/utils'; +import { createMount, describeConformanceV5 } from 'test/utils'; import DialogActions from './DialogActions'; import classes from './dialogActionsClasses'; describe('', () => { const mount = createMount(); - describeConformance(, () => ({ + describeConformanceV5(, () => ({ classes, inheritComponent: 'div', mount,