[Masonry] Set width to 100%

mui · Oct 20, 2021 · 9341378 · 9341378
1 parent cd67243
commit 9341378
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 11 deletions.
diff --git a/packages/mui-lab/src/Masonry/Masonry.js b/packages/mui-lab/src/Masonry/Masonry.js
@@ -58,6 +58,7 @@ const validatePropValues = (base, prop) => {
 
 export const getStyle = ({ ownerState, theme }) => {
   let styles = {
+    width: '100%',
     display: 'flex',
     flexFlow: 'column wrap',
     alignContent: 'space-between',

diff --git a/packages/mui-lab/src/Masonry/Masonry.test.js b/packages/mui-lab/src/Masonry/Masonry.test.js
@@ -31,32 +31,25 @@ describe('<Masonry />', () => {
 
   describe('render', () => {
     it('should render with correct default styles', function test() {
-      if (/jsdom/.test(window.navigator.userAgent)) {
-        this.skip();
-      }
       const columns = 4;
       const spacing = 1;
       const { getByTestId } = render(
-        <Masonry data-testid="container" sx={{ width: 500 }}>
-          <div data-testid="child" style={{ height: 100 }} />
-          <div style={{ height: 50 }} />
-          <div style={{ height: 50 }} />
-          <div style={{ height: 50 }} />
+        <Masonry data-testid="container">
+          <div data-testid="child" />
         </Masonry>,
       );
-      const columnHeight = 100 + parseToNumber(theme.spacing(spacing));
       expect(getByTestId('container')).toHaveComputedStyle({
+        width: '100%',
         display: 'flex',
         flexFlow: 'column wrap',
         alignContent: 'space-between',
         boxSizing: 'border-box',
         margin: `${-(parseToNumber(theme.spacing(spacing)) / 2)}px`,
-        height: `${columnHeight + parseToNumber(theme.spacing(spacing))}px`,
       });
       expect(getByTestId('child')).toHaveComputedStyle({
         boxSizing: 'border-box',
         margin: `${parseToNumber(theme.spacing(spacing)) / 2}px`,
-        width: `calc(${(100 / columns).toFixed(2)}% - ${theme.spacing(spacing)}px)`,
+        width: `calc(${(100 / columns).toFixed(2)}% - ${theme.spacing(spacing)})`,
       });
     });
   });
@@ -75,6 +68,7 @@ describe('<Masonry />', () => {
           theme,
         }),
       ).to.deep.equal({
+        width: '100%',
         display: 'flex',
         flexFlow: 'column wrap',
         alignContent: 'space-between',
@@ -102,6 +96,7 @@ describe('<Masonry />', () => {
           theme,
         }),
       ).to.deep.equal({
+        width: '100%',
         display: 'flex',
         flexFlow: 'column wrap',
         alignContent: 'space-between',
@@ -150,6 +145,7 @@ describe('<Masonry />', () => {
           theme,
         }),
       ).to.deep.equal({
+        width: '100%',
         display: 'flex',
         flexFlow: 'column wrap',
         alignContent: 'space-between',
@@ -195,6 +191,7 @@ describe('<Masonry />', () => {
           theme,
         }),
       ).to.deep.equal({
+        width: '100%',
         display: 'flex',
         flexFlow: 'column wrap',
         alignContent: 'space-between',