MAGETWO-91981: Create New Vertical Appearance from Prototype

- fix issue with switching from stacked to inline appearance on admin preview

Author: krissyhiserote

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

@@ -45,15 +45,16 @@ public function render(array $itemData, array $additionalData = [])
         $rootElementAttributes = [
             'data-role' => 'buttons',
             'data-appearance' => 'inline',
-            'class' => $eavData['css_classes'] ?? ''
+            'class' => $eavData['css_classes'] ?? '',
+            'style' => 'display: inline-block;'
         ];
 
         if (isset($itemData['formData'])) {
             $style = $this->styleExtractor->extractStyle($itemData['formData']);
             if (strpos($style, 'padding') === false) {
                 $style .= ($style ? ' ' : '') . 'padding: 10px 10px 0px;';
             }
-            $rootElementAttributes['style'] = $style;
+            $rootElementAttributes['style'] .= ' ' . $style;
         }
 
         $rootElementHtml = '<div';

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

@@ -268,7 +268,7 @@ Inline styles
 5. border-radius
 6. margin
 7. padding
-8. display (only on stacked appearance)
+8. display
 9. flex-direction (only on stacked appearance)
 
 ## Button item

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

@@ -10,10 +10,6 @@
 .pagebuilder-buttons {
     padding: 10px;
 
-    .element-children {
-        display: inline-block;
-    }
-
     .pagebuilder-content-type-wrapper {
         display: inline-block;
         vertical-align: baseline;

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

@@ -31,6 +31,7 @@
                                     <property name="border_color" source="border_color" converter="Magento_PageBuilder/js/converter/style/color"/>
                                     <property name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
                                     <property name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
+                                    <static_property source="display" value="inline-block"/>
                                     <complex_property name="margins_and_padding" reader="Magento_PageBuilder/js/property/margins-and-paddings" converter="Magento_PageBuilder/js/converter/style/margins-and-paddings"/>
                                 </style_properties>
                                 <attributes>

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

@@ -1 +1 @@
-<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>
+<div data-role="row" data-appearance="default"><div data-role="buttons" data-appearance="inline" class="one two" style="display: inline-block; 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="inline" style="padding: 10px 10px 0px;"></div></div>
+<div data-role="row" data-appearance="default"><div data-role="buttons" data-appearance="inline" style="display: inline-block; 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="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>
+<div data-role="row" data-appearance="default"><div data-role="buttons" data-appearance="inline" style="display: inline-block; 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="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>
+<div data-role="row" data-appearance="default"><div data-role="buttons" data-appearance="inline" style="display: inline-block; 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>