MC-3406: Explicit Background Attributes for Tab

 - fix merge issues & stabilize tests

Author: cspruiell

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

@@ -74,7 +74,7 @@
             <argument name="backgroundAttachment" defaultValue="PageBuilderBackgroundAttachment_Default"/>
             <argument name="index" defaultValue="1" type="string"/>
         </arguments>
-        <comment userInput="validateBackgroundAttributesWithNoImage" stepKey="comment"/>
+        <comment userInput="validateBackgroundAttributes" stepKey="comment"/>
         <waitForElementVisible selector="{{section.base(index)}}" stepKey="waitForBaseElement"/>
         <waitForElementVisible selector="{{section.backgroundColor(index, backgroundColor.rgb)}}" stepKey="waitForBackgroundColor"/>
         <waitForElementVisible selector="{{section.backgroundImage(index, backgroundImage.fileName)}}" stepKey="waitForBackgroundImage"/>

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

@@ -52,7 +52,6 @@
         <element name="tabTitle" type="button" selector="//*[@name='tabs[{{arg1}}][title]']" parameterized="true"/>
         <element name="tabPanel" type="button" selector="//*[@role='tabpanel'][{{arg1}}]" parameterized="true"/>
         <element name="tabContent" type="button" selector="//*[@role='tabpanel'][{{arg1}}]//div[contains(@class, 'pagebuilder-tab-item')]" parameterized="true"/>
-        <element name="tabContentMinimumHeight" type="button" selector="//*[@role='tabpanel'][{{arg1}}]//div[contains(@class, 'pagebuilder-tab-item')][contains(@style, 'min-height: {{arg2}}px')]" parameterized="true"/>
         <element name="tabContentBackgroundColor" type="button" selector="//*[@role='tabpanel'][{{arg1}}]//div[contains(@class, 'pagebuilder-tab-item')][contains(@style, 'background-color: {{arg2}}')]" parameterized="true"/>
         <element name="tabContentBackgroundImage" type="button" selector="//*[@role='tabpanel'][{{arg1}}]//div[contains(@class, 'pagebuilder-tab-item')][contains(@style, 'background-image: url') and contains(@style, '{{arg2}}') and contains(@style, '{{arg3}}')]" parameterized="true"/>
         <element name="tabContentBackgroundAttachment" type="button" selector="//*[@role='tabpanel'][{{arg1}}]//div[contains(@class, 'pagebuilder-tab-item')][contains(@style, 'background-attachment: {{arg2}}')]" parameterized="true"/>
@@ -95,9 +94,8 @@
         <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="minHeight" 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="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"/>
         <element name="tabContentText" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}]//div[contains(@data-role, 'text')][1]" parameterized="true"/>

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

@@ -582,7 +582,7 @@
             <argument name="to" value="2"/>
         </actionGroup>
         <waitForElementVisible selector="{{TabOnStorefront.backgroundColor('2', 'rgb(204, 204, 204)')}}" stepKey="validateBackgroundColor"/>
-        <seeElement selector="{{TabOnStorefront.tabContentMinimumHeight('2', '200')}}" stepKey="validateMinHeightInStorefront"/>
+        <seeElement selector="{{TabOnStorefront.minHeight('2', '200')}}" stepKey="validateMinHeightInStorefront"/>
         <see userInput="{{PageBuilderTabNameRandom1.value}} copy" selector="{{TabOnStorefront.tabHeader('2')}}" stepKey="validateCopiedTabInStorefront"/>
     </test>
     <test name="TabsDuplicateTabWithCustomizedTabContent">

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

@@ -582,7 +582,7 @@
         <comment userInput="User sees Tab 2 Admin Preview updated with custom background color" stepKey="AC8"/>
         <seeElement selector="{{TabOnStage.tabContentBackgroundColor('2', PageBuilderBackgroundColor_Plaintext_Green.rgb)}}" stepKey="seeTabBackgroundColorAdmin2"/>
         <comment userInput="User sees Tab 2 Admin Preview updated with custom minimum height" stepKey="AC9"/>
-        <seeElement selector="{{TabOnStage.tabContentMinimumHeight('2', PageBuilderTabMinimumHeight600Property.value)}}" stepKey="seeTabMinHeightAdmin2"/>
+        <seeElement selector="{{TabOnStage.minHeight('2', PageBuilderTabMinimumHeight600Property.value)}}" stepKey="seeTabMinHeightAdmin2"/>
         <comment userInput="Switch tabs and other tab becomes hidden" stepKey="AC10"/>
         <actionGroup ref="switchTabs" stepKey="switchTabsAdmin">
             <argument name="section" value="TabOnStage"/>
@@ -593,7 +593,7 @@
         <seeElement selector="{{TabOnStage.tabContentBackgroundColor('1', PageBuilderBackgroundColor_Pink.rgb)}}" stepKey="seeTabBackgroundColorAdmin1"/>
         <seeElement selector="{{TabOnStage.tabContentBackgroundPosition('1', PageBuilderBackgroundPosition_TopLeft.styleValue)}}" stepKey="seeTabBackgroundPositionAdmin1"/>
         <comment userInput="User sees Tab 1 Admin Preview updated with custom minimum height" stepKey="AC12"/>
-        <seeElement selector="{{TabOnStage.tabContentMinimumHeight('1', PageBuilderTabMinimumHeight200Property.value)}}" stepKey="seeTabMinHeightAdmin1"/>
+        <seeElement selector="{{TabOnStage.minHeight('1', PageBuilderTabMinimumHeight200Property.value)}}" stepKey="seeTabMinHeightAdmin1"/>
         <comment userInput="User navigates to the storefront and sees changes applied" stepKey="AC13"/>
         <actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
         <amOnPage url="{{PageBuilderTabsContentType.name}}{{PageBuilderPageTitle.pageName}}" stepKey="amOnPageBuilderPage"/>
@@ -608,7 +608,7 @@
         <waitForElementVisible selector="{{TabOnStorefront.tabHeader('1')}}" stepKey="seeTabHeader1Storefront"/>
         <see selector="{{TabOnStorefront.tabHeader('1')}}" userInput="{{PageBuilderTabNameRandom1.value}}" stepKey="seeTab1TitleStorefront"/>
         <seeElement selector="{{TabOnStorefront.backgroundColor('1', PageBuilderBackgroundColor_Pink.rgb)}}" stepKey="seeTab1BackgroundColor"/>
-        <seeElement selector="{{TabOnStorefront.tabContentMinimumHeight('1', PageBuilderTabMinimumHeight200Property.value)}}" stepKey="seeTab1MinHeight"/>
+        <seeElement selector="{{TabOnStorefront.minHeight('1', PageBuilderTabMinimumHeight200Property.value)}}" stepKey="seeTab1MinHeight"/>
         <actionGroup ref="switchTabs" stepKey="switchTabsStorefront">
             <argument name="section" value="TabOnStorefront"/>
             <argument name="from" value="1"/>
@@ -617,7 +617,7 @@
         <comment userInput="User sees Tab 2 with background color and min height on Storefront" stepKey="AC15"/>
         <see selector="{{TabOnStorefront.tabHeader('2')}}" userInput="{{PageBuilderTabNameRandom2.value}}" stepKey="seeTab2TitleStorefront"/>
         <seeElement selector="{{TabOnStorefront.backgroundColor('2', PageBuilderBackgroundColor_Plaintext_Green.rgb)}}" stepKey="seeTab2BackgroundColor"/>
-        <seeElement selector="{{TabOnStorefront.tabContentMinimumHeight('2', PageBuilderTabMinimumHeight600Property.value)}}" stepKey="seeTab2MinHeight"/>
+        <seeElement selector="{{TabOnStorefront.minHeight('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"/>
@@ -1439,7 +1439,7 @@
             <argument name="to" value="1"/>
         </actionGroup>
         <comment userInput="Verify tab 1 on stage" stepKey="AC4"/>
-        <seeElement selector="{{TabOnStage.tabContentMinimumHeight('1', PageBuilderTabMinimumHeight200Property.value)}}" stepKey="seeTabMinHeightAdmin1"/>
+        <seeElement selector="{{TabOnStage.minHeight('1', PageBuilderTabMinimumHeight200Property.value)}}" stepKey="seeTabMinHeightAdmin1"/>
         <seeElement selector="{{TabOnStage.tabContentBackgroundImage('1',PageBuilderBackgroundImage_GIF.path,PageBuilderBackgroundImage_GIF.extension)}}" stepKey="seeBackgroundImageInStage1"/>
         <seeElement selector="{{TabOnStage.tabContentBackgroundPosition('1', PageBuilderBackgroundPosition_BottomLeft.styleValue)}}" stepKey="seeTabBackgroundPositionAdmin1"/>
         <seeElement selector="{{TabOnStage.tabContentBackgroundAttachment('1', PageBuilderBackgroundAttachment_Scroll.value)}}" stepKey="seeTabBackgroundAttachmentAdmin1"/>
@@ -1471,7 +1471,7 @@
         <waitForPageLoad stepKey="waitForStoreFrontPageLoad" time="30"/>
         <waitForElementVisible selector="{{TabOnStorefront.tabHeader('1')}}" stepKey="seeTabHeader1Storefront"/>
         <see selector="{{TabOnStorefront.tabHeader('1')}}" userInput="{{PageBuilderTabNameRandom1.value}}" stepKey="seeTab1TitleStorefront"/>
-        <seeElement selector="{{TabOnStorefront.tabContentMinimumHeight('1', PageBuilderTabMinimumHeight200Property.value)}}" stepKey="seeTab1MinHeight"/>
+        <seeElement selector="{{TabOnStorefront.minHeight('1', PageBuilderTabMinimumHeight200Property.value)}}" stepKey="seeTab1MinHeight"/>
         <seeElement selector="{{TabOnStorefront.tabContentBackgroundImage('1',PageBuilderBackgroundImage_GIF.path,PageBuilderBackgroundImage_GIF.extension)}}" stepKey="seeBackgroundImageInDom1"/>
         <seeElement selector="{{TabOnStorefront.backgroundPosition('1', PageBuilderBackgroundPosition_BottomLeft.styleValue)}}" stepKey="seeTab1BackgroundPosition"/>
         <seeElement selector="{{TabOnStorefront.backgroundAttachment('1', PageBuilderBackgroundAttachment_Scroll.value)}}" stepKey="seeTab1BackgroundAttachment"/>

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

@@ -10,10 +10,10 @@
 [data-role='slider'],
 .pagebuilder-content-type.pagebuilder-slider {
     border: none;
+    transition: none;
     -moz-transition: none;
     -o-transition: none;
     -webkit-transition: none;
-    transition: none;
 
     .slider-container {
         .pagebuilder-system-border;
@@ -38,10 +38,10 @@
 
         &:hover {
             box-shadow: none;
+            transition: none;
             -moz-transition: none;
             -o-transition: none;
             -webkit-transition: none;
-            transition: none;
 
             .slider-container {
                 .pagebuilder-system-border-hover;
@@ -219,7 +219,6 @@
                     .pagebuilder-options {
                         .pagebuilder-options-visible;
                         z-index: 30;
-
                     }
 
                     .tooltip-content {
@@ -368,4 +367,4 @@
             }
         }
     }
-}
+}