Merge branch 'MC-855' of github.com:magento-obsessive-owls/magento2-page-builder into PR

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

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,13 @@
         <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 {{PageBuilderTabMinimumHeight600Property.value}} + {{PageBuilderPaddingProperty40.paddingTop}} + {{PageBuilderPaddingProperty40.paddingBottom}}" stepKey="tab2ExpectedHeight"/>
+        <executeJS function="return document.querySelector('{{TabOnStorefront.tabContent('2')}}').offsetHeight" stepKey="tab2Height"/>
+        <assertEquals stepKey="assertTabMinHeight">
+            <expectedResult type="variable">tab2ExpectedHeight</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,17 +53,20 @@
         }
 
         &.empty-placeholder {
+            left: 0;
+            text-align: center;
+            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;
             height: 170px;
-            left: 0;
             padding-top: 130px;
             position: absolute;
-            text-align: center;
             transition: .3s;
-            width: 100%;
         }
     }
 

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/full-bleed/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-width/preview.html

@@ -7,5 +7,7 @@
 
 <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="{visible: parent.children().length == 0}" translate="'Drag content types or columns here'"></div>
+    <div class="pagebuilder-empty-container empty-placeholder"
+         css="placeholderCss()"
+         translate="'Drag content types or columns here'"/>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/tab-item/default/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);
+                },
+            );
+        }
     }
 
     /**
@@ -561,4 +576,21 @@ export default class Preview {
         this.afterObservablesUpdated();
         events.trigger("previewData:updateAfter", {preview: this});
     }
+
+    /**
+     * Update placeholder background visibility base on height and padding
+     *
+     * @param {DataObject} data
+     */
+    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);
+    }
 }

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

@@ -83,7 +83,7 @@ div[data-role='tabs'] {
         z-index: 9;
 
         [data-role='tab-item'] {
-            box-sizing: border-box;
+            box-sizing: content-box;
             min-height: inherit;
 
             &:not(:first-child) {