MC-855: Pagebuilder - Tab Minimum Height Displays Differently On Stage & Storefront

Author: omiroshnichenko

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderTabsSection.xml

@@ -63,7 +63,7 @@
         <element name="tabHeader" type="button" selector="(//li[contains(@role, 'tab')])[{{arg1}}]" parameterized="true"/>
         <element name="tabHeaderItemActive" type="button" selector="(//div[@data-role='tabs']//descendant::*[@role='tablist'])/li[{{arg1}}][contains(@class, 'ui-state-active')]" parameterized="true"/>
         <element name="tabPanel" type="button" selector="(//div[@class='tabs-content']//div[@role='tabpanel'])[{{arg1}}]" parameterized="true"/>
-        <element name="tabContent" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}]" parameterized="true"/>
+        <element name="tabContent" type="button" selector="div.tabs-content div[data-role=tab-item]:nth-child({{arg1}})" parameterized="true"/>
         <element name="tabContentAdvancedStyles" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}][@style='border-radius: 0px 12px 12px; border: 10px solid rgb(0, 0, 0);']" parameterized="true"/>
         <element name="tabContentMinimumHeight" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}][contains(@style, 'min-height: {{arg2}}px')]" parameterized="true"/>
         <element name="tabContentBackgroundColor" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}][contains(@style, 'background-color: {{arg2}}')]" parameterized="true"/>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderTabItemConfigurationTests.xml

@@ -598,6 +598,12 @@
         <see selector="{{TabOnStorefront.tabHeader('2')}}" userInput="{{PageBuilderTabNameRandom2.value}}" stepKey="seeTab2TitleStorefront"/>
         <seeElement selector="{{TabOnStorefront.tabContentBackgroundColor('2', PageBuilderTabBackgroundColorGreen.rgb)}}" stepKey="seeTab2BackgroundColor"/>
         <seeElement selector="{{TabOnStorefront.tabContentMinimumHeight('2', PageBuilderTabMinimumHeight600Property.value)}}" stepKey="seeTab2MinHeight"/>
+        <comment userInput="User sees Tab 2 with height that equals to sum of min-height + paddingTop + paddingBottom" stepKey="verifyMinHeight"/>
+        <executeJS function="return document.querySelector('{{TabOnStorefront.tabContent('2')}}').offsetHeight" stepKey="tab2Height"/>
+        <assertEquals stepKey="assertTabMinHeight">
+            <expectedResult type="variable">680</expectedResult>
+            <actualResult type="variable">tab2Height</actualResult>
+        </assertEquals>
     </test>
     <test name="AddTabsWithBackgroundJpgTopCoverScrollFixedNoBackgroundRepeat">
         <annotations>

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/_preview.less

@@ -53,22 +53,21 @@
         }
 
         &.empty-placeholder {
-            -moz-transition: .3s;
             left: 0;
             text-align: center;
-            transition: .3s;
             width: 100%;
             z-index: 1;
         }
 
         &.empty-placeholder-background {
+            -moz-transition: .3s;
+            -webkit-transition: .3s;
             background: url('@{baseDir}Magento_PageBuilder/css/images/cms-empty-row.svg') no-repeat center center;
             background-size: 505px 97px;
-            box-sizing: border-box;
             height: 170px;
-            -webkit-transition: .3s;
             padding-top: 130px;
             position: absolute;
+            transition: .3s;
         }
     }
 

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/preview.js

@@ -19,7 +19,7 @@
         <div class="pagebuilder-display-label"
              text="function () { return displayLabel().toUpperCase(); }()"></div>
         <div class="pagebuilder-empty-container empty-placeholder"
-             css="{visible: parent.children().length == 0}"
-             translate="'Drag content types or columns here'"></div>
+             css="placeholderCss()"
+             translate="'Drag content types or columns here'"/>
     </div>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/contained/preview.html

@@ -16,6 +16,6 @@
     <div class="pagebuilder-display-label"
          text="function () { return displayLabel().toUpperCase(); }()"></div>
     <div class="pagebuilder-empty-container empty-placeholder"
-         css="{visible: parent.children().length == 0}"
-         translate="'Drag content types or columns here'"></div>
+         css="placeholderCss()"
+         translate="'Drag content types or columns here'"/>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/default/preview.html

@@ -16,6 +16,6 @@
     <div class="pagebuilder-display-label"
          text="function () { return displayLabel().toUpperCase(); }()"></div>
     <div class="pagebuilder-empty-container empty-placeholder"
-         css="{visible: parent.children().length == 0}"
-         translate="'Drag content types or columns here'"></div>
-</div>
+         css="placeholderCss()"
+         translate="'Drag content types or columns here'"/>
+</div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/full-bleed/preview.html

@@ -8,6 +8,6 @@
 <div class="pagebuilder-content-type type-container pagebuilder-tab-item" attr="Object.assign({}, {id: parent.id}, data.main.attributes())" ko-style="Object.assign({}, data.main.style(), {borderRadius: data.main.style().borderRadius || $parent.parent.preview.data.headers.style().borderRadius})" css="Object.assign({'empty-container': parent.children().length == 0}, data.main.css())">
     <render args="previewChildTemplate" />
     <div class="pagebuilder-empty-container empty-placeholder"
-         css="getPlaceholderStyles()"
+         css="placeholderCss()"
          translate="'Drag content types or columns here'"/>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/full-width/preview.html

@@ -39,6 +39,9 @@ export default class Preview {
     public data: ObservableObject = {};
     public displayLabel: KnockoutObservable<string>;
     public wrapperElement: Element;
+    public placeholderCss: KnockoutObservable<object>;
+    public isPlaceholderVisible: KnockoutObservable<boolean> = ko.observable(true);
+    public isEmpty: KnockoutObservable<boolean> = ko.observable(true);
 
     /**
      * @deprecated
@@ -75,6 +78,10 @@ export default class Preview {
         this.edit = new Edit(this.parent, this.parent.dataStore);
         this.observableUpdater = observableUpdater;
         this.displayLabel = ko.observable(this.config.label);
+        this.placeholderCss = ko.observable({
+            "visible": this.isEmpty,
+            "empty-placeholder-background": this.isPlaceholderVisible,
+        });
         this.setupDataFields();
         this.bindEvents();
     }
@@ -434,8 +441,16 @@ export default class Preview {
         this.parent.dataStore.subscribe(
             (data: DataObject) => {
                 this.updateObservables();
+                this.updatePlaceholderVisibility(data);
             },
         );
+        if (this.parent.children) {
+            this.parent.children.subscribe(
+                (children: any[]) => {
+                    this.isEmpty(!children.length);
+                },
+            );
+        }
     }
 
     /**
@@ -563,20 +578,19 @@ export default class Preview {
     }
 
     /**
-     * Show/hide empty placeholder
-     * @returns {object}
+     * Update placeholder background visibility base on height and padding
+     *
+     * @param {DataObject} data
      */
-    public getPlaceholderStyles(): object {
-        let style = this.data.main.style(),
-            minHeight = parseFloat(style.minHeight) || 300,
-            paddingBottom = parseFloat(style.paddingBottom) || 0,
-            paddingTop = parseFloat(style.paddingBottom) || 0,
-            isBackgroundVisible = paddingBottom + paddingTop + minHeight > 130,
-            isVisible = this.parent.children().length == 0;
-
-        return {
-            visible: isVisible,
-            'empty-placeholder-background': isBackgroundVisible
-        }
+    private updatePlaceholderVisibility(data: DataObject): void {
+        const minHeight = !_.isEmpty(data.min_height) ? parseFloat(data.min_height as string) : 130;
+        const marginsAndPadding = _.isString(data.margins_and_padding) && data.margins_and_padding ?
+            JSON.parse(data.margins_and_padding as string) :
+            data.margins_and_padding || {};
+        const padding = marginsAndPadding.padding || {};
+        const paddingBottom = parseFloat(padding.bottom) || 0;
+        const paddingTop = parseFloat(padding.top) || 0;
+
+        this.isPlaceholderVisible(paddingBottom + paddingTop + minHeight >= 130);
     }
 }