Merge remote-tracking branch 'origin/MC-4093-hide-stacked-buttons' into cms-team-1-delivery

Author: cspruiell

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderButtonGroupTests.xml

@@ -1042,10 +1042,15 @@
         <actionGroup ref="dragContentTypeToStage" stepKey="dragButtonsIntoStage">
             <argument name="contentType" value="PageBuilderButtonsContentType"/>
         </actionGroup>
+        <actionGroup ref="addButton" stepKey="addButton" />
         <actionGroup ref="inlineEditButton" stepKey="inlineEditButton1">
             <argument name="text" value="PageBuilderButtonItemText_First"/>
             <argument name="index" value="1"/>
         </actionGroup>
+        <actionGroup ref="inlineEditButton" stepKey="inlineEditButton2">
+            <argument name="text" value="PageBuilderButtonItemText_Second"/>
+            <argument name="index" value="2"/>
+        </actionGroup>
         <actionGroup ref="hideContentType" stepKey="hideContentType">
             <argument name="section" value="ButtonGroupOnStage"/>
             <argument name="contentType" value="PageBuilderButtonsContentType"/>
@@ -1056,10 +1061,12 @@
         <comment userInput="Validate content type remains disabled after save" stepKey="commentValidateHiddenStage"/>
         <seeElement selector="{{ButtonGroupOnStage.hidden('1')}}" stepKey="waitForContentTypeHidden" />
         <seeElement selector="{{ButtonItemOnStage.hidden('1')}}" stepKey="waitForContentTypeHiddenButtonItem" />
+        <seeElement selector="{{ButtonItemOnStage.hidden('2')}}" stepKey="waitForContentTypeHiddenButtonItem2" />
         <!-- Verify we cannot interact with the internal button after save -->
         <comment userInput="Verify we cannot interact with the internal button after save" stepKey="commentVerifyButtonItemIsDisabledAfterSave"/>
         <seeElementInDOM selector="{{ButtonItemOnStage.optionsMenu('1')}}" stepKey="seeDomButtonItemOptionsMenu"/>
         <dontSeeElement selector="{{ButtonItemOnStage.optionsMenu('1')}}" stepKey="dontSeeButtonItemOptionsMenu"/>
+        <dontSeeElement selector="{{ButtonItemOnStage.optionsMenu('2')}}" stepKey="dontSeeButtonItem2OptionsMenu"/>
         <!-- Validate store front -->
         <comment userInput="Validate content type is disabled on storefront" stepKey="commentValidateHiddenStorefront"/>
         <openNewTab stepKey="openNewTab" />
@@ -1071,6 +1078,7 @@
         <seeElementInDOM selector="{{ButtonGroupOnStorefront.hidden('1')}}" stepKey="waitForHiddenElement" />
         <waitForElement selector="{{ButtonItemOnStorefront.base('1')}}" stepKey="waitForButtonItemNotVisible" />
         <dontSeeElement selector="{{ButtonItemOnStorefront.base('1')}}" stepKey="dontSeeButtonItem" />
+        <dontSeeElement selector="{{ButtonItemOnStorefront.base('2')}}" stepKey="dontSeeButtonItem2" />
         <!-- Set content to visible in admin -->
         <comment userInput="Set content to visible in admin" stepKey="commentSetContentToVisibleAdmin"/>
         <switchToNextTab stepKey="switchBackToAdmin" />
@@ -1090,5 +1098,33 @@
         <dontSeeElementInDOM selector="{{ButtonGroupOnStorefront.hidden('1')}}" stepKey="dontSeeHiddenElement"/>
         <seeElement selector="{{ButtonGroupOnStorefront.base('1')}}" stepKey="waitForButtonGroupVisible" />
         <seeElement selector="{{ButtonItemOnStorefront.base('1')}}" stepKey="waitForButtonItemVisible" />
+        <seeElement selector="{{ButtonItemOnStorefront.base('2')}}" stepKey="waitForButtonItem2Visible" />
+    </test>
+    <test name="ValidateShowHideOnButtonsOnStackedAppearance" extends="ValidateShowHideOnButtons">
+        <annotations>
+            <features value="PageBuilder"/>
+            <stories value="Buttons"/>
+            <title value="Button Group - Buttons has hide show capabilities on stacked appearance"/>
+            <description value="A user is able to hide and show the buttons successfully when using stacked appearance"/>
+            <severity value="CRITICAL"/>
+            <useCaseId value="MC-4093"/>
+            <testCaseId value="MC-4230"/>
+            <group value="pagebuilder"/>
+            <group value="pagebuilder-buttons"/>
+            <group value="pagebuilder-buttonItem"/>
+            <group value="pagebuilder-hideShow"/>
+        </annotations>
+        <actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu" after="dragButtonsIntoStage">
+            <argument name="contentType" value="PageBuilderButtonItemContentType"/>
+        </actionGroup>
+        <actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage" after="unFocusOptionMenu">
+            <argument name="contentType" value="PageBuilderButtonsContentType"/>
+        </actionGroup>
+        <!-- Select Stacked Appearance -->
+        <comment userInput="Select Stacked Appearances" stepKey="commentSelectStackedAppearance" after="openEditMenuOnStage"/>
+        <actionGroup ref="chooseVisualSelectOption" stepKey="enterAppearance" after="commentSelectStackedAppearance">
+            <argument name="property" value="PageBuilderButtonGroupAppearance_Stacked"/>
+        </actionGroup>
+        <actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings1" after="enterAppearance"/>
     </test>
 </tests>

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

@@ -8,6 +8,6 @@
 <div class="pagebuilder-content-type pagebuilder-entity pagebuilder-entity-preview pagebuilder-no-blur pagebuilder-live-edit pagebuilder-buttons" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
     <render args="getOptions().template" />
     <div class="element-children buttons-container" each="parent.getChildren()" attr="Object.assign({}, data.main.attributes(), { id: parent.id + '-children' })" ko-style="data.main.style" css="data.main.css" data-bind="sortableChildren: getSortableOptions('height', 'pointer')">
-        <div class="pagebuilder-content-type-wrapper" template="{ name: preview.previewTemplate, data: preview, afterRender: function () { preview.dispatchAfterRenderEvent.apply(preview, arguments); } }" attr="{ id: id }"></div>
+        <div class="pagebuilder-content-type-wrapper" template="{ name: preview.previewTemplate, data: preview, afterRender: function () { preview.dispatchAfterRenderEvent.apply(preview, arguments); } }" attr="{ id: id }" css="{'pagebuilder-content-type-hidden': !preview.display()}"></div>
     </div>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/buttons/converter/style/display/inline-block.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/preview/display/flex.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/template/content-type/buttons/stacked/preview.html

@@ -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";
+    }
+}