Merge remote-tracking branch 'origin/MC-931-tab-vertical-align' into cms-team-1-delivery

# Conflicts:
#	app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderTabsSection.xml
#	app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_tab_item_form.xml
#	app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/tab-item/default/master.html
#	app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/tab-item/default/preview.html
#	app/code/Magento/PageBuilder/view/base/pagebuilder/content_type/tab_item.xml

Author: cspruiell

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/LayoutConfigurationActionGroup.xml

@@ -8,6 +8,16 @@
 
 <actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
+    <actionGroup name="validateLayoutStylesNoHeight">
+        <arguments>
+            <argument name="page"/>
+            <argument name="index" defaultValue="1" type="string"/>
+            <argument name="verticalAlignContainer" defaultValue="PageBuilderVerticalAlignmentPropertyTop"/>
+        </arguments>
+        <waitForElement selector="{{page.container(index)}}" stepKey="waitForVerticalAlignContainer"/>
+        <seeElement selector="{{page.noMinHeight(index)}}" stepKey="dontSeeStyle"/>
+        <seeElement selector="{{page.containerStyle(index, verticalAlignContainer.style)}}" stepKey="seeVerticalAlignmentStyle"/>
+    </actionGroup>
     <!-- Validate All Layout Styles -->
     <actionGroup name="validateLayoutStylesWithAllUpdated">
         <arguments>
@@ -16,7 +26,7 @@
             <argument name="minHeight" defaultValue="PageBuilderMinHeightProperty_Empty"/>
             <argument name="verticalAlignContainer" defaultValue="PageBuilderVerticalAlignmentPropertyCenter"/>
         </arguments>
-        <waitForElementVisible selector="{{page.base(index)}}" stepKey="waitForRow"/>
+        <waitForElementVisible selector="{{page.base(index)}}" stepKey="waitForContentType"/>
         <waitForElementVisible selector="{{page.minHeight(index, minHeight.value)}}" stepKey="waitForMinHeight"/>
         <waitForElementVisible selector="{{page.verticalAlignContainer(index, verticalAlignContainer.value)}}" stepKey="waitForVerticalAlignContainer"/>
     </actionGroup>

app/code/Magento/PageBuilder/Test/Mftf/Data/TabData.xml

@@ -48,25 +48,25 @@
     <!-- Minimum Height -->
     <entity name="PageBuilderTabMinimumHeightDefaultProperty" type="pagebuilder_tab_property">
         <data key="name">Minimum Height</data>
-        <data key="section">general</data>
+        <data key="section">layout</data>
         <data key="fieldName">min_height</data>
         <data key="value">300</data>
     </entity>
     <entity name="PageBuilderTabMinimumHeight200Property" type="pagebuilder_tab_property">
         <data key="name">Minimum Height</data>
-        <data key="section">general</data>
+        <data key="section">layout</data>
         <data key="fieldName">min_height</data>
         <data key="value">200</data>
     </entity>
     <entity name="PageBuilderTabMinimumHeight600Property" type="pagebuilder_tab_property">
         <data key="name">Minimum Height</data>
-        <data key="section">general</data>
+        <data key="section">layout</data>
         <data key="fieldName">min_height</data>
         <data key="value">600</data>
     </entity>
     <entity name="PageBuilderTabMinimumHeight1000Property" type="pagebuilder_tab_property">
         <data key="name">Minimum Height</data>
-        <data key="section">general</data>
+        <data key="section">layout</data>
         <data key="fieldName">min_height</data>
         <data key="value">1000</data>
     </entity>

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

@@ -36,6 +36,7 @@
     <section name="TabOnStage">
         <element name="base" type="button" selector="(//div[@data-role='tab-item'])[{{arg1}}]" parameterized="true"/>
         <element name="all" type="button" selector=".pagebuilder-tab-item"/>
+        <element name="base" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-tab-item')])[{{arg}}]" parameterized="true"/>
         <element name="tabHeader" type="button" selector="(//ul[contains(@class, 'tabs-navigation')]//a[contains(@class, 'tab-title')])[{{arg1}}]" parameterized="true"/>
         <element name="tabHeaderEditableTitle" type="button" selector="(//ul[contains(@class, 'tabs-navigation')]//a[contains(@class, 'tab-title')])[{{arg1}}]//span[contains(@contenteditable, 'true')]" parameterized="true"/>
         <element name="tabHeaderItemDefault" type="button" selector="//ul[contains(@class, 'tabs-navigation')]/li[contains(@style, 'border-radius: {{arg1}}px;') and contains(@style, 'border-width: 1px;')]" parameterized="true"/>
@@ -63,6 +64,11 @@
         <element name="tabContentBorderRadius" type="button" selector="//*[@role='tabpanel'][{{arg1}}]//div[contains(@class, 'pagebuilder-tab-item')][contains(@style, 'border-radius: {{arg2}}')]" parameterized="true"/>
         <element name="tabContentMargin" type="button" selector="//*[@role='tabpanel'][{{arg1}}]//div[contains(@class, 'pagebuilder-tab-item')][contains(@style, 'margin: {{arg2}}')]" parameterized="true"/>
         <element name="tabContentPadding" type="button" selector="//*[@role='tabpanel'][{{arg1}}]//div[contains(@class, 'pagebuilder-tab-item')][contains(@style, 'padding: {{arg2}}')]" parameterized="true"/>
+        <element name="container" type="button" selector="(//*[@role='tabpanel'])[{{arg1}}]//div[contains(@class, 'pagebuilder-tab-item')]//div[contains(@class, 'tab-item-container')]" parameterized="true"/>
+        <element name="containerStyle" type="button" selector="(//*[@role='tabpanel'])[{{arg1}}]//div[contains(@class, 'pagebuilder-tab-item')]//div[contains(@class, 'tab-item-container')][contains(@style,'{{arg2}}')]" parameterized="true"/>
+        <element name="noMinHeight" type="button" selector="(//*[@role='tabpanel'])[{{arg1}}]//div[contains(@class, 'pagebuilder-tab-item')][not(contains(@style,'min-height:'))]" parameterized="true"/>
+        <element name="minHeight" type="button" selector="(//*[@role='tabpanel'])[{{arg1}}]//div[contains(@class, 'pagebuilder-tab-item')][contains(@style,'min-height: {{arg2}}px;')]" parameterized="true"/>
+        <element name="verticalAlignContainer" type="button" selector="(//*[@role='tabpanel'])[{{arg1}}]//div[contains(@class, 'pagebuilder-tab-item')]//div[contains(@class, 'tab-item-container')][contains(@style,'justify-content: {{arg2}};')]" parameterized="true"/>
         <element name="tabTextContent" type="button" selector="//div[@class='pagebuilder-text']"/>
         <element name="tabColumnContent" type="button" selector="//div[contains(@class,'pagebuilder-tabs')]//div[contains(@class, 'pagebuilder-column-group')]"/>
         <!-- Background Configuration -->
@@ -76,12 +82,17 @@
         <element name="noBackgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-tab-item') and @data-element='desktop_image'])[{{arg1}}][not(contains(@style,'background-image:'))]" parameterized="true"/>
     </section>
     <section name="TabOnStorefront">
+        <element name="base" type="button" selector="(//div[@class='tabs-content'])[{{arg1}}]" parameterized="true"/>
         <element name="all" type="button" selector="[data-role=\'tab-item\']"/>
         <element name="base" type="button" selector="(//div[@data-role='tab-item'])[{{arg1}}]" parameterized="true"/>
         <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="container" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}]" parameterized="true"/>
+        <element name="containerStyle" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}][contains(@style,'{{arg2}}')]" parameterized="true"/>
+        <element name="noMinHeight" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}][not(contains(@style,'min-height:'))]" parameterized="true"/>
+        <element name="minHeight" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}][contains(@style,'min-height: {{arg2}}px;')]" parameterized="true"/>
+        <element name="verticalAlignContainer" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}][contains(@style,'justify-content: {{arg2}};')]" parameterized="true"/>
         <element name="tabContentMinimumHeight" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style, 'min-height: {{arg2}}px')]" parameterized="true"/>
         <element name="tabContentBackgroundImage" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style, 'background-image: url') and contains(@style, '{{arg2}}') and contains(@style, '{{arg3}}')]" parameterized="true"/>
         <element name="tabContentType" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}]/div[1]/hr" parameterized="true"/>

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

@@ -435,7 +435,7 @@
         <click selector="{{TabOnStorefront.tabHeader('2')}}" stepKey="switchToTab"/>
         <waitForPageLoad stepKey="waitForTabChangeAnimationStorefront" time="30"/>
         <scrollToTopOfPage stepKey="scrollToTopOfPage"/>
-        <waitForElementVisible selector="{{TabOnStorefront.tabContent('2')}}" stepKey="seeNewTabContent"/>
+        <waitForElementVisible selector="{{TabOnStorefront.container('2')}}" stepKey="seeNewTabContent"/>
         <comment userInput="Verify tab 2 on storefront" stepKey="AC6"/>
         <waitForElementVisible selector="{{TabOnStorefront.tabContentAdvancedStyles('2', PageBuilderAdvancedAlignmentPropertyRight.value, PageBuilderMarginsPropertyUnique.value, PageBuilderPaddingPropertyUnique.value)}}" stepKey="seeTabHeaderItemAdvancedStylesInStorefront2"/>
         <waitForElementVisible selector="{{TabOnStorefront.tabContentAdvancedStylesBorder('2', PageBuilderAdvancedBorderPropertyDotted.value, PageBuilderAdvancedBorderColorProperty_FF0000.rbg, PageBuilderAdvancedBorderWidthProperty500.value, PageBuilderAdvancedBorderRadiusProperty500.value)}}" stepKey="seeTabContentAdvancedStylesBorderInStorefront2"/>
@@ -600,9 +600,9 @@
         <comment userInput="Tab 1 is focused and Tab 2 is hidden" stepKey="focus"/>
         <waitForElementVisible selector="{{TabOnStorefront.tabHeaderItemActive('1')}}" stepKey="waitForFirstTabHeader"/>
         <waitForPageLoad stepKey="waitForTabsInit" time="30"/>
-        <waitForElementVisible selector="{{TabOnStorefront.tabContent('1')}}" stepKey="waitForFirstTabContent"/>
-        <assertElementContainsAttribute selector="{{TabOnStorefront.tabContent('1')}}" attribute="aria-hidden" expectedValue="false" stepKey="assertTab1Visible"/>
-        <assertElementContainsAttribute selector="{{TabOnStorefront.tabContent('2')}}" attribute="aria-hidden" expectedValue="true" stepKey="assertTab2Hidden"/>
+        <waitForElementVisible selector="{{TabOnStorefront.container('1')}}" stepKey="waitForFirstTabContent"/>
+        <assertElementContainsAttribute selector="{{TabOnStorefront.container('1')}}" attribute="aria-hidden" expectedValue="false" stepKey="assertTab1Visible"/>
+        <assertElementContainsAttribute selector="{{TabOnStorefront.container('2')}}" attribute="aria-hidden" expectedValue="true" stepKey="assertTab2Hidden"/>
         <comment userInput="User sees Tab 1 with background color and min height on Storefront" stepKey="AC14"/>
         <waitForElementVisible selector="{{TabOnStorefront.tabHeader('1')}}" stepKey="seeTabHeader1Storefront"/>
         <see selector="{{TabOnStorefront.tabHeader('1')}}" userInput="{{PageBuilderTabNameRandom1.value}}" stepKey="seeTab1TitleStorefront"/>