MC-4318: Slide Transparent Background Color Renders Incorrectly & Inconsistently On Stage & Storefront

- Updated slide collage templates to have an additional class for putting on default background color
- Updated backend styling for slide and banner
- Updated test sections for default background color style on backend

Author: Hwashiang Yu

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

@@ -99,7 +99,7 @@
         <element name="backgroundRepeat" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style,'background-repeat: {{arg2}};')]" parameterized="true"/>
         <element name="backgroundAttachment" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style,'background-attachment: {{arg2}};')]" parameterized="true"/>
         <element name="backgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style,'background-color: {{arg2}};')]" parameterized="true"/>
-        <element name="noBackgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[@data-element='desktop_image'][not(contains(@style,'background-color:'))]" parameterized="true"/>
+        <element name="noBackgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style,'background-color: #fafafa;')]" parameterized="true"/>
         <element name="backgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style,'background-image: url(') and contains(@style,'{{arg2}}')]" parameterized="true"/>
         <element name="noBackgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[@data-element='desktop_image'][not(contains(@style,'background-image:'))]" parameterized="true"/>
         <!-- Content Configuration -->

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

@@ -78,7 +78,7 @@
         <element name="mobileMinimumHeight" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='mobile_image'][contains(@style,'min-height: {{arg2}}px;')]" parameterized="true"/>
         <!-- Background Configuration -->
         <element name="backgroundColor" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style,'background-color: {{arg2}};')]" parameterized="true"/>
-        <element name="noBackgroundColor" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='desktop_image'][not(contains(@style,'background-color:'))]" parameterized="true"/>
+        <element name="noBackgroundColor" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style,'background-color: #fafafa;')]" parameterized="true"/>
         <element name="backgroundImage" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style,'background-image: url(') and contains(@style,'{{arg2}}')]" parameterized="true"/>
         <element name="noBackgroundImage" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='desktop_image'][not(contains(@style,'background-image:'))]" parameterized="true"/>
         <element name="backgroundPosition" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='desktop_image'][contains(@style,'background-position: {{arg2}};')]" parameterized="true"/>

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

@@ -8,9 +8,12 @@
 //  _____________________________________________
 
 .pagebuilder-banner {
-    background-color: @color-gray98;
     cursor: text;
 
+    .pagebuilder-banner-wrapper {
+        background-color: @color-gray98;
+    }
+
     .pagebuilder-overlay {
         -moz-transition: background-color 500ms ease;
         -o-transition: background-color 500ms ease;

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

@@ -8,9 +8,12 @@
 //  _____________________________________________
 
 .pagebuilder-slide {
-    background-color: @color-gray98;
     cursor: text;
 
+    .pagebuilder-slide-wrapper {
+        background-color: @color-gray98;
+    }
+
     .pagebuilder-empty-slide {
         color: @color-gray65-lighten;
         font-size: 14px;

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

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

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

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

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

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