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

 - remove uses of getBackgroundStyles() and getPaddingStyles()

Author: cspruiell

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

@@ -9,6 +9,7 @@
 
 .pagebuilder-slide {
     background-color: @color-gray98;
+    overflow: hidden;
 
     .pagebuilder-empty-slide {
         color: @color-gray65-lighten;

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

@@ -8,8 +8,9 @@
 <div class="pagebuilder-content-type pagebuilder-slide"
      attr="data.main.attributes"
      css="data.main.css"
+     ko-style="data.main.style"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
-    <div ko-style="Object.assign(data.main.style(), data.desktop_image.style(), {paddingLeft: 'calc(25% + ' + data.desktop_image.style().paddingLeft + ')', paddingRight: 'calc(25% + ' + data.desktop_image.style().paddingRight + ')'})"
+    <div ko-style="Object.assign(data.desktop_image.style(), {paddingLeft: 'calc(25% + ' + data.desktop_image.style().paddingLeft + ')', paddingRight: 'calc(25% + ' + data.desktop_image.style().paddingRight + ')'})"
          event="{mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper}">
         <div class="pagebuilder-collage-overlay" ko-style="data.overlay.style()">
             <scope args="getUploader().getUiComponent()">

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

@@ -8,8 +8,9 @@
 <div class="pagebuilder-content-type pagebuilder-slide"
      attr="data.main.attributes"
      css="data.main.css"
+     ko-style="data.main.style"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
-    <div ko-style="Object.assign(data.main.style(), data.desktop_image.style(), {paddingRight: 'calc(50% + ' + data.desktop_image.style().paddingRight + ')'})"
+    <div ko-style="Object.assign(data.desktop_image.style(), {paddingRight: 'calc(50% + ' + data.desktop_image.style().paddingRight + ')'})"
          css="data.main.css"
          event="{ mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper }">
         <div class="pagebuilder-collage-overlay"

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

@@ -8,8 +8,9 @@
 <div class="pagebuilder-content-type pagebuilder-slide"
      attr="data.main.attributes"
      css="data.main.css"
+     ko-style="data.main.style"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
-    <div ko-style="Object.assign(data.main.style(), data.desktop_image.style(), {paddingLeft: 'calc(50% + ' + data.desktop_image.style().paddingLeft + ')'})"
+    <div ko-style="Object.assign(data.desktop_image.style(), {paddingLeft: 'calc(50% + ' + data.desktop_image.style().paddingLeft + ')'})"
          event="{mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper}">
         <div class="pagebuilder-collage-overlay" ko-style="data.overlay.style">
             <scope args="getUploader().getUiComponent()">

app/code/Magento/PageBuilder/view/base/pagebuilder/content_type/slide.xml

@@ -46,7 +46,6 @@
                     </element>
                     <element name="overlay">
                         <style name="background_color" source="background_color" converter="Magento_PageBuilder/js/content-type/slide/converter/style/overlay-background-color" persistence_mode="write"/>
-                        <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
                         <attribute name="overlay_color" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/slide/converter/attribute/overlay-color" persistence_mode="read"/>
                         <attribute name="overlay_transparency" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/slide/converter/attribute/overlay-transparency" persistence_mode="read"/>
                         <attribute name="virtual_overlay_transparency" storage_key="overlay_transparency" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/slide/converter/attribute/overlay-color-transparency" persistence_mode="write"/>
@@ -59,6 +58,7 @@
                         <style name="background_position" source="background_position"/>
                         <style name="background_size" source="background_size"/>
                         <style name="background_repeat" source="background_repeat"/>
+                        <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
                     </element>
                     <element name="mobile_image">
                         <style name="text_align" source="text_align"/>
@@ -68,6 +68,7 @@
                         <style name="background_position" source="background_position"/>
                         <style name="background_size" source="background_size"/>
                         <style name="background_repeat" source="background_repeat"/>
+                        <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
                     </element>
                     <element name="content">
                         <html name="content" preview_converter="Magento_PageBuilder/js/converter/html/directive"/>
@@ -118,7 +119,6 @@
                     </element>
                     <element name="overlay">
                         <style name="background_color" source="background_color" converter="Magento_PageBuilder/js/content-type/slide/converter/style/overlay-background-color" persistence_mode="write"/>
-                        <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
                         <attribute name="overlay_color" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/slide/converter/attribute/overlay-color" persistence_mode="read"/>
                         <attribute name="overlay_transparency" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/slide/converter/attribute/overlay-transparency" persistence_mode="read"/>
                         <attribute name="virtual_overlay_transparency" storage_key="overlay_transparency" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/slide/converter/attribute/overlay-color-transparency" persistence_mode="write"/>
@@ -131,6 +131,7 @@
                         <style name="background_position" source="background_position"/>
                         <style name="background_size" source="background_size"/>
                         <style name="background_repeat" source="background_repeat"/>
+                        <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
                     </element>
                     <element name="mobile_image">
                         <style name="text_align" source="text_align"/>
@@ -140,6 +141,7 @@
                         <style name="background_position" source="background_position"/>
                         <style name="background_size" source="background_size"/>
                         <style name="background_repeat" source="background_repeat"/>
+                        <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
                     </element>
                     <element name="content">
                         <html name="content" preview_converter="Magento_PageBuilder/js/converter/html/directive"/>
@@ -190,7 +192,6 @@
                     </element>
                     <element name="overlay">
                         <style name="background_color" source="background_color" converter="Magento_PageBuilder/js/content-type/slide/converter/style/overlay-background-color" persistence_mode="write"/>
-                        <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
                         <attribute name="overlay_color" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/slide/converter/attribute/overlay-color" persistence_mode="read"/>
                         <attribute name="overlay_transparency" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/slide/converter/attribute/overlay-transparency" persistence_mode="read"/>
                         <attribute name="virtual_overlay_transparency" storage_key="overlay_transparency" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/slide/converter/attribute/overlay-color-transparency" persistence_mode="write"/>
@@ -203,6 +204,7 @@
                         <style name="background_position" source="background_position"/>
                         <style name="background_size" source="background_size"/>
                         <style name="background_repeat" source="background_repeat"/>
+                        <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
                     </element>
                     <element name="mobile_image">
                         <style name="text_align" source="text_align"/>
@@ -212,6 +214,7 @@
                         <style name="background_position" source="background_position"/>
                         <style name="background_size" source="background_size"/>
                         <style name="background_repeat" source="background_repeat"/>
+                        <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
                     </element>
                     <element name="content">
                         <html name="content" preview_converter="Magento_PageBuilder/js/converter/html/directive"/>

app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/slide/_default.less

@@ -9,6 +9,7 @@
 
 [data-role='slide'] {
     box-sizing: border-box;
+    overflow: hidden;
 
     > a {
         color: inherit;