From 24553647b1cbff19c36619f4c12b712dea5e5f80 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Mon, 25 Jan 2021 15:12:34 -0300 Subject: [PATCH 1/4] feat: Migrate to emotion --- docs/pages/api-docs/dialog-title.json | 5 +- .../api-docs/dialog-title/dialog-title.json | 3 +- .../src/DialogTitle/DialogTitle.d.ts | 7 ++- .../src/DialogTitle/DialogTitle.js | 62 +++++++++++++++---- .../src/DialogTitle/DialogTitle.test.js | 14 ++--- .../src/DialogTitle/dialogTitleClasses.d.ts | 9 +++ .../src/DialogTitle/dialogTitleClasses.js | 9 +++ .../material-ui/src/DialogTitle/index.d.ts | 2 + packages/material-ui/src/DialogTitle/index.js | 2 + 9 files changed, 90 insertions(+), 23 deletions(-) create mode 100644 packages/material-ui/src/DialogTitle/dialogTitleClasses.d.ts create mode 100644 packages/material-ui/src/DialogTitle/dialogTitleClasses.js diff --git a/docs/pages/api-docs/dialog-title.json b/docs/pages/api-docs/dialog-title.json index 2e4c20a05c87c6..ba3c91018022d9 100644 --- a/docs/pages/api-docs/dialog-title.json +++ b/docs/pages/api-docs/dialog-title.json @@ -2,7 +2,8 @@ "props": { "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" } }, - "disableTypography": { "type": { "name": "bool" } } + "disableTypography": { "type": { "name": "bool" } }, + "sx": { "type": { "name": "object" } } }, "name": "DialogTitle", "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiDialogTitle" }, @@ -11,6 +12,6 @@ "filename": "/packages/material-ui/src/DialogTitle/DialogTitle.js", "inheritance": null, "demos": "", - "styledComponent": false, + "styledComponent": true, "cssComponent": false } diff --git a/docs/translations/api-docs/dialog-title/dialog-title.json b/docs/translations/api-docs/dialog-title/dialog-title.json index e94c9c45476891..5c0cf1826837a4 100644 --- a/docs/translations/api-docs/dialog-title/dialog-title.json +++ b/docs/translations/api-docs/dialog-title/dialog-title.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.", - "disableTypography": "If true, the children won't be wrapped by a typography component. For instance, this can be useful to render an h4 instead of the default h2." + "disableTypography": "If true, the children won't be wrapped by a typography component. For instance, this can be useful to render an h4 instead of the default h2.", + "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/DialogTitle/DialogTitle.d.ts b/packages/material-ui/src/DialogTitle/DialogTitle.d.ts index 17e99ccad85c57..fd523f3e2a8a36 100644 --- a/packages/material-ui/src/DialogTitle/DialogTitle.d.ts +++ b/packages/material-ui/src/DialogTitle/DialogTitle.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 DialogTitleProps extends StandardProps> { /** @@ -13,6 +14,10 @@ export interface DialogTitleProps extends StandardProps; /** * If `true`, the children won't be wrapped by a typography component. * For instance, this can be useful to render an h4 instead of the default h2. diff --git a/packages/material-ui/src/DialogTitle/DialogTitle.js b/packages/material-ui/src/DialogTitle/DialogTitle.js index 5b193813a85970..79e245d5871cc5 100644 --- a/packages/material-ui/src/DialogTitle/DialogTitle.js +++ b/packages/material-ui/src/DialogTitle/DialogTitle.js @@ -1,23 +1,59 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import withStyles from '../styles/withStyles'; +import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import Typography from '../Typography'; +import experimentalStyled from '../styles/experimentalStyled'; +import useThemeProps from '../styles/useThemeProps'; +import Paper from '../Paper'; +import { getDialogTitleUtilityClass } from './dialogTitleClasses'; -export const styles = { - /* Styles applied to the root element. */ - root: { +const overridesResolver = (props, styles) => styles.root || {}; + +const useUtilityClasses = (styleProps) => { + const { classes } = styleProps; + + const slots = { + root: ['root'], + }; + + return composeClasses(slots, getDialogTitleUtilityClass, classes); +}; + +const DialogTitleRoot = experimentalStyled( + Paper, + {}, + { + name: 'MuiDialogTitle', + slot: 'Root', + overridesResolver, + }, +)(() => { + return { + /* Styles applied to the root element. */ margin: 0, padding: '16px 24px', flex: '0 0 auto', - }, -}; + }; +}); -const DialogTitle = React.forwardRef(function DialogTitle(props, ref) { - const { children, classes, className, disableTypography = false, ...other } = props; +const DialogTitle = React.forwardRef(function DialogTitle(inProps, ref) { + const props = useThemeProps({ + props: inProps, + name: 'MuiDialogTitle', + }); + + const { children, className, disableTypography = false, ...other } = props; + const styleProps = { ...props }; + const classes = useUtilityClasses(styleProps); return ( -
+ {disableTypography ? ( children ) : ( @@ -25,7 +61,7 @@ const DialogTitle = React.forwardRef(function DialogTitle(props, ref) { {children} )} -
+ ); }); @@ -52,6 +88,10 @@ DialogTitle.propTypes = { * @default false */ disableTypography: PropTypes.bool, + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.object, }; -export default withStyles(styles, { name: 'MuiDialogTitle' })(DialogTitle); +export default DialogTitle; diff --git a/packages/material-ui/src/DialogTitle/DialogTitle.test.js b/packages/material-ui/src/DialogTitle/DialogTitle.test.js index da5466eaa9063a..edbdf7a8e8950d 100644 --- a/packages/material-ui/src/DialogTitle/DialogTitle.test.js +++ b/packages/material-ui/src/DialogTitle/DialogTitle.test.js @@ -1,22 +1,20 @@ import * as React from 'react'; -import { getClasses, createMount, describeConformance, createClientRender } from 'test/utils'; +import { createMount, describeConformanceV5, createClientRender } from 'test/utils'; import DialogTitle from './DialogTitle'; +import classes from './dialogTitleClasses'; describe('', () => { const mount = createMount(); const render = createClientRender(); - let classes; - before(() => { - classes = getClasses(foo); - }); - - describeConformance(foo, () => ({ + describeConformanceV5(foo, () => ({ classes, inheritComponent: 'div', mount, + muiName: 'MuiDialogTitle', refInstanceof: window.HTMLDivElement, - skip: ['componentProp'], + testVariantProps: { disableTypography: true }, + skip: ['componentProp', 'componentsProp'], })); it('should render JSX children', () => { diff --git a/packages/material-ui/src/DialogTitle/dialogTitleClasses.d.ts b/packages/material-ui/src/DialogTitle/dialogTitleClasses.d.ts new file mode 100644 index 00000000000000..08c1f74a2808a1 --- /dev/null +++ b/packages/material-ui/src/DialogTitle/dialogTitleClasses.d.ts @@ -0,0 +1,9 @@ +export interface DialogTitleClasses { + root: string; +} + +declare const dialogTitleClasses: DialogTitleClasses; + +export function getDialogTitleUtilityClass(slot: string): string; + +export default dialogTitleClasses; diff --git a/packages/material-ui/src/DialogTitle/dialogTitleClasses.js b/packages/material-ui/src/DialogTitle/dialogTitleClasses.js new file mode 100644 index 00000000000000..f083b22e1d4b29 --- /dev/null +++ b/packages/material-ui/src/DialogTitle/dialogTitleClasses.js @@ -0,0 +1,9 @@ +import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; + +export function getDialogTitleUtilityClass(slot) { + return generateUtilityClass('MuiDialogTitle', slot); +} + +const dialogTitleClasses = generateUtilityClasses('MuiDialogTitle', ['root']); + +export default dialogTitleClasses; diff --git a/packages/material-ui/src/DialogTitle/index.d.ts b/packages/material-ui/src/DialogTitle/index.d.ts index f2d576011232d6..d89654b25f74fe 100644 --- a/packages/material-ui/src/DialogTitle/index.d.ts +++ b/packages/material-ui/src/DialogTitle/index.d.ts @@ -1,2 +1,4 @@ export { default } from './DialogTitle'; export * from './DialogTitle'; +export { default as dialogTitleClasses } from './dialogTitleClasses'; +export * from './dialogTitleClasses'; diff --git a/packages/material-ui/src/DialogTitle/index.js b/packages/material-ui/src/DialogTitle/index.js index 69720d1cddbc6e..52d3ec908acd69 100644 --- a/packages/material-ui/src/DialogTitle/index.js +++ b/packages/material-ui/src/DialogTitle/index.js @@ -1 +1,3 @@ export { default } from './DialogTitle'; +export { default as dialogTitleClasses } from './dialogTitleClasses'; +export * from './dialogTitleClasses'; From 2edf7f5f3a53d738ca82a683b2efac6fc3b1d667 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Mon, 25 Jan 2021 15:19:52 -0300 Subject: [PATCH 2/4] fix: Change default component root --- packages/material-ui/src/DialogTitle/DialogTitle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/DialogTitle/DialogTitle.js b/packages/material-ui/src/DialogTitle/DialogTitle.js index 79e245d5871cc5..1851fa400cd87e 100644 --- a/packages/material-ui/src/DialogTitle/DialogTitle.js +++ b/packages/material-ui/src/DialogTitle/DialogTitle.js @@ -21,7 +21,7 @@ const useUtilityClasses = (styleProps) => { }; const DialogTitleRoot = experimentalStyled( - Paper, + 'div', {}, { name: 'MuiDialogTitle', From 3393b7a902d0b5ea6bd931335b36daeb489a9fe3 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Mon, 25 Jan 2021 15:20:40 -0300 Subject: [PATCH 3/4] fix: Delete import component Paper --- packages/material-ui/src/DialogTitle/DialogTitle.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/material-ui/src/DialogTitle/DialogTitle.js b/packages/material-ui/src/DialogTitle/DialogTitle.js index 1851fa400cd87e..86ffc206dae647 100644 --- a/packages/material-ui/src/DialogTitle/DialogTitle.js +++ b/packages/material-ui/src/DialogTitle/DialogTitle.js @@ -5,7 +5,6 @@ import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled import Typography from '../Typography'; import experimentalStyled from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; -import Paper from '../Paper'; import { getDialogTitleUtilityClass } from './dialogTitleClasses'; const overridesResolver = (props, styles) => styles.root || {}; From d3ffc3638e099343b5a1b7defeb87ff79966ea01 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 26 Jan 2021 10:30:32 +0100 Subject: [PATCH 4/4] Update packages/material-ui/src/DialogTitle/DialogTitle.js --- packages/material-ui/src/DialogTitle/DialogTitle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/DialogTitle/DialogTitle.js b/packages/material-ui/src/DialogTitle/DialogTitle.js index 86ffc206dae647..b3d9dee9e91270 100644 --- a/packages/material-ui/src/DialogTitle/DialogTitle.js +++ b/packages/material-ui/src/DialogTitle/DialogTitle.js @@ -43,7 +43,7 @@ const DialogTitle = React.forwardRef(function DialogTitle(inProps, ref) { }); const { children, className, disableTypography = false, ...other } = props; - const styleProps = { ...props }; + const styleProps = { ...props, disableTypography }; const classes = useUtilityClasses(styleProps); return (