MC-3146: Add new row appearances to configuration

- Resolve CR comments

Author: davemacaulay

app/code/Magento/PageBuilder/docs/images/row-appearance-explained.png

@@ -60,7 +60,7 @@ PageBuilder uses XHTML with inline styles and data attributes as the master form
 
 ## Row
 
-#### Contained:
+Contained:
 ```
 <div class="row-contained-wrapper" data-element="wrapper" data-role="row" data-appearance="contained">
     <div style="..."></div>
@@ -75,21 +75,21 @@ PageBuilder uses XHTML with inline styles and data attributes as the master form
 ### main element
 
 Attributes
-4. data-enable-parallax [1, 0]
-5. data-parallax-speed [0-1]
-6. data-background-color-format [hex, rgb, hsl, hsv, name, none]
-7. class
+1. data-enable-parallax [1, 0]
+2. data-parallax-speed [0-1]
+3. data-background-color-format [hex, rgb, hsl, hsv, name, none]
+4. class
 
-#### Full Width:
+Full Width:
 ```
 <div data-element="main" data-role="row" data-appearance="contained" style="...">
     <div data-element="inner" class="row-full-width-inner"></div>
 </div>
 ```
 
-#### Full Bleed:
+Full Bleed:
 ```
-<div data-element="main" data-role="row" data-appearance="contained" style="..."></div>
+<div data-element="main" data-role="row" data-appearance="full-bleed" style="..."></div>
 ```
 
 ### main element

app/code/Magento/PageBuilder/docs/images/row-appearance.png

@@ -5,12 +5,12 @@
  */
 -->
 
-<div attr="data.wrapper.attributes"
-     ko-style="data.wrapper.style"
-     css="data.wrapper.css">
-    <div attr="data.main.attributes"
-         ko-style="Object.assign(data.container.style(), data.main.style())"
-         css="data.main.css">
+<div attr="data.main.attributes"
+     ko-style="data.main.style"
+     css="data.main.css">
+    <div attr="data.inner.attributes"
+         ko-style="Object.assign(data.container.style(), data.inner.style())"
+         css="data.inner.css">
         <render args="renderChildTemplate"/>
     </div>
 </div>

app/code/Magento/PageBuilder/docs/master-format.md

@@ -5,13 +5,13 @@
  */
 -->
 
-<div attr="data.wrapper.attributes"
-     ko-style="data.wrapper.style"
-     css="data.wrapper.css">
+<div attr="data.main.attributes"
+     ko-style="data.main.style"
+     css="data.main.css">
     <div class="pagebuilder-content-type type-container pagebuilder-row children-min-height"
-         attr="data.main.attributes"
-         ko-style="data.main.style"
-         css="Object.assign(data.main.css(), {'empty-container': parent.children().length == 0, 'jarallax': data.main.attributes()['data-enable-parallax'] == 1})"
+         attr="data.inner.attributes"
+         ko-style="data.inner.style"
+         css="Object.assign(data.inner.css(), {'empty-container': parent.children().length == 0, 'jarallax': data.inner.attributes()['data-enable-parallax'] == 1})"
          event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false"
          afterRender="initParallax">
         <render args="getOptions().template"/>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/contained/master.html

@@ -31,13 +31,13 @@
                             reader="Magento_PageBuilder/js/master-format/read/configurable">
                     <data_mapping>
                         <elements>
-                            <element name="wrapper">
+                            <element name="main">
                                 <attributes>
                                     <attribute name="name" source="data-role"/>
                                     <attribute name="appearance" source="data-appearance"/>
                                 </attributes>
                             </element>
-                            <element name="main">
+                            <element name="inner">
                                 <style_properties>
                                     <property name="background_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/color"/>
                                     <property name="background_image" source="background_image" converter="Magento_PageBuilder/js/converter/style/background-image" preview_converter="Magento_PageBuilder/js/converter/style/preview/background-image"/>