MC-4093: Couldn't hide buttons group when appearance is set as Stacked

- Add required display entries to stack buttons content type

Author: davemacaulay

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

@@ -32,7 +32,7 @@
                         <style name="border_color" source="border_color"/>
                         <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
                         <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
-                        <style name="display" source="display" converter="Magento_PageBuilder/js/content-type/buttons/converter/style/display" preview_converter="Magento_PageBuilder/js/converter/style/preview/display"/>
+                        <style name="display" source="display" converter="Magento_PageBuilder/js/content-type/buttons/converter/style/display/inline-block" preview_converter="Magento_PageBuilder/js/converter/style/preview/display"/>
                         <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
                         <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>
                         <attribute name="name" source="data-role"/>
@@ -53,7 +53,7 @@
                         <style name="border_color" source="border_color"/>
                         <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
                         <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
-                        <static_style source="display" value="flex"/>
+                        <style name="display" source="display" converter="Magento_PageBuilder/js/content-type/buttons/converter/style/display/flex" preview_converter="Magento_PageBuilder/js/content-type/buttons/converter/style/preview/display/flex"/>
                         <static_style source="flex_direction" value="column"/>
                         <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
                         <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/buttons/converter/style/display/flex.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+import ConverterInterface from "../../../../../converter/converter-interface";
+import {DataObject} from "../../../../../data-store";
+
+/**
+ * @api
+ */
+export default class Flex implements ConverterInterface {
+    /**
+     * Convert value to internal format
+     *
+     * @param value string
+     * @returns {string | object}
+     */
+    public fromDom(value: string): boolean {
+        return !(value === "none");
+    }
+
+    /**
+     * Convert value to knockout format, if buttons are displayed they should be inline block
+     *
+     * @param {string} name
+     * @param {DataObject} data
+     * @returns {string}
+     */
+    public toDom(name: string, data: DataObject): string {
+        if (typeof data[name] !== "undefined" && data[name] === false) {
+            return "none";
+        }
+        return "flex";
+    }
+}

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/buttons/converter/style/display/inline-block.js

@@ -3,13 +3,13 @@
  * See COPYING.txt for license details.
  */
 
-import ConverterInterface from "../../../../converter/converter-interface";
-import {DataObject} from "../../../../data-store";
+import ConverterInterface from "../../../../../converter/converter-interface";
+import {DataObject} from "../../../../../data-store";
 
 /**
  * @api
  */
-export default class Display implements ConverterInterface {
+export default class InlineBlock implements ConverterInterface {
     /**
      * Convert value to internal format
      *

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/buttons/converter/style/preview/display/flex.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+import ConverterInterface from "../../../../../../converter/converter-interface";
+import {DataObject} from "../../../../../../data-store";
+
+/**
+ * @api
+ */
+export default class Display implements ConverterInterface {
+    /**
+     * Ensure the display none property doesn't persist to the preview
+     *
+     * @param value string
+     * @returns {string | object}
+     */
+    public fromDom(value: string): string | object {
+        return;
+    }
+
+    /**
+     * Ensure the display none property doesn't persist to the preview
+     *
+     * @param name string
+     * @param data Object
+     * @returns {string}
+     */
+    public toDom(name: string, data: DataObject): string {
+        return "flex";
+    }
+}