MAGETWO-91981: Create New Vertical Appearance from Prototype

- fix DataConverter appearance for buttons and master format documentation

Author: krissyhiserote

app/code/Magento/PageBuilder/Setup/DataConverter/Renderer/Buttons.php

@@ -44,7 +44,7 @@ public function render(array $itemData, array $additionalData = [])
 
         $rootElementAttributes = [
             'data-role' => 'buttons',
-            'data-appearance' => 'default',
+            'data-appearance' => 'inline',
             'class' => $eavData['css_classes'] ?? ''
         ];
 

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

@@ -252,12 +252,12 @@ Inline styles
 ## Buttons
 
 ```
-<div data-role="buttons" data-appearance="default" style="..."></div>
+<div data-role="buttons" data-appearance="inline" style="..."></div>
 ```
 
 Attributes
 1. data-role [buttons]
-2. data-appearance [default]
+2. data-appearance [inline, stacked]
 3. class
 
 Inline styles
@@ -268,6 +268,8 @@ Inline styles
 5. border-radius
 6. margin
 7. padding
+8. display (only on stacked appearance)
+9. flex-direction (only on stacked appearance)
 
 ## Button item
 

dev/tests/integration/testsuite/Magento/PageBuilder/_files/buttons.html

@@ -1 +1 @@
-<div data-role="row" data-appearance="default"><div data-role="buttons" data-appearance="default" class="one two" style="text-align: left; margin: 2px 3px 4px 1px; padding: 6px 7px 8px 5px;"><div data-role="button-item" data-appearance="default" style="display: inline-block;" class="three four"><a href="http://domain.com/" style="text-align: right; margin: 0px 2px 0px 1px; padding: 3px 0px 4px 0px;" class="pagebuilder-button-primary"><span>Domain.com</span></a></div></div></div>
+<div data-role="row" data-appearance="default"><div data-role="buttons" data-appearance="inline" class="one two" style="text-align: left; margin: 2px 3px 4px 1px; padding: 6px 7px 8px 5px;"><div data-role="button-item" data-appearance="default" style="display: inline-block;" class="three four"><a href="http://domain.com/" style="text-align: right; margin: 0px 2px 0px 1px; padding: 3px 0px 4px 0px;" class="pagebuilder-button-primary"><span>Domain.com</span></a></div></div></div>

dev/tests/integration/testsuite/Magento/PageBuilder/_files/buttons_empty.html

@@ -1 +1 @@
-<div data-role="row" data-appearance="default"><div data-role="buttons" data-appearance="default" style="padding: 10px 10px 0px;"></div></div>
+<div data-role="row" data-appearance="default"><div data-role="buttons" data-appearance="inline" style="padding: 10px 10px 0px;"></div></div>

dev/tests/integration/testsuite/Magento/PageBuilder/_files/buttons_no_link_text.html

@@ -1 +1 @@
-<div data-role="row" data-appearance="default"><div data-role="buttons" data-appearance="default" style="text-align: left; margin: 2px 3px 4px 1px; padding: 6px 7px 8px 5px;"><div data-role="button-item" data-appearance="default" style="display: inline-block;"><a href="http://domain.com/" style="text-align: right; margin: 0px 2px 0px 1px; padding: 3px 0px 4px 0px;" class="pagebuilder-button-primary"><span></span></a></div></div></div>
+<div data-role="row" data-appearance="default"><div data-role="buttons" data-appearance="inline" style="text-align: left; margin: 2px 3px 4px 1px; padding: 6px 7px 8px 5px;"><div data-role="button-item" data-appearance="default" style="display: inline-block;"><a href="http://domain.com/" style="text-align: right; margin: 0px 2px 0px 1px; padding: 3px 0px 4px 0px;" class="pagebuilder-button-primary"><span></span></a></div></div></div>

dev/tests/integration/testsuite/Magento/PageBuilder/_files/buttons_no_link_url.html

@@ -1 +1 @@
-<div data-role="row" data-appearance="default"><div data-role="buttons" data-appearance="default" style="text-align: left; margin: 2px 3px 4px 1px; padding: 6px 7px 8px 5px;"><div data-role="button-item" data-appearance="default" style="display: inline-block;"><a href="" style="text-align: right; margin: 0px 2px 0px 1px; padding: 3px 0px 4px 0px;" class="pagebuilder-button-primary"><span>Domain.com</span></a></div></div></div>
+<div data-role="row" data-appearance="default"><div data-role="buttons" data-appearance="inline" style="text-align: left; margin: 2px 3px 4px 1px; padding: 6px 7px 8px 5px;"><div data-role="button-item" data-appearance="default" style="display: inline-block;"><a href="" style="text-align: right; margin: 0px 2px 0px 1px; padding: 3px 0px 4px 0px;" class="pagebuilder-button-primary"><span>Domain.com</span></a></div></div></div>