From d9afcac7b454d10d511e51abf68a1fbb68926c99 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Thu, 29 Jul 2021 13:15:20 +0100 Subject: [PATCH] Refactor codes and improve docs to explain props more clearly --- .../components/masonry/DiffColSizeMasonry.js | 20 +++++----- .../components/masonry/DiffColSizeMasonry.tsx | 20 +++++----- docs/src/pages/components/masonry/masonry.md | 2 +- .../masonry-item/masonry-item-de.json | 2 +- .../masonry-item/masonry-item-es.json | 2 +- .../masonry-item/masonry-item-fr.json | 2 +- .../masonry-item/masonry-item-ja.json | 2 +- .../masonry-item/masonry-item-pt.json | 2 +- .../masonry-item/masonry-item-ru.json | 2 +- .../masonry-item/masonry-item-zh.json | 2 +- .../api-docs/masonry-item/masonry-item.json | 2 +- .../api-docs/masonry/masonry-de.json | 4 +- .../api-docs/masonry/masonry-es.json | 4 +- .../api-docs/masonry/masonry-fr.json | 4 +- .../api-docs/masonry/masonry-ja.json | 4 +- .../api-docs/masonry/masonry-pt.json | 4 +- .../api-docs/masonry/masonry-ru.json | 4 +- .../api-docs/masonry/masonry-zh.json | 4 +- .../api-docs/masonry/masonry.json | 4 +- package.json | 1 - packages/material-ui-lab/package.json | 1 + .../material-ui-lab/src/Masonry/Masonry.d.ts | 4 +- .../material-ui-lab/src/Masonry/Masonry.js | 16 ++++---- .../src/Masonry/Masonry.test.js | 39 +------------------ .../src/MasonryItem/MasonryItem.d.ts | 2 +- .../src/MasonryItem/MasonryItem.js | 15 ++----- .../src/MasonryItem/MasonryItem.test.js | 24 +----------- 27 files changed, 62 insertions(+), 130 deletions(-) diff --git a/docs/src/pages/components/masonry/DiffColSizeMasonry.js b/docs/src/pages/components/masonry/DiffColSizeMasonry.js index b02dd96d6738e8..425d45f4d8b2e4 100644 --- a/docs/src/pages/components/masonry/DiffColSizeMasonry.js +++ b/docs/src/pages/components/masonry/DiffColSizeMasonry.js @@ -26,19 +26,19 @@ export default function DiffColSizeMasonry() { } const itemData = [ - { height: 150, span: 1 }, - { height: 30, span: 1 }, + { height: 150 }, + { height: 30 }, { height: 90, span: 2 }, - { height: 110, span: 1 }, - { height: 150, span: 1 }, - { height: 150, span: 1 }, + { height: 110 }, + { height: 150 }, + { height: 150 }, { height: 130, span: 2 }, { height: 80, span: 2 }, - { height: 50, span: 1 }, - { height: 90, span: 1 }, + { height: 50 }, + { height: 90 }, { height: 100, span: 2 }, - { height: 150, span: 1 }, - { height: 50, span: 1 }, + { height: 150 }, + { height: 50 }, { height: 50, span: 2 }, - { height: 50, span: 1 }, + { height: 50 }, ]; diff --git a/docs/src/pages/components/masonry/DiffColSizeMasonry.tsx b/docs/src/pages/components/masonry/DiffColSizeMasonry.tsx index b02dd96d6738e8..425d45f4d8b2e4 100644 --- a/docs/src/pages/components/masonry/DiffColSizeMasonry.tsx +++ b/docs/src/pages/components/masonry/DiffColSizeMasonry.tsx @@ -26,19 +26,19 @@ export default function DiffColSizeMasonry() { } const itemData = [ - { height: 150, span: 1 }, - { height: 30, span: 1 }, + { height: 150 }, + { height: 30 }, { height: 90, span: 2 }, - { height: 110, span: 1 }, - { height: 150, span: 1 }, - { height: 150, span: 1 }, + { height: 110 }, + { height: 150 }, + { height: 150 }, { height: 130, span: 2 }, { height: 80, span: 2 }, - { height: 50, span: 1 }, - { height: 90, span: 1 }, + { height: 50 }, + { height: 90 }, { height: 100, span: 2 }, - { height: 150, span: 1 }, - { height: 50, span: 1 }, + { height: 150 }, + { height: 50 }, { height: 50, span: 2 }, - { height: 50, span: 1 }, + { height: 50 }, ]; diff --git a/docs/src/pages/components/masonry/masonry.md b/docs/src/pages/components/masonry/masonry.md index 72f04fb750e416..20b8747929a967 100644 --- a/docs/src/pages/components/masonry/masonry.md +++ b/docs/src/pages/components/masonry/masonry.md @@ -24,6 +24,6 @@ Masonry maintains a list of content blocks with a consistent width but variable {{"demo": "pages/components/masonry/DiffColSizeMasonry.js", "bg": true}} -> In order to use server-side rendering, you can pass the height of the content of `` as shown in the following demo: +> In order to use server-side rendering, you should pass the height of the content of `` as shown in the following demo: {{"demo": "pages/components/masonry/SSRMasonry.js", "bg": true}} diff --git a/docs/translations/api-docs/masonry-item/masonry-item-de.json b/docs/translations/api-docs/masonry-item/masonry-item-de.json index 2affccb38312ea..0f70ca91820611 100644 --- a/docs/translations/api-docs/masonry-item/masonry-item-de.json +++ b/docs/translations/api-docs/masonry-item/masonry-item-de.json @@ -1,7 +1,7 @@ { "componentDescription": "", "propDescriptions": { - "children": "The content of the component, normally an <img /> or a <div />.", + "children": "The content of the component, normally an <img /> or a <div />. It should be only one element.", "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", "columnSpan": "The number of columns taken up by the component", "component": "The component used for the root node. Either a string to use a HTML element or a component.", diff --git a/docs/translations/api-docs/masonry-item/masonry-item-es.json b/docs/translations/api-docs/masonry-item/masonry-item-es.json index 2affccb38312ea..0f70ca91820611 100644 --- a/docs/translations/api-docs/masonry-item/masonry-item-es.json +++ b/docs/translations/api-docs/masonry-item/masonry-item-es.json @@ -1,7 +1,7 @@ { "componentDescription": "", "propDescriptions": { - "children": "The content of the component, normally an <img /> or a <div />.", + "children": "The content of the component, normally an <img /> or a <div />. It should be only one element.", "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", "columnSpan": "The number of columns taken up by the component", "component": "The component used for the root node. Either a string to use a HTML element or a component.", diff --git a/docs/translations/api-docs/masonry-item/masonry-item-fr.json b/docs/translations/api-docs/masonry-item/masonry-item-fr.json index 2affccb38312ea..0f70ca91820611 100644 --- a/docs/translations/api-docs/masonry-item/masonry-item-fr.json +++ b/docs/translations/api-docs/masonry-item/masonry-item-fr.json @@ -1,7 +1,7 @@ { "componentDescription": "", "propDescriptions": { - "children": "The content of the component, normally an <img /> or a <div />.", + "children": "The content of the component, normally an <img /> or a <div />. It should be only one element.", "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", "columnSpan": "The number of columns taken up by the component", "component": "The component used for the root node. Either a string to use a HTML element or a component.", diff --git a/docs/translations/api-docs/masonry-item/masonry-item-ja.json b/docs/translations/api-docs/masonry-item/masonry-item-ja.json index 2affccb38312ea..0f70ca91820611 100644 --- a/docs/translations/api-docs/masonry-item/masonry-item-ja.json +++ b/docs/translations/api-docs/masonry-item/masonry-item-ja.json @@ -1,7 +1,7 @@ { "componentDescription": "", "propDescriptions": { - "children": "The content of the component, normally an <img /> or a <div />.", + "children": "The content of the component, normally an <img /> or a <div />. It should be only one element.", "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", "columnSpan": "The number of columns taken up by the component", "component": "The component used for the root node. Either a string to use a HTML element or a component.", diff --git a/docs/translations/api-docs/masonry-item/masonry-item-pt.json b/docs/translations/api-docs/masonry-item/masonry-item-pt.json index 2affccb38312ea..0f70ca91820611 100644 --- a/docs/translations/api-docs/masonry-item/masonry-item-pt.json +++ b/docs/translations/api-docs/masonry-item/masonry-item-pt.json @@ -1,7 +1,7 @@ { "componentDescription": "", "propDescriptions": { - "children": "The content of the component, normally an <img /> or a <div />.", + "children": "The content of the component, normally an <img /> or a <div />. It should be only one element.", "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", "columnSpan": "The number of columns taken up by the component", "component": "The component used for the root node. Either a string to use a HTML element or a component.", diff --git a/docs/translations/api-docs/masonry-item/masonry-item-ru.json b/docs/translations/api-docs/masonry-item/masonry-item-ru.json index 2affccb38312ea..0f70ca91820611 100644 --- a/docs/translations/api-docs/masonry-item/masonry-item-ru.json +++ b/docs/translations/api-docs/masonry-item/masonry-item-ru.json @@ -1,7 +1,7 @@ { "componentDescription": "", "propDescriptions": { - "children": "The content of the component, normally an <img /> or a <div />.", + "children": "The content of the component, normally an <img /> or a <div />. It should be only one element.", "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", "columnSpan": "The number of columns taken up by the component", "component": "The component used for the root node. Either a string to use a HTML element or a component.", diff --git a/docs/translations/api-docs/masonry-item/masonry-item-zh.json b/docs/translations/api-docs/masonry-item/masonry-item-zh.json index 2affccb38312ea..0f70ca91820611 100644 --- a/docs/translations/api-docs/masonry-item/masonry-item-zh.json +++ b/docs/translations/api-docs/masonry-item/masonry-item-zh.json @@ -1,7 +1,7 @@ { "componentDescription": "", "propDescriptions": { - "children": "The content of the component, normally an <img /> or a <div />.", + "children": "The content of the component, normally an <img /> or a <div />. It should be only one element.", "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", "columnSpan": "The number of columns taken up by the component", "component": "The component used for the root node. Either a string to use a HTML element or a component.", diff --git a/docs/translations/api-docs/masonry-item/masonry-item.json b/docs/translations/api-docs/masonry-item/masonry-item.json index 2affccb38312ea..0f70ca91820611 100644 --- a/docs/translations/api-docs/masonry-item/masonry-item.json +++ b/docs/translations/api-docs/masonry-item/masonry-item.json @@ -1,7 +1,7 @@ { "componentDescription": "", "propDescriptions": { - "children": "The content of the component, normally an <img /> or a <div />.", + "children": "The content of the component, normally an <img /> or a <div />. It should be only one element.", "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", "columnSpan": "The number of columns taken up by the component", "component": "The component used for the root node. Either a string to use a HTML element or a component.", diff --git a/docs/translations/api-docs/masonry/masonry-de.json b/docs/translations/api-docs/masonry/masonry-de.json index 529c7b45599a51..548f75a86fdaa2 100644 --- a/docs/translations/api-docs/masonry/masonry-de.json +++ b/docs/translations/api-docs/masonry/masonry-de.json @@ -1,11 +1,11 @@ { "componentDescription": "", "propDescriptions": { - "children": "The content of the component, normally <MasonryItem />s.", + "children": "The content of the component. It's recommended to be <MasonryItem />s.", "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", "columns": "Number of columns.", "component": "The component used for the root node. Either a string to use a HTML element or a component.", - "spacing": "Defines the space between children.", + "spacing": "Defines the space between children. It is a factor of the theme's spacing.", "sx": "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/docs/translations/api-docs/masonry/masonry-es.json b/docs/translations/api-docs/masonry/masonry-es.json index 529c7b45599a51..548f75a86fdaa2 100644 --- a/docs/translations/api-docs/masonry/masonry-es.json +++ b/docs/translations/api-docs/masonry/masonry-es.json @@ -1,11 +1,11 @@ { "componentDescription": "", "propDescriptions": { - "children": "The content of the component, normally <MasonryItem />s.", + "children": "The content of the component. It's recommended to be <MasonryItem />s.", "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", "columns": "Number of columns.", "component": "The component used for the root node. Either a string to use a HTML element or a component.", - "spacing": "Defines the space between children.", + "spacing": "Defines the space between children. It is a factor of the theme's spacing.", "sx": "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/docs/translations/api-docs/masonry/masonry-fr.json b/docs/translations/api-docs/masonry/masonry-fr.json index 529c7b45599a51..548f75a86fdaa2 100644 --- a/docs/translations/api-docs/masonry/masonry-fr.json +++ b/docs/translations/api-docs/masonry/masonry-fr.json @@ -1,11 +1,11 @@ { "componentDescription": "", "propDescriptions": { - "children": "The content of the component, normally <MasonryItem />s.", + "children": "The content of the component. It's recommended to be <MasonryItem />s.", "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", "columns": "Number of columns.", "component": "The component used for the root node. Either a string to use a HTML element or a component.", - "spacing": "Defines the space between children.", + "spacing": "Defines the space between children. It is a factor of the theme's spacing.", "sx": "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/docs/translations/api-docs/masonry/masonry-ja.json b/docs/translations/api-docs/masonry/masonry-ja.json index 529c7b45599a51..548f75a86fdaa2 100644 --- a/docs/translations/api-docs/masonry/masonry-ja.json +++ b/docs/translations/api-docs/masonry/masonry-ja.json @@ -1,11 +1,11 @@ { "componentDescription": "", "propDescriptions": { - "children": "The content of the component, normally <MasonryItem />s.", + "children": "The content of the component. It's recommended to be <MasonryItem />s.", "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", "columns": "Number of columns.", "component": "The component used for the root node. Either a string to use a HTML element or a component.", - "spacing": "Defines the space between children.", + "spacing": "Defines the space between children. It is a factor of the theme's spacing.", "sx": "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/docs/translations/api-docs/masonry/masonry-pt.json b/docs/translations/api-docs/masonry/masonry-pt.json index 529c7b45599a51..548f75a86fdaa2 100644 --- a/docs/translations/api-docs/masonry/masonry-pt.json +++ b/docs/translations/api-docs/masonry/masonry-pt.json @@ -1,11 +1,11 @@ { "componentDescription": "", "propDescriptions": { - "children": "The content of the component, normally <MasonryItem />s.", + "children": "The content of the component. It's recommended to be <MasonryItem />s.", "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", "columns": "Number of columns.", "component": "The component used for the root node. Either a string to use a HTML element or a component.", - "spacing": "Defines the space between children.", + "spacing": "Defines the space between children. It is a factor of the theme's spacing.", "sx": "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/docs/translations/api-docs/masonry/masonry-ru.json b/docs/translations/api-docs/masonry/masonry-ru.json index 529c7b45599a51..548f75a86fdaa2 100644 --- a/docs/translations/api-docs/masonry/masonry-ru.json +++ b/docs/translations/api-docs/masonry/masonry-ru.json @@ -1,11 +1,11 @@ { "componentDescription": "", "propDescriptions": { - "children": "The content of the component, normally <MasonryItem />s.", + "children": "The content of the component. It's recommended to be <MasonryItem />s.", "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", "columns": "Number of columns.", "component": "The component used for the root node. Either a string to use a HTML element or a component.", - "spacing": "Defines the space between children.", + "spacing": "Defines the space between children. It is a factor of the theme's spacing.", "sx": "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/docs/translations/api-docs/masonry/masonry-zh.json b/docs/translations/api-docs/masonry/masonry-zh.json index 529c7b45599a51..548f75a86fdaa2 100644 --- a/docs/translations/api-docs/masonry/masonry-zh.json +++ b/docs/translations/api-docs/masonry/masonry-zh.json @@ -1,11 +1,11 @@ { "componentDescription": "", "propDescriptions": { - "children": "The content of the component, normally <MasonryItem />s.", + "children": "The content of the component. It's recommended to be <MasonryItem />s.", "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", "columns": "Number of columns.", "component": "The component used for the root node. Either a string to use a HTML element or a component.", - "spacing": "Defines the space between children.", + "spacing": "Defines the space between children. It is a factor of the theme's spacing.", "sx": "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/docs/translations/api-docs/masonry/masonry.json b/docs/translations/api-docs/masonry/masonry.json index 529c7b45599a51..548f75a86fdaa2 100644 --- a/docs/translations/api-docs/masonry/masonry.json +++ b/docs/translations/api-docs/masonry/masonry.json @@ -1,11 +1,11 @@ { "componentDescription": "", "propDescriptions": { - "children": "The content of the component, normally <MasonryItem />s.", + "children": "The content of the component. It's recommended to be <MasonryItem />s.", "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", "columns": "Number of columns.", "component": "The component used for the root node. Either a string to use a HTML element or a component.", - "spacing": "Defines the space between children.", + "spacing": "Defines the space between children. It is a factor of the theme's spacing.", "sx": "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/package.json b/package.json index a2858e9a6d0565..89e283b01c755b 100644 --- a/package.json +++ b/package.json @@ -157,7 +157,6 @@ "react-router-dom": "^5.2.0", "react-test-renderer": "^17.0.1", "remark": "^13.0.0", - "resize-observer-polyfill": "^1.5.1", "rimraf": "^3.0.0", "rollup": "^2.10.8", "rollup-plugin-babel": "^4.3.3", diff --git a/packages/material-ui-lab/package.json b/packages/material-ui-lab/package.json index 0eacaef9a8dc19..626e09c597cf49 100644 --- a/packages/material-ui-lab/package.json +++ b/packages/material-ui-lab/package.json @@ -75,6 +75,7 @@ "prop-types": "^15.7.2", "react-is": "^17.0.0", "react-transition-group": "^4.4.1", + "resize-observer-polyfill": "^1.5.1", "rifm": "^0.12.0" }, "devDependencies": { diff --git a/packages/material-ui-lab/src/Masonry/Masonry.d.ts b/packages/material-ui-lab/src/Masonry/Masonry.d.ts index 9b02d573f55a65..90a5f588fa6956 100644 --- a/packages/material-ui-lab/src/Masonry/Masonry.d.ts +++ b/packages/material-ui-lab/src/Masonry/Masonry.d.ts @@ -6,7 +6,7 @@ import { MasonryClasses } from './masonryClasses'; export interface MasonryTypeMap

{ props: P & { /** - * The content of the component, normally ``s. + * The content of the component. It's recommended to be ``s. */ children: NonNullable; /** @@ -19,7 +19,7 @@ export interface MasonryTypeMap

{ */ columns?: ResponsiveStyleValue; /** - * Defines the space between children. + * Defines the space between children. It is a factor of the theme's spacing. * @default 1 */ spacing?: ResponsiveStyleValue; diff --git a/packages/material-ui-lab/src/Masonry/Masonry.js b/packages/material-ui-lab/src/Masonry/Masonry.js index f457a99eb0a6e5..60efec7a2e3f61 100644 --- a/packages/material-ui-lab/src/Masonry/Masonry.js +++ b/packages/material-ui-lab/src/Masonry/Masonry.js @@ -48,10 +48,10 @@ export const style = ({ styleProps, theme }) => { }; }; - styles = deepmerge( - styles, - handleBreakpoints({ theme }, spacingValues, spacingStyleFromPropValue), - ); + styles = { + ...styles, + ...handleBreakpoints({ theme }, spacingValues, spacingStyleFromPropValue), + }; const columnValues = resolveBreakpointValues({ values: styleProps.columns, base }); const columnStyleFromPropValue = (propValue) => { @@ -83,10 +83,8 @@ const Masonry = React.forwardRef(function Masonry(inProps, ref) { const styleProps = { ...props, spacing, columns }; const classes = useUtilityClasses(styleProps); - const masonry = React.useMemo(() => ({ spacing }), [spacing]); - return ( - + `s. + * The content of the component. It's recommended to be ``s. */ children: PropTypes /* @typescript-to-proptypes-ignore */.node.isRequired, /** @@ -133,7 +131,7 @@ Masonry.propTypes /* remove-proptypes */ = { */ component: PropTypes.elementType, /** - * Defines the space between children. + * Defines the space between children. It is a factor of the theme's spacing. * @default 1 */ spacing: PropTypes.oneOfType([ diff --git a/packages/material-ui-lab/src/Masonry/Masonry.test.js b/packages/material-ui-lab/src/Masonry/Masonry.test.js index 6b4e18f8082feb..13f228f630581b 100644 --- a/packages/material-ui-lab/src/Masonry/Masonry.test.js +++ b/packages/material-ui-lab/src/Masonry/Masonry.test.js @@ -18,29 +18,14 @@ describe('', () => { inheritComponent: 'div', render, refInstanceof: window.HTMLDivElement, - testComponentPropWith: 'div', + testComponentPropWith: 'span', testVariantProps: { variant: 'foo' }, muiName: 'MuiMasonry', skip: ['componentsProp'], }), ); - const itemsData = [ - { - img: '/fake1.png', - title: 'fake1', - }, - { - img: '/fake2.png', - title: 'fake2', - }, - ]; const theme = createTheme({ spacing: 8 }); - const children = itemsData.map((item, idx) => ( -

- {item.title} -
- )); describe('style attribute:', () => { it('should render with correct default styles', () => { @@ -124,26 +109,4 @@ describe('', () => { }); }); }); - - describe('props:', () => { - describe('prop: component', () => { - it('should render a div by default', () => { - const { container } = render({children}); - expect(container.firstChild).to.have.property('nodeName', 'DIV'); - }); - - it('should render a different component', () => { - const { container } = render({children}); - expect(container.firstChild).to.have.property('nodeName', 'SPAN'); - }); - }); - - describe('prop: className', () => { - it('should append the className to the root element', () => { - const { container } = render({children}); - expect(container.firstChild).to.have.class(classes.root); - expect(container.firstChild).to.have.class('foo'); - }); - }); - }); }); diff --git a/packages/material-ui-lab/src/MasonryItem/MasonryItem.d.ts b/packages/material-ui-lab/src/MasonryItem/MasonryItem.d.ts index a23f8a9a740963..aff6a3db7ac905 100644 --- a/packages/material-ui-lab/src/MasonryItem/MasonryItem.d.ts +++ b/packages/material-ui-lab/src/MasonryItem/MasonryItem.d.ts @@ -6,7 +6,7 @@ import { MasonryItemClasses } from './masonryItemClasses'; export interface MasonryItemTypeMap

{ props: P & { /** - * The content of the component, normally an `` or a `

`. + * The content of the component, normally an `` or a `
`. It should be only one element. */ children: NonNullable; /** diff --git a/packages/material-ui-lab/src/MasonryItem/MasonryItem.js b/packages/material-ui-lab/src/MasonryItem/MasonryItem.js index 7dc9e2b52239ca..c51d2204ca71ea 100644 --- a/packages/material-ui-lab/src/MasonryItem/MasonryItem.js +++ b/packages/material-ui-lab/src/MasonryItem/MasonryItem.js @@ -7,7 +7,7 @@ import { handleBreakpoints, unstable_resolveBreakpointValues as resolveBreakpointValues, } from '@material-ui/system'; -import { deepmerge, unstable_useForkRef as useForkRef } from '@material-ui/utils'; +import { unstable_useForkRef as useForkRef } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import { styled, useThemeProps } from '@material-ui/core/styles'; import ResizeObserver from 'resize-observer-polyfill'; @@ -51,7 +51,7 @@ export const style = ({ styleProps, theme }) => { paddingBottom: gap - 1, }; }; - styles = deepmerge(styles, handleBreakpoints({ theme }, spacingValues, styleFromPropValue)); + styles = { ...styles, ...handleBreakpoints({ theme }, spacingValues, styleFromPropValue) }; return styles; }; @@ -73,14 +73,7 @@ const MasonryItem = React.forwardRef(function MasonryItem(inProps, ref) { const masonryItemRef = React.useRef(null); const { spacing = 1 } = React.useContext(MasonryContext); - const { - children, - className, - component = 'div', - columnSpan = 1, - height = undefined, - ...other - } = props; + const { children, className, component = 'div', columnSpan = 1, height, ...other } = props; const [styleProps, setStyleProps] = React.useState({ ...props, spacing, @@ -135,7 +128,7 @@ MasonryItem.propTypes /* remove-proptypes */ = { // | To update them edit the d.ts file and run "yarn proptypes" | // ---------------------------------------------------------------------- /** - * The content of the component, normally an `` or a `
`. + * The content of the component, normally an `` or a `
`. It should be only one element. */ children: PropTypes.element.isRequired, /** diff --git a/packages/material-ui-lab/src/MasonryItem/MasonryItem.test.js b/packages/material-ui-lab/src/MasonryItem/MasonryItem.test.js index 0e4017a2d3e3fe..2d5c3bdc369b15 100644 --- a/packages/material-ui-lab/src/MasonryItem/MasonryItem.test.js +++ b/packages/material-ui-lab/src/MasonryItem/MasonryItem.test.js @@ -18,7 +18,7 @@ describe('', () => { inheritComponent: 'div', render, refInstanceof: window.HTMLDivElement, - testComponentPropWith: 'div', + testComponentPropWith: 'span', testVariantProps: { variant: 'foo' }, muiName: 'MuiMasonryItem', skip: [ @@ -108,26 +108,4 @@ describe('', () => { ); }); }); - - describe('props:', () => { - describe('prop: component', () => { - it('should render a div by default', () => { - const { container } = render({children}); - expect(container.firstChild).to.have.property('nodeName', 'DIV'); - }); - - it('should render a different component', () => { - const { container } = render({children}); - expect(container.firstChild).to.have.property('nodeName', 'SPAN'); - }); - }); - - describe('prop: className', () => { - it('should append the className to the root element', () => { - const { container } = render({children}); - expect(container.firstChild).to.have.class(classes.root); - expect(container.firstChild).to.have.class('foo'); - }); - }); - }); });