MC-3610: Remove use of legacy system within slide preview

 - revert master format changes, fix border, update tests

Author: cspruiell

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

@@ -35,7 +35,6 @@
         <element name="hidden" type="button" selector="(//div[@data-role='slider'])[{{arg1}}]/ancestor::*[contains(@class, 'pagebuilder-content-type-wrapper') and contains(@class, 'pagebuilder-content-type-hidden')]" parameterized="true"/>
         <element name="notHidden" type="button" selector="(//div[@data-role='slider'])[{{arg1}}]/ancestor::*[contains(@class, 'pagebuilder-content-type-wrapper') and not(contains(@class, 'pagebuilder-content-type-hidden'))][1]" parameterized="true"/>
         <element name="default" type="button" selector="(//div[@class='slider-container'])[{{arg1}}][(contains(@style, 'border-style: {{arg2}}')) and contains(@style, 'border-radius: {{arg3}}px') and contains(@style, 'margin: {{arg4}}px') and contains(@style, 'padding: {{arg5}}px') and contains(@style, 'min-height: {{arg6}}px')]" parameterized="true"/>
-        <element name="slide" type="button" selector=".pagebuilder-slide"/>
         <element name="sliderContainer" type="button" selector="div.element-children.slider-container"/>
         <element name="firstSlideNavigationDot" type="button" selector="(//div[contains(@class, 'navigation-dot')])[1]"/>
         <element name="activeSlideTooltip" type="button" selector="//div[contains(@class, 'navigation-dot')]//span[contains(@role, 'tooltip')]"/>
@@ -93,7 +92,7 @@
         <element name="collageLeft" type="button" selector="div[data-role='slide'] .pagebuilder-mobile-hidden[style*='40px calc(50% + 40px) 40px 40px'][style*='magento']"/>
         <element name="collageCentered" type="button" selector="div[data-role='slide'] .pagebuilder-mobile-hidden[style*='40px calc(25% + 40px)'][style*='magento']"/>
         <element name="collageRight" type="button" selector="div[data-role='slide'] .pagebuilder-mobile-hidden[style*='40px 40px 40px calc(50% + 40px)'][style*='magento']"/>
-        <element name="collageMargin" type="button" selector="div[data-role='slide'][style*='margin: 1px 2px 3px 4px']"/>
+        <element name="collageMargin" type="button" selector="div[data-role='slide'] pagebuilder-slide-wrapper[style*='margin: 1px 2px 3px 4px']"/>
         <element name="collageMinHeight" type="button" selector="div[data-role='slide'] .pagebuilder-mobile-hidden[style*='min-height: {{arg1}}px'][style*='magento']" parameterized="true"/>
         <element name="collageAlignment" type="button" selector="div[data-role='slide'] .pagebuilder-slide-wrapper[style*='text-align: center']"/>
         <element name="collageMobileWithoutMobileImage" type="button" selector="div[data-role='slide'] .pagebuilder-mobile-only[style*='padding: 40px;'][style*='magento']"/>
@@ -161,7 +160,7 @@
         <element name="collageBackgroundPosition" type="button" selector="div[style*='magento'][style*='background-position: center center;']"/>
         <element name="collageBackgroundSize" type="button" selector="div[style*='magento'][style*='background-size: cover;']"/>
         <element name="collageBackgroundRepeat" type="button" selector="div[style*='magento'][style*='background-repeat: repeat;']"/>
-        <element name="collageMargin" type="button" selector="div[style*='1px 2px 3px 4px'] div[style*='magento']"/>
+        <element name="collageMargin" type="button" selector="div[style*='1px 2px 3px 4px'][style*='magento']"/>
         <element name="collageMinHeight" type="button" selector="div[style*='min-height: {{arg1}}px'][style*='magento']" parameterized="true"/>
         <element name="collageAlignment" type="button" selector="div[style*='text-align: center'][style*='magento']"/>
         <element name="posterOverlay" type="button" selector=".pagebuilder-poster-overlay[style*='rgba(255, 255, 255, 0.7)']"/>

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

@@ -464,12 +464,12 @@
         <assertElementContainsAttribute selector="{{SliderInAdmin.posterOverlay}}" attribute="style" expectedValue="min-height: 300px;" stepKey="verifyMinHeight300OnAdmin"/>
         <!-- Empty slide default margin and paddings -->
         <comment userInput="User sees empty slide with margin to be 0 px and and paddings to be 40 px by default" stepKey="AC5"/>
-        <assertElementContainsAttribute selector="{{SliderInAdmin.slide}}" attribute="style" expectedValue="margin: 0px;" stepKey="verifyMargin0px"/>
+        <assertElementContainsAttribute selector="{{SliderInAdmin.slideWrapper}}" attribute="style" expectedValue="margin: 0px;" stepKey="verifyMargin0px"/>
         <assertElementContainsAttribute selector="{{SliderInAdmin.posterOverlay}}" attribute="style" expectedValue="padding: 40px;" stepKey="verifyPadding40px"/>
         <!-- Empty slide no border -->
         <comment userInput="User sees no slide border by default" stepKey="AC6"/>
-        <assertElementContainsAttribute selector="{{SliderInAdmin.slide}}" attribute="style" expectedValue="border-style: none;" stepKey="verifyBorderNone"/>
-        <assertElementContainsAttribute selector="{{SliderInAdmin.slide}}" attribute="style" expectedValue="border-radius: 0px;" stepKey="verifyBorderRadius0"/>
+        <assertElementContainsAttribute selector="{{SliderInAdmin.slideWrapper}}" attribute="style" expectedValue="border-style: none;" stepKey="verifyBorderNone"/>
+        <assertElementContainsAttribute selector="{{SliderInAdmin.slideWrapper}}" attribute="style" expectedValue="border-radius: 0px;" stepKey="verifyBorderRadius0"/>
         <!-- Slide order in option panel -->
         <comment userInput="User sees Slide order number in slide option panel" stepKey="AC7"/>
         <waitForElementVisible time="10" selector="{{PageBuilderStage.contentTypeInStage(PageBuilderSliderContentType.role)}}" stepKey="waitForContentTypeInStageVisible" />
@@ -552,7 +552,7 @@
         <!-- Validate Storefront -->
         <comment userInput="Validate Storefront" stepKey="commentValidateStorefront"/>
         <comment userInput="Verify slide defaults on storefront: margin 0 px by default" stepKey="storefrontDefaultMargin"/>
-        <assertElementContainsAttribute selector="{{SlideOnFrontend.slide('1')}}" attribute="style" expectedValue="margin: 0px;" stepKey="verifyMargin0pxStorefront"/>
+        <assertElementContainsAttribute selector="{{SlideOnFrontend.slide('1')}} .pagebuilder-slide-wrapper" attribute="style" expectedValue="margin: 0px;" stepKey="verifyMargin0pxStorefront"/>
         <comment userInput="Verify slide defaults on storefront: paddings 40 px by default" stepKey="storefrontDefaultPadding"/>
         <assertElementContainsAttribute selector="{{SlideOnFrontend.slide('1')}} .pagebuilder-slide-wrapper .pagebuilder-poster-overlay" attribute="style" expectedValue="padding: 40px;" stepKey="verifyPadding40pxStorefront"/>
         <comment userInput="Verify slide defaults on storefront: User sees no slide border by default" stepKey="storefrontDefaultBorder"/>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-centered/master.html

@@ -6,14 +6,15 @@
 -->
 
 <div attr="data.main.attributes"
+     ko-style="data.main.style"
      css="data.main.css">
     <a attr="data.link.attributes"
        ko-style="data.link.style"
        css="data.link.css">
         <div class="pagebuilder-slide-wrapper pagebuilder-mobile-hidden"
              css="data.desktop_image.css"
              attr="data.desktop_image.attributes"
-             ko-style="Object.assign({}, data.desktop_image.style(), data.main.style(), {paddingLeft: 'calc(25% + ' + data.desktop_image.style().paddingLeft + ')', paddingRight: 'calc(25% + ' + data.desktop_image.style().paddingRight + ')'})">
+             ko-style="Object.assign({}, data.desktop_image.style(), {paddingLeft: 'calc(25% + ' + data.desktop_image.style().paddingLeft + ')', paddingRight: 'calc(25% + ' + data.desktop_image.style().paddingRight + ')'})">
             <div class="pagebuilder-overlay"
                  attr="data.overlay.attributes"
                  ko-style="data.overlay.style"
@@ -36,7 +37,7 @@
             </div>
         </div>
         <div class="pagebuilder-slide-wrapper pagebuilder-mobile-only"
-             ko-style="Object.assign({}, data.mobile_image.style(), data.main.style())"
+             ko-style="data.mobile_image.style"
              attr="data.mobile_image.attributes"
              css="data.mobile_image.css">
             <div class="pagebuilder-overlay "

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-left/master.html

@@ -6,13 +6,14 @@
 -->
 
 <div attr="data.main.attributes"
+     ko-style="data.main.style"
      css="data.main.css">
     <a attr="data.link.attributes"
        ko-style="data.link.style"
        css="data.link.css">
         <div class="pagebuilder-slide-wrapper pagebuilder-mobile-hidden"
              attr="data.desktop_image.attributes"
-             ko-style="Object.assign({}, data.desktop_image.style(), data.main.style(), {paddingRight: 'calc(50% + ' + data.desktop_image.style().paddingRight + ')'})"
+             ko-style="Object.assign({}, data.desktop_image.style(), {paddingRight: 'calc(50% + ' + data.desktop_image.style().paddingRight + ')'})"
              css="data.desktop_image.css">
             <div class="pagebuilder-overlay"
                  attr="data.overlay.attributes"
@@ -36,7 +37,7 @@
             </div>
         </div>
         <div class="pagebuilder-slide-wrapper pagebuilder-mobile-only"
-             ko-style="Object.assign({}, data.mobile_image.style(), data.main.style())"
+             ko-style="data.mobile_image.style"
              attr="data.mobile_image.attributes"
              css="data.mobile_image.css">
             <div class="pagebuilder-overlay"

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-right/master.html

@@ -6,12 +6,13 @@
 -->
 
 <div attr="data.main.attributes"
+     ko-style="data.main.style"
      css="data.main.css">
     <a attr="data.link.attributes"
        ko-style="data.link.style"
        css="data.link.css">
         <div attr="data.desktop_image.attributes"
-             ko-style="Object.assign({}, data.desktop_image.style(), data.main.style(), {paddingLeft: 'calc(50% + ' + data.desktop_image.style().paddingLeft + ')'})"
+             ko-style="Object.assign({}, data.desktop_image.style(), {paddingLeft: 'calc(50% + ' + data.desktop_image.style().paddingLeft + ')'})"
              css="data.desktop_image.css"
              class="pagebuilder-slide-wrapper pagebuilder-mobile-hidden">
             <div class="pagebuilder-overlay"
@@ -36,7 +37,7 @@
         </div>
         <div class="pagebuilder-slide-wrapper pagebuilder-mobile-only"
              attr="data.mobile_image.attributes"
-             ko-style="Object.assign({}, data.mobile_image.style(), data.main.style())"
+             ko-style="data.mobile_image.style"
              css="data.mobile_image.css">
             <div class="pagebuilder-overlay"
                  attr="data.overlay.attributes"

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/poster/master.html

@@ -6,13 +6,14 @@
 -->
 
 <div attr="data.main.attributes"
+     ko-style="data.main.style"
      css="data.main.css">
     <a attr="data.link.attributes"
        ko-style="data.link.style"
        css="data.link.css">
         <div class="pagebuilder-slide-wrapper pagebuilder-mobile-hidden"
              attr="data.desktop_image.attributes"
-             ko-style="Object.assign(data.desktop_image.style(), data.main.style())"
+             ko-style="data.desktop_image.style"
              css="data.desktop_image.css">
             <div class="pagebuilder-overlay pagebuilder-poster-overlay"
                  attr="data.overlay.attributes"
@@ -37,7 +38,7 @@
         </div>
         <div class="pagebuilder-slide-wrapper pagebuilder-mobile-only"
              attr="data.mobile_image.attributes"
-             ko-style="Object.assign(data.mobile_image.style(), data.main.style())"
+             ko-style="data.mobile_image.style"
              css="data.mobile_image.css">
             <div class="pagebuilder-overlay pagebuilder-poster-overlay"
                  attr="data.overlay.attributes"