From 3e048a594fc7ce4f3df3f350d4153d75b1ca841d Mon Sep 17 00:00:00 2001 From: povilass Date: Mon, 25 Jan 2021 11:36:03 +0200 Subject: [PATCH] [Card] Migrate to emotion (#24597) --- docs/pages/api-docs/card.json | 5 +- docs/translations/api-docs/card/card.json | 3 +- packages/material-ui/src/Card/Card.d.ts | 7 ++- packages/material-ui/src/Card/Card.js | 55 ++++++++++++++++--- packages/material-ui/src/Card/Card.test.js | 13 ++--- .../material-ui/src/Card/cardClasses.d.ts | 9 +++ packages/material-ui/src/Card/cardClasses.js | 9 +++ packages/material-ui/src/Card/index.d.ts | 2 + packages/material-ui/src/Card/index.js | 2 + 9 files changed, 85 insertions(+), 20 deletions(-) create mode 100644 packages/material-ui/src/Card/cardClasses.d.ts create mode 100644 packages/material-ui/src/Card/cardClasses.js diff --git a/docs/pages/api-docs/card.json b/docs/pages/api-docs/card.json index 060bf5929bdb46..da2a64aa952f13 100644 --- a/docs/pages/api-docs/card.json +++ b/docs/pages/api-docs/card.json @@ -2,7 +2,8 @@ "props": { "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" } }, - "raised": { "type": { "name": "bool" } } + "raised": { "type": { "name": "bool" } }, + "sx": { "type": { "name": "object" } } }, "name": "Card", "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiCard" }, @@ -11,6 +12,6 @@ "filename": "/packages/material-ui/src/Card/Card.js", "inheritance": { "component": "Paper", "pathname": "/api/paper/" }, "demos": "", - "styledComponent": false, + "styledComponent": true, "cssComponent": false } diff --git a/docs/translations/api-docs/card/card.json b/docs/translations/api-docs/card/card.json index f115d5fb6b49e4..04480856eec027 100644 --- a/docs/translations/api-docs/card/card.json +++ b/docs/translations/api-docs/card/card.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.", - "raised": "If true, the card will use raised styling." + "raised": "If true, the card will use raised styling.", + "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/Card/Card.d.ts b/packages/material-ui/src/Card/Card.d.ts index d89e5ec2d3c164..6781ee4c3a26df 100644 --- a/packages/material-ui/src/Card/Card.d.ts +++ b/packages/material-ui/src/Card/Card.d.ts @@ -1,4 +1,5 @@ -import { InternalStandardProps as StandardProps } from '..'; +import { SxProps } from '@material-ui/system'; +import { InternalStandardProps as StandardProps, Theme } from '..'; import { PaperProps } from '../Paper'; export interface CardProps extends StandardProps { @@ -14,6 +15,10 @@ export interface CardProps extends StandardProps { * @default false */ raised?: boolean; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; } export type CardClassKey = keyof NonNullable; diff --git a/packages/material-ui/src/Card/Card.js b/packages/material-ui/src/Card/Card.js index fef3360b76570a..bd9c09ad3e8f7a 100644 --- a/packages/material-ui/src/Card/Card.js +++ b/packages/material-ui/src/Card/Card.js @@ -1,24 +1,57 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; +import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; +import experimentalStyled from '../styles/experimentalStyled'; +import useThemeProps from '../styles/useThemeProps'; import Paper from '../Paper'; -import withStyles from '../styles/withStyles'; +import { getCardUtilityClass } from './cardClasses'; -export const styles = { +const overridesResolver = (props, styles) => styles.root || {}; + +const useUtilityClasses = (styleProps) => { + const { classes } = styleProps; + + const slots = { + root: ['root'], + }; + + return composeClasses(slots, getCardUtilityClass, classes); +}; + +const CardRoot = experimentalStyled( + Paper, + {}, + { + name: 'MuiCard', + slot: 'Root', + overridesResolver, + }, +)(() => { /* Styles applied to the root element. */ - root: { + return { overflow: 'hidden', - }, -}; + }; +}); + +const Card = React.forwardRef(function Card(inProps, ref) { + const props = useThemeProps({ + props: inProps, + name: 'MuiCard', + }); + + const { className, raised = false, ...other } = props; -const Card = React.forwardRef(function Card(props, ref) { - const { classes, className, raised = false, ...other } = props; + const styleProps = { ...props, raised }; + + const classes = useUtilityClasses(styleProps); return ( - ); @@ -46,6 +79,10 @@ Card.propTypes = { * @default false */ raised: PropTypes.bool, + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.object, }; -export default withStyles(styles, { name: 'MuiCard' })(Card); +export default Card; diff --git a/packages/material-ui/src/Card/Card.test.js b/packages/material-ui/src/Card/Card.test.js index 61830220785974..ab266939a49c66 100644 --- a/packages/material-ui/src/Card/Card.test.js +++ b/packages/material-ui/src/Card/Card.test.js @@ -1,23 +1,22 @@ import * as React from 'react'; import { expect } from 'chai'; -import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils'; +import { createMount, createClientRender, describeConformanceV5 } from 'test/utils'; import Card from './Card'; import Paper from '../Paper'; +import classes from './cardClasses'; describe('', () => { const mount = createMount(); - let classes; const render = createClientRender(); - before(() => { - classes = getClasses(); - }); - describeConformance(, () => ({ + describeConformanceV5(, () => ({ classes, inheritComponent: Paper, mount, + muiName: 'MuiCard', refInstanceof: window.HTMLDivElement, - skip: ['componentProp'], + testVariantProps: { raised: true }, + skip: ['componentsProp'], })); it('when raised should render Paper with 8dp', () => { diff --git a/packages/material-ui/src/Card/cardClasses.d.ts b/packages/material-ui/src/Card/cardClasses.d.ts new file mode 100644 index 00000000000000..613ba2fea536d4 --- /dev/null +++ b/packages/material-ui/src/Card/cardClasses.d.ts @@ -0,0 +1,9 @@ +export interface CardClasses { + root: string; +} + +declare const cardClasses: CardClasses; + +export function getCardUtilityClass(slot: string): string; + +export default cardClasses; diff --git a/packages/material-ui/src/Card/cardClasses.js b/packages/material-ui/src/Card/cardClasses.js new file mode 100644 index 00000000000000..ba2639ea341af1 --- /dev/null +++ b/packages/material-ui/src/Card/cardClasses.js @@ -0,0 +1,9 @@ +import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; + +export function getCardUtilityClass(slot) { + return generateUtilityClass('MuiCard', slot); +} + +const cardClasses = generateUtilityClasses('MuiCard', ['root']); + +export default cardClasses; diff --git a/packages/material-ui/src/Card/index.d.ts b/packages/material-ui/src/Card/index.d.ts index 83385cbebf36de..9650ca7781f067 100644 --- a/packages/material-ui/src/Card/index.d.ts +++ b/packages/material-ui/src/Card/index.d.ts @@ -1,2 +1,4 @@ export { default } from './Card'; export * from './Card'; +export { default as cardClasses } from './cardClasses'; +export * from './cardClasses'; diff --git a/packages/material-ui/src/Card/index.js b/packages/material-ui/src/Card/index.js index c68311df80b283..b9f592d1287eeb 100644 --- a/packages/material-ui/src/Card/index.js +++ b/packages/material-ui/src/Card/index.js @@ -1 +1,3 @@ export { default } from './Card'; +export { default as cardClasses } from './cardClasses'; +export * from './cardClasses';