From 9f452694c574e99d0c3e04ff9942483d9d4f52f2 Mon Sep 17 00:00:00 2001 From: povilass Date: Wed, 13 Jan 2021 20:06:03 +0200 Subject: [PATCH 1/4] [Paper] Migrate to emotion --- .../src/MobileStepper/MobileStepper.test.js | 3 +- packages/material-ui/src/Paper/Paper.d.ts | 6 + packages/material-ui/src/Paper/Paper.js | 106 +++++++++++------- packages/material-ui/src/Paper/Paper.test.js | 13 +-- packages/material-ui/src/Paper/index.d.ts | 2 + packages/material-ui/src/Paper/index.js | 2 + .../material-ui/src/Paper/paperClasses.d.ts | 37 ++++++ .../material-ui/src/Paper/paperClasses.js | 39 +++++++ 8 files changed, 158 insertions(+), 50 deletions(-) create mode 100644 packages/material-ui/src/Paper/paperClasses.d.ts create mode 100644 packages/material-ui/src/Paper/paperClasses.js diff --git a/packages/material-ui/src/MobileStepper/MobileStepper.test.js b/packages/material-ui/src/MobileStepper/MobileStepper.test.js index 4013e21ad464db..50f4085b005ee0 100644 --- a/packages/material-ui/src/MobileStepper/MobileStepper.test.js +++ b/packages/material-ui/src/MobileStepper/MobileStepper.test.js @@ -9,7 +9,7 @@ import { } from 'test/utils'; import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft'; import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight'; -import Paper from '../Paper'; +import Paper, {paperClasses} from '../Paper'; import Button from '../Button/Button'; import MobileStepper from './MobileStepper'; @@ -47,7 +47,6 @@ describe('', () => { it('should render a Paper with 0 elevation', () => { const { container } = render(); - const paperClasses = getClasses(); expect(container.firstChild).to.have.class(paperClasses.elevation0); }); diff --git a/packages/material-ui/src/Paper/Paper.d.ts b/packages/material-ui/src/Paper/Paper.d.ts index 010593284ccd22..1e02af81f856bb 100644 --- a/packages/material-ui/src/Paper/Paper.d.ts +++ b/packages/material-ui/src/Paper/Paper.d.ts @@ -1,5 +1,7 @@ import * as React from 'react'; +import { SxProps } from "@material-ui/system"; import { OverridableStringUnion } from '@material-ui/types'; +import { Theme } from '../styles'; import { InternalStandardProps as StandardProps } from '..'; export interface PaperPropsVariantOverrides {} @@ -69,6 +71,10 @@ export interface PaperProps extends StandardProps; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; } export type PaperClassKey = keyof NonNullable; diff --git a/packages/material-ui/src/Paper/Paper.js b/packages/material-ui/src/Paper/Paper.js index a0ef15ad33d2f3..cad23aa3732cf8 100644 --- a/packages/material-ui/src/Paper/Paper.js +++ b/packages/material-ui/src/Paper/Paper.js @@ -1,42 +1,72 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { useThemeVariants } from '@material-ui/styles'; -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 useTheme from '../styles/useTheme'; +import {getPaperUtilityClass} from "./paperClasses"; -export const styles = (theme) => { - const elevations = {}; - theme.shadows.forEach((shadow, index) => { - elevations[`elevation${index}`] = { - boxShadow: shadow, - }; +const overridesResolver = (props, styles) => { + const { styleProps } = props; + + return deepmerge(styles.root || {}, { + ...styles[styleProps.variant], + ...(!styleProps.square && styles.rounded), + ...(styleProps.variant === "elevation" && styles[`elevation${styleProps.elevation}`]), }); +}; + +const useUtilityClasses = (styleProps) => { + const { square, elevation, variant, classes} = styleProps; + + const slots = { + root: [ + 'root', + variant, + !square && 'rounded', + variant === 'elevation' && `elevation${elevation}`, + ], + }; + + return composeClasses({ slots, classes, getUtilityClass: getPaperUtilityClass }); +}; + +const PaperRoot = experimentalStyled( + "div", + {}, + { + name: 'MuiPaper', + slot: 'Root', + overridesResolver, + } +)(({theme, styleProps}) => { return { /* Styles applied to the root element. */ - root: { - backgroundColor: theme.palette.background.paper, - color: theme.palette.text.primary, - transition: theme.transitions.create('box-shadow'), - }, + backgroundColor: theme.palette.background.paper, + color: theme.palette.text.primary, + transition: theme.transitions.create('box-shadow'), /* Styles applied to the root element unless `square={true}`. */ - rounded: { + ...(!styleProps.square && { borderRadius: theme.shape.borderRadius, - }, + }), /* Styles applied to the root element if `variant="outlined"`. */ - outlined: { + ...(styleProps.variant === "outlined" && { border: `1px solid ${theme.palette.divider}`, - }, + }), /* Styles applied to the root element if `variant="elevation"`. */ - elevation: {}, - ...elevations, - }; -}; + ...(styleProps.variant === "elevation" && { + boxShadow : theme.shadows[styleProps.elevation] + }), + } +}); + +const Paper = React.forwardRef(function Paper(inProps, ref) { + const props = useThemeProps({props: inProps, name: 'MuiPaper'}); -const Paper = React.forwardRef(function Paper(props, ref) { const { - classes, className, component: Component = 'div', square = false, @@ -45,16 +75,14 @@ const Paper = React.forwardRef(function Paper(props, ref) { ...other } = props; - const themeVariantsClasses = useThemeVariants( - { - ...props, - component: Component, - square, - elevation, - variant, - }, - 'MuiPaper', - ); + const styleProps = { + ...props, + variant, + elevation, + square + }; + + const classes = useUtilityClasses(styleProps); if (process.env.NODE_ENV !== 'production') { // eslint-disable-next-line react-hooks/rules-of-hooks @@ -70,15 +98,11 @@ const Paper = React.forwardRef(function Paper(props, ref) { } return ( - ', () => { const mount = createMount(); const render = createClientRender(); - let classes; - before(() => { - classes = getClasses(); - }); - - describeConformance(, () => ({ + describeConformanceV5(, () => ({ classes, inheritComponent: 'div', mount, + muiName: 'MuiPaper', refInstanceof: window.HTMLDivElement, testComponentPropWith: 'header', + testVariantProps: {variant: 'rounded'}, + skip: ['componentsProp'], })); describe('prop: square', () => { diff --git a/packages/material-ui/src/Paper/index.d.ts b/packages/material-ui/src/Paper/index.d.ts index d40fffd9883330..238f99f35769ca 100644 --- a/packages/material-ui/src/Paper/index.d.ts +++ b/packages/material-ui/src/Paper/index.d.ts @@ -1,2 +1,4 @@ export { default } from './Paper'; export * from './Paper'; +export { default as paperClasses } from './paperClasses'; +export * from './paperClasses'; diff --git a/packages/material-ui/src/Paper/index.js b/packages/material-ui/src/Paper/index.js index 559d1a73e5034f..cd47085da76189 100644 --- a/packages/material-ui/src/Paper/index.js +++ b/packages/material-ui/src/Paper/index.js @@ -1 +1,3 @@ export { default } from './Paper'; +export { default as paperClasses } from './paperClasses'; +export * from './paperClasses'; diff --git a/packages/material-ui/src/Paper/paperClasses.d.ts b/packages/material-ui/src/Paper/paperClasses.d.ts new file mode 100644 index 00000000000000..405cf4a811d504 --- /dev/null +++ b/packages/material-ui/src/Paper/paperClasses.d.ts @@ -0,0 +1,37 @@ +export interface PaperClasses { + root: string; + rounded: string; + outlined: string; + elevation: string; + elevation0: string; + elevation1: string; + elevation2: string; + elevation3: string; + elevation4: string; + elevation5: string; + elevation6: string; + elevation7: string; + elevation8: string; + elevation9: string; + elevation10: string; + elevation11: string; + elevation12: string; + elevation13: string; + elevation14: string; + elevation15: string; + elevation16: string; + elevation17: string; + elevation18: string; + elevation19: string; + elevation20: string; + elevation21: string; + elevation22: string; + elevation23: string; + elevation24: string; +} + +declare const paperClasses: PaperClasses; + +export function getPaperUtilityClass(slot: string): string; + +export default paperClasses; diff --git a/packages/material-ui/src/Paper/paperClasses.js b/packages/material-ui/src/Paper/paperClasses.js new file mode 100644 index 00000000000000..9a36c094f70f9b --- /dev/null +++ b/packages/material-ui/src/Paper/paperClasses.js @@ -0,0 +1,39 @@ +import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; + +export function getPaperUtilityClass(slot) { + return generateUtilityClass('MuiPaper', slot); +} + +const paperClasses = generateUtilityClasses('MuiPaper', [ + 'root', + 'rounded', + 'outlined', + 'elevation', + 'elevation0', + 'elevation1', + 'elevation2', + 'elevation3', + 'elevation4', + 'elevation5', + 'elevation6', + 'elevation7', + 'elevation8', + 'elevation9', + 'elevation10', + 'elevation11', + 'elevation12', + 'elevation13', + 'elevation14', + 'elevation15', + 'elevation16', + 'elevation17', + 'elevation18', + 'elevation19', + 'elevation20', + 'elevation21', + 'elevation22', + 'elevation23', + 'elevation24', +]); + +export default paperClasses; From 091c0b0442386d321a031d2ca7f19c8c5640f41a Mon Sep 17 00:00:00 2001 From: povilass Date: Wed, 13 Jan 2021 20:23:28 +0200 Subject: [PATCH 2/4] [Paper] Prettier test fails --- .../src/MobileStepper/MobileStepper.test.js | 2 +- packages/material-ui/src/Paper/Paper.d.ts | 2 +- packages/material-ui/src/Paper/Paper.js | 34 +++++++++---------- packages/material-ui/src/Paper/Paper.test.js | 2 +- 4 files changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/material-ui/src/MobileStepper/MobileStepper.test.js b/packages/material-ui/src/MobileStepper/MobileStepper.test.js index 50f4085b005ee0..f8ee1b351728f0 100644 --- a/packages/material-ui/src/MobileStepper/MobileStepper.test.js +++ b/packages/material-ui/src/MobileStepper/MobileStepper.test.js @@ -9,7 +9,7 @@ import { } from 'test/utils'; import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft'; import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight'; -import Paper, {paperClasses} from '../Paper'; +import Paper, { paperClasses } from '../Paper'; import Button from '../Button/Button'; import MobileStepper from './MobileStepper'; diff --git a/packages/material-ui/src/Paper/Paper.d.ts b/packages/material-ui/src/Paper/Paper.d.ts index 1e02af81f856bb..5063368e9e690e 100644 --- a/packages/material-ui/src/Paper/Paper.d.ts +++ b/packages/material-ui/src/Paper/Paper.d.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { SxProps } from "@material-ui/system"; +import { SxProps } from '@material-ui/system'; import { OverridableStringUnion } from '@material-ui/types'; import { Theme } from '../styles'; import { InternalStandardProps as StandardProps } from '..'; diff --git a/packages/material-ui/src/Paper/Paper.js b/packages/material-ui/src/Paper/Paper.js index cad23aa3732cf8..c0038a9dd071df 100644 --- a/packages/material-ui/src/Paper/Paper.js +++ b/packages/material-ui/src/Paper/Paper.js @@ -6,7 +6,7 @@ import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled import experimentalStyled from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; import useTheme from '../styles/useTheme'; -import {getPaperUtilityClass} from "./paperClasses"; +import { getPaperUtilityClass } from './paperClasses'; const overridesResolver = (props, styles) => { const { styleProps } = props; @@ -14,12 +14,12 @@ const overridesResolver = (props, styles) => { return deepmerge(styles.root || {}, { ...styles[styleProps.variant], ...(!styleProps.square && styles.rounded), - ...(styleProps.variant === "elevation" && styles[`elevation${styleProps.elevation}`]), + ...(styleProps.variant === 'elevation' && styles[`elevation${styleProps.elevation}`]), }); }; const useUtilityClasses = (styleProps) => { - const { square, elevation, variant, classes} = styleProps; + const { square, elevation, variant, classes } = styleProps; const slots = { root: [ @@ -34,15 +34,14 @@ const useUtilityClasses = (styleProps) => { }; const PaperRoot = experimentalStyled( - "div", + 'div', {}, { name: 'MuiPaper', slot: 'Root', overridesResolver, - } -)(({theme, styleProps}) => { - + }, +)(({ theme, styleProps }) => { return { /* Styles applied to the root element. */ backgroundColor: theme.palette.background.paper, @@ -53,18 +52,18 @@ const PaperRoot = experimentalStyled( borderRadius: theme.shape.borderRadius, }), /* Styles applied to the root element if `variant="outlined"`. */ - ...(styleProps.variant === "outlined" && { + ...(styleProps.variant === 'outlined' && { border: `1px solid ${theme.palette.divider}`, }), /* Styles applied to the root element if `variant="elevation"`. */ - ...(styleProps.variant === "elevation" && { - boxShadow : theme.shadows[styleProps.elevation] + ...(styleProps.variant === 'elevation' && { + boxShadow: theme.shadows[styleProps.elevation], }), - } + }; }); const Paper = React.forwardRef(function Paper(inProps, ref) { - const props = useThemeProps({props: inProps, name: 'MuiPaper'}); + const props = useThemeProps({ props: inProps, name: 'MuiPaper' }); const { className, @@ -79,7 +78,7 @@ const Paper = React.forwardRef(function Paper(inProps, ref) { ...props, variant, elevation, - square + square, }; const classes = useUtilityClasses(styleProps); @@ -101,10 +100,7 @@ const Paper = React.forwardRef(function Paper(inProps, ref) { @@ -144,6 +140,10 @@ Paper.propTypes = { * @default false */ square: PropTypes.bool, + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.object, /** * The variant to use. * @default 'elevation' diff --git a/packages/material-ui/src/Paper/Paper.test.js b/packages/material-ui/src/Paper/Paper.test.js index fe39e974cedde4..f3f718d0f9142d 100644 --- a/packages/material-ui/src/Paper/Paper.test.js +++ b/packages/material-ui/src/Paper/Paper.test.js @@ -16,7 +16,7 @@ describe('', () => { muiName: 'MuiPaper', refInstanceof: window.HTMLDivElement, testComponentPropWith: 'header', - testVariantProps: {variant: 'rounded'}, + testVariantProps: { variant: 'rounded' }, skip: ['componentsProp'], })); From adc92258a0979fe6944a906c4c1259e5b30cc8b5 Mon Sep 17 00:00:00 2001 From: povilass Date: Wed, 13 Jan 2021 20:32:34 +0200 Subject: [PATCH 3/4] [Paper] docs:api fails --- docs/pages/api-docs/paper.json | 3 ++- docs/translations/api-docs/paper/paper.json | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/pages/api-docs/paper.json b/docs/pages/api-docs/paper.json index 280490c468c082..75773a65810577 100644 --- a/docs/pages/api-docs/paper.json +++ b/docs/pages/api-docs/paper.json @@ -5,6 +5,7 @@ "component": { "type": { "name": "elementType" } }, "elevation": { "type": { "name": "number" }, "default": "1" }, "square": { "type": { "name": "bool" } }, + "sx": { "type": { "name": "object" } }, "variant": { "type": { "name": "union", @@ -54,5 +55,5 @@ "filename": "/packages/material-ui/src/Paper/Paper.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true } diff --git a/docs/translations/api-docs/paper/paper.json b/docs/translations/api-docs/paper/paper.json index 746579030f3f8d..3670a161bee872 100644 --- a/docs/translations/api-docs/paper/paper.json +++ b/docs/translations/api-docs/paper/paper.json @@ -6,6 +6,7 @@ "component": "The component used for the root node. Either a string to use a HTML element or a component.", "elevation": "Shadow depth, corresponds to dp in the spec. It accepts values between 0 and 24 inclusive.", "square": "If true, rounded corners are disabled.", + "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "variant": "The variant to use." }, "classDescriptions": { From 4546392e2c084c23f16b1813d4be8f5eaf43e233 Mon Sep 17 00:00:00 2001 From: povilass Date: Wed, 13 Jan 2021 20:49:53 +0200 Subject: [PATCH 4/4] [Paper] framer fix and others comments --- framer/scripts/framerConfig.js | 1 + packages/material-ui/src/Paper/Paper.d.ts | 8 ++++---- packages/material-ui/src/Paper/Paper.test.js | 1 + 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js index fb02f439b69a3c..526d4d294a3182 100644 --- a/framer/scripts/framerConfig.js +++ b/framer/scripts/framerConfig.js @@ -225,6 +225,7 @@ export const componentSettings = { }, Paper: { ignoredProps: [ + 'sx', // FIXME: `Union` 'variant', ], diff --git a/packages/material-ui/src/Paper/Paper.d.ts b/packages/material-ui/src/Paper/Paper.d.ts index 5063368e9e690e..0b3d40a16a116e 100644 --- a/packages/material-ui/src/Paper/Paper.d.ts +++ b/packages/material-ui/src/Paper/Paper.d.ts @@ -66,15 +66,15 @@ export interface PaperProps extends StandardProps; /** * The variant to use. * @default 'elevation' */ variant?: OverridableStringUnion; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; } export type PaperClassKey = keyof NonNullable; diff --git a/packages/material-ui/src/Paper/Paper.test.js b/packages/material-ui/src/Paper/Paper.test.js index f3f718d0f9142d..b26dc6be5738c5 100644 --- a/packages/material-ui/src/Paper/Paper.test.js +++ b/packages/material-ui/src/Paper/Paper.test.js @@ -17,6 +17,7 @@ describe('', () => { refInstanceof: window.HTMLDivElement, testComponentPropWith: 'header', testVariantProps: { variant: 'rounded' }, + testStateOverrides: { prop: 'elevation', value: 10, styleKey: 'elevation10' }, skip: ['componentsProp'], }));