Merge pull request #2146 from magento-obsessive-owls/PB-55

[Owls] PB-55: Row Full Width Contents Are Horizontally Positioned Incorrectly In Desktop Viewport
magento · Feb 14, 2020 · d269e50 · d269e50
2 parents 82b9e59 + fa99dfb
commit d269e50
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 11 deletions.
diff --git a/...ponents/RichContent/PageBuilder/ContentTypes/Row/__tests__/__snapshots__/row.spec.js.snap b/...ponents/RichContent/PageBuilder/ContentTypes/Row/__tests__/__snapshots__/row.spec.js.snap
@@ -48,16 +48,20 @@ exports[`render row with all props configured 1`] = `
       "marginRight": "10px",
       "marginTop": "10px",
       "minHeight": "200px",
-      "paddingBottom": "10px",
-      "paddingLeft": "10px",
-      "paddingRight": "10px",
-      "paddingTop": "10px",
       "textAlign": "right",
     }
   }
 >
   <div
     className="contained"
+    style={
+      Object {
+        "paddingBottom": "10px",
+        "paddingLeft": "10px",
+        "paddingRight": "10px",
+        "paddingTop": "10px",
+      }
+    }
   />
 </div>
 `;

diff --git a/...ib/components/RichContent/PageBuilder/ContentTypes/Row/__tests__/configAggregator.spec.js b/...ib/components/RichContent/PageBuilder/ContentTypes/Row/__tests__/configAggregator.spec.js
@@ -12,12 +12,13 @@ test('config is aggregated correctly for row appearance == contained', () => {
             minHeight: null,
             backgroundColor: null,
             enableParallax: false,
-            parallaxSpeed: 0.5
+            parallaxSpeed: 0.5,
+            paddingTop: '10px'
         })
     );
 });
 
-test('config is aggregated correctly for row appearance != contained', () => {
+test('config is aggregated correctly for row appearance == full-bleed', () => {
     const node = document.createElement('div');
     node.innerHTML = `<div data-content-type="row" data-appearance="full-bleed" data-enable-parallax="1" data-parallax-speed="2.0" data-background-images="{}" data-element="main" style="justify-content: flex-end; display: flex; flex-direction: column; background-color: rgb(33, 255, 255); background-position: left top; background-size: contain; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; min-height: 900px; margin: 0px 0px 10px; padding: 10px;"></div>`;
     const config = configAggregator(node.childNodes[0], {
@@ -29,7 +30,23 @@ test('config is aggregated correctly for row appearance != contained', () => {
             minHeight: '900px',
             backgroundColor: 'rgb(33, 255, 255)',
             enableParallax: true,
-            parallaxSpeed: 2.0
+            parallaxSpeed: 2.0,
+            paddingTop: '10px'
+        })
+    );
+});
+
+test('config is aggregated correctly for row appearance == full-width', () => {
+    const node = document.createElement('div');
+    node.innerHTML = `<div data-content-type="row" data-appearance="full-width" data-enable-parallax="1" data-parallax-speed="2.0" data-background-images="{}" data-element="main" style="justify-content: flex-end; display: flex; flex-direction: column; background-color: rgb(33, 255, 255); background-position: left top; background-size: contain; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; min-height: 900px; margin: 0px 0px 10px; padding: 0px;"><div class="row-full-width-inner" data-element="inner" style="padding: 25px 10px;"></div></div>`;
+    const config = configAggregator(node.childNodes[0], {
+        appearance: 'full-width'
+    });
+
+    expect(config).toEqual(
+        expect.objectContaining({
+            paddingTop: '25px',
+            paddingLeft: '10px'
         })
     );
 });
diff --git a/...ages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Row/configAggregator.js b/...ages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Row/configAggregator.js
@@ -2,13 +2,18 @@ import {
     getAdvanced,
     getBackgroundImages,
     getVerticalAlignment,
+    getPadding,
     getIsHidden
 } from '../../utils';
 
 export default (node, props) => {
     // Determine which node holds the data for the appearance
     const dataNode =
         props.appearance === 'contained' ? node.childNodes[0] : node;
+    const paddingNode =
+        props.appearance === 'full-width' || props.appearance === 'contained'
+            ? node.childNodes[0]
+            : node;
     return {
         minHeight: dataNode.style.minHeight ? dataNode.style.minHeight : null,
         ...getVerticalAlignment(dataNode),
@@ -19,6 +24,7 @@ export default (node, props) => {
         enableParallax: dataNode.getAttribute('data-enable-parallax') === '1',
         parallaxSpeed: parseFloat(dataNode.getAttribute('data-parallax-speed')),
         ...getAdvanced(dataNode),
+        ...getPadding(paddingNode),
         ...getIsHidden(node)
     };
 };
diff --git a/packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Row/row.js b/packages/venia-ui/lib/components/RichContent/PageBuilder/ContentTypes/Row/row.js
@@ -70,7 +70,10 @@ const Row = props => {
         marginTop,
         marginRight,
         marginBottom,
-        marginLeft,
+        marginLeft
+    };
+
+    const paddingStyles = {
         paddingTop,
         paddingRight,
         paddingBottom,
@@ -161,7 +164,7 @@ const Row = props => {
         return (
             <div
                 ref={backgroundElement}
-                style={dynamicStyles}
+                style={{ ...dynamicStyles, ...paddingStyles }}
                 className={[classes.root, ...cssClasses].join(' ')}
             >
                 {children}
@@ -176,7 +179,9 @@ const Row = props => {
                 style={dynamicStyles}
                 className={[classes.root, ...cssClasses].join(' ')}
             >
-                <div className={classes.contained}>{children}</div>
+                <div style={paddingStyles} className={classes.contained}>
+                    {children}
+                </div>
             </div>
         );
     }
@@ -186,7 +191,7 @@ const Row = props => {
             <div
                 ref={backgroundElement}
                 className={classes.inner}
-                style={dynamicStyles}
+                style={{ ...dynamicStyles, ...paddingStyles }}
             >
                 {children}
             </div>