#558: Developer can style content types output differently per viewport

- remove redundant layout - revert column-group styles back
magento · Oct 20, 2020 · 78d9be3 · 78d9be3
1 parent b358ffa
commit 78d9be3
Show file tree

Hide file tree

Showing 27 changed files with 195 additions and 199 deletions.
diff --git a/...ilder/Test/Mftf/ActionGroup/ContentTypeColumnActionGroup/CloseGridSizeFormActionGroup.xml b/...ilder/Test/Mftf/ActionGroup/ContentTypeColumnActionGroup/CloseGridSizeFormActionGroup.xml
@@ -7,7 +7,7 @@
 -->
 <actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 	xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
-    <actionGroup name="closeGridSizeForm">
+    <actionGroup name="closeGridSizeForm" deprecated="Grid size control has been moved in content type settings form">
         <arguments>
             <argument name="index" defaultValue="1" type="string"/>
         </arguments>

diff --git a/...uilder/Test/Mftf/ActionGroup/ContentTypeColumnActionGroup/OpenGridSizeFormActionGroup.xml b/...uilder/Test/Mftf/ActionGroup/ContentTypeColumnActionGroup/OpenGridSizeFormActionGroup.xml
@@ -7,7 +7,7 @@
 -->
 <actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 	xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
-    <actionGroup name="openGridSizeForm">
+    <actionGroup name="openGridSizeForm" deprecated="Grid size control has been moved in content type settings form">
         <arguments>
             <argument name="index" defaultValue="1" type="string"/>
         </arguments>

diff --git a/...eBuilder/Test/Mftf/ActionGroup/ContentTypeColumnActionGroup/UpdateGridSizeActionGroup.xml b/...eBuilder/Test/Mftf/ActionGroup/ContentTypeColumnActionGroup/UpdateGridSizeActionGroup.xml
@@ -7,7 +7,7 @@
 -->
 <actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 	xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
-    <actionGroup name="updateGridSize">
+    <actionGroup name="updateGridSize" deprecated="Grid size control has been moved in content type settings form">
         <arguments>
             <argument name="index" defaultValue="1" type="string"/>
             <argument name="gridSize" defaultValue="12" type="string"/>

diff --git a/...r/Test/Mftf/ActionGroup/ContentTypeColumnActionGroup/UpdateGridSizeInvalidActionGroup.xml b/...r/Test/Mftf/ActionGroup/ContentTypeColumnActionGroup/UpdateGridSizeInvalidActionGroup.xml
@@ -7,7 +7,7 @@
 -->
 <actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 	xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
-    <actionGroup name="updateGridSizeInvalid">
+    <actionGroup name="updateGridSizeInvalid" deprecated="Grid size control has been moved in content type settings form">
         <arguments>
             <argument name="index" defaultValue="1" type="string"/>
             <argument name="gridSize" defaultValue="12" type="string"/>

diff --git a/...lder/Test/Mftf/ActionGroup/OptionsMenuActionGroup/OpenPageBuilderEditPanelActionGroup.xml b/...lder/Test/Mftf/ActionGroup/OptionsMenuActionGroup/OpenPageBuilderEditPanelActionGroup.xml
@@ -15,7 +15,7 @@
         </arguments>
         <moveMouseOver selector="{{PageBuilderPanel.searchPanel}}" stepKey="moveMouseToSearchPanel"/>
         <waitForElementVisible time="10" selector="{{PageBuilderStage.contentTypeInStage(contentType.role)}}" stepKey="waitForContentTypeInStageVisible"/>
-        <executeJS function="return ['row', 'column'].include('{{contentType.role}}') ? '//div[contains(@class, &quot;pagebuilder-display-label&quot;) and contains(.,&quot;'+'{{contentType.role}}'.toUpperCase()+'&quot;)]' : ['tabs'].include('{{contentType.role}}') ? '//ul[@data-element=&quot;navigation&quot;]' : '';" stepKey="contentTypeLabelSelector" />
+        <executeJS function="return ['row', 'column', 'columns'].include('{{contentType.role}}') ? '//div[contains(@class, &quot;pagebuilder-display-label&quot;) and contains(.,&quot;'+'{{contentType.role}}'.toUpperCase()+'&quot;)]' : ['tabs'].include('{{contentType.role}}') ? '//ul[@data-element=&quot;navigation&quot;]' : '';" stepKey="contentTypeLabelSelector" />
         <moveMouseOver selector="{{PageBuilderStage.contentTypeInStage(contentType.role)}}{$contentTypeLabelSelector}" x="{{offsetXCoordinate}}" y="{{offsetYCoordinate}}" stepKey="onMouseOverContentTypeStage"/>
         <waitForPageLoad stepKey="waitForPageLoad"/>
         <waitForElementVisible time="10" selector="{{PageBuilderContentTypeOptionsMenu.contentTypeOptionsMenu(contentType.role)}}" stepKey="waitForOptions"/>

diff --git a/app/code/Magento/PageBuilder/Test/Mftf/Data/ColumnsData.xml b/app/code/Magento/PageBuilder/Test/Mftf/Data/ColumnsData.xml
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+  * Copyright © Magento, Inc. All rights reserved.
+  * See COPYING.txt for license details.
+  */
+-->
+
+<entities xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+        xsi:noNamespaceSchemaLocation="urn:magento:mftf:DataGenerator/etc/dataProfileSchema.xsd">
+    <entity name="PageBuilderColumnsGridSizeProperty_Default" type="pagebuilder_column_appearance_property">
+        <data key="name">Grid Size</data>
+        <data key="section">general</data>
+        <data key="fieldName">grid_size</data>
+        <data key="value">12</data>
+    </entity>
+    <entity name="PageBuilderColumnsGridSizeProperty_14" type="pagebuilder_column_appearance_property">
+        <data key="name">Grid Size</data>
+        <data key="section">general</data>
+        <data key="fieldName">grid_size</data>
+        <data key="value">14</data>
+    </entity>
+    <entity name="PageBuilderColumnsGridSizeProperty_7" type="pagebuilder_column_appearance_property">
+        <data key="name">Grid Size</data>
+        <data key="section">general</data>
+        <data key="fieldName">grid_size</data>
+        <data key="value">7</data>
+    </entity>
+</entities>
diff --git a/app/code/Magento/PageBuilder/Test/Mftf/Data/ContentTypeData.xml b/app/code/Magento/PageBuilder/Test/Mftf/Data/ContentTypeData.xml
@@ -29,6 +29,12 @@
         <data key="role">column</data>
         <data key="pageNamePrefix">column</data>
     </entity>
+    <entity name="PageBuilderColumnsContentType" type="pagebuilder_content_type">
+        <data key="name">Columns</data>
+        <data key="section">Layout</data>
+        <data key="role">columns</data>
+        <data key="pageNamePrefix">columns</data>
+    </entity>
     <entity name="PageBuilderTabsContentType" type="pagebuilder_content_type">
         <data key="name">Tabs</data>
         <data key="section">Layout</data>

diff --git a/...Magento/PageBuilder/Test/Mftf/Section/PageBuilderColumnSection/ColumnOnBackendSection.xml b/...Magento/PageBuilder/Test/Mftf/Section/PageBuilderColumnSection/ColumnOnBackendSection.xml
@@ -11,7 +11,7 @@
         <element name="base" type="button" selector="(//div[@data-content-type='column'])[{{arg1}}]" parameterized="true"/>
         <element name="baseJS" type="text" selector="document.querySelectorAll('[data-content-type=column]')[{{arg1}} - 1]" parameterized="true"/>
         <element name="baseCSS" type="text" selector="[data-content-type=column][data-element=main]"/>
-        <element name="allColumns" type="text" selector="//div[contains(@class, 'pagebuilder-content-type') and contains(@class, 'pagebuilder-column')]"/>
+        <element name="allColumns" type="text" selector="//div[contains(@class, 'pagebuilder-content-type') and contains(concat(&quot; &quot;,@class,&quot; &quot;), &quot; pagebuilder-{{arg1}} &quot;)]"/>
         <element name="default" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-column')])[{{arg1}}][@style='border: {{arg2}}; border-radius: {{arg3}}px; margin: {{arg4}}px; padding: {{arg5}}px; width: {{arg6}}; background-size: {{arg7}}; background-repeat: {{arg8}}; background-attachment: {{arg9}}; align-self: {{arg10}};']" parameterized="true"/>
         <element name="empty" type="button" selector="(//div[contains(@class,'empty-container')]//div[contains(@class,'element-children') and contains(@class,'column-container')])[{{arg1}}]" parameterized="true"/>
         <element name="columnGroup" type="text" selector="(//div[contains(@class, 'pagebuilder-column-group')])[{{arg1}}]" parameterized="true"/>
@@ -24,7 +24,7 @@
         <element name="columnStyle" type="text" selector="(//div[contains(@class, 'pagebuilder-column-group')])[1]/descendant::div[contains(@class, 'pagebuilder-content-type') and contains(@class, 'pagebuilder-column')][{{arg1}}][contains(@style, '{{arg2}}')]" parameterized="true"/>
         <element name="columnChildrenStyle" type="text" selector="(//div[contains(@class, 'pagebuilder-column-group')])[{{arg1}}]/descendant::div[contains(@class, 'pagebuilder-content-type') and contains(@class, 'pagebuilder-column')][{{arg2}}]//div[contains(@class, 'element-children')][contains(@style, '{{arg3}}')]" parameterized="true"/>
         <element name="columnByIndexAndWidthClass" type="text" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-column')])[{{arg1}}][contains(@class,'column-width-{{arg2}}')]" parameterized="true"/>
-        <element name="displayLabel" type="button" selector="(//div[contains(@class, &quot;pagebuilder-content-type&quot;) and contains(@class, &quot;pagebuilder-column&quot;)])[{{arg1}}]/descendant::div[contains(@class, &quot;pagebuilder-display-label&quot;)][contains(text(), &quot;{{arg2}}&quot;)]" parameterized="true"/>
+        <element name="displayLabel" type="button" selector="(//div[contains(@class, &quot;pagebuilder-content-type&quot;) and contains(concat(&quot; &quot;,@class,&quot; &quot;), &quot; pagebuilder-column &quot;)])[{{arg1}}]/descendant::div[contains(@class, &quot;pagebuilder-display-label&quot;)][contains(text(), &quot;{{arg2}}&quot;)]" parameterized="true"/>
         <element name="columnMoveByIndex" type="button" selector="(//div[contains(@class, &quot;pagebuilder-content-type&quot;) and contains(@class, &quot;pagebuilder-column&quot;)])[{{arg1}}]//div[contains(@class,&quot;pagebuilder-options-visible&quot;)]/descendant::*[@class=&quot;move-column&quot;]" parameterized="true"/>
         <element name="displayLabelGridSize" type="button" selector="(//div[contains(@class, &quot;pagebuilder-column-group&quot;)])[{{arg1}}]//div[contains(@class, &quot;pagebuilder-display-label&quot;)][1][contains(text(), &quot;/{{arg2}}&quot;)]" parameterized="true"/>
         <element name="gridSizeButton" type="button" selector="(//div[contains(@class, 'pagebuilder-column-group')])[{{arg1}}]/descendant::div[contains(@class, 'indicator-wrapper')]" parameterized="true"/>

diff --git a/...to/PageBuilder/Test/Mftf/Test/AdminPageBuilderColumnGridTest/SetDefaultGridSize14Test.xml b/...to/PageBuilder/Test/Mftf/Test/AdminPageBuilderColumnGridTest/SetDefaultGridSize14Test.xml
@@ -33,9 +33,13 @@
         </actionGroup>
         <executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('1')}}').clientWidth" stepKey="columnOneWidthGrid12"/>
         <executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('2')}}').clientWidth" stepKey="columnTwoWidthGrid12"/>
-        <actionGroup ref="updateGridSize" stepKey="updateGridSizeTo14">
-            <argument name="gridSize" value="14"/>
+        <actionGroup ref="openPageBuilderEditPanel" stepKey="openGridSizeForm">
+            <argument name="contentType" value="PageBuilderColumnsContentType"/>
         </actionGroup>
+        <actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="updateGridSizeTo14">
+            <argument name="property" value="PageBuilderColumnsGridSizeProperty_14"/>
+        </actionGroup>
+        <actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings"/>
         <executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('1')}}').clientWidth" stepKey="columnOneWidthGrid14"/>
         <executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('2')}}').clientWidth" stepKey="columnTwoWidthGrid14"/>
         <!-- Validate first column unchanged -->

diff --git a/...nto/PageBuilder/Test/Mftf/Test/AdminPageBuilderColumnGridTest/SetDefaultGridSize7Test.xml b/...nto/PageBuilder/Test/Mftf/Test/AdminPageBuilderColumnGridTest/SetDefaultGridSize7Test.xml
@@ -34,9 +34,13 @@
         </actionGroup>
         <executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('1')}}').clientWidth" stepKey="columnOneWidthGrid12"/>
         <executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('2')}}').clientWidth" stepKey="columnTwoWidthGrid12"/>
-        <actionGroup ref="updateGridSize" stepKey="updateGridSizeTo7">
-            <argument name="gridSize" value="7"/>
+        <actionGroup ref="openPageBuilderEditPanel" stepKey="openGridSizeForm">
+            <argument name="contentType" value="PageBuilderColumnsContentType"/>
         </actionGroup>
+        <actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="updateGridSizeTo7">
+            <argument name="property" value="PageBuilderColumnsGridSizeProperty_7"/>
+        </actionGroup>
+        <actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings"/>
         <executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('1')}}').clientWidth" stepKey="columnOneWidthGrid7"/>
         <executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('2')}}').clientWidth" stepKey="columnTwoWidthGrid7"/>
         <!-- Validate first column grew larger -->

diff --git a/...lder/Test/Mftf/Test/AdminPageBuilderColumnGridTest/ValidateGridDefaultSizeOnStageTest.xml b/...lder/Test/Mftf/Test/AdminPageBuilderColumnGridTest/ValidateGridDefaultSizeOnStageTest.xml
@@ -35,13 +35,22 @@
             <argument name="contentType" value="PageBuilderColumnContentType"/>
         </actionGroup>
         <comment userInput="Validate default grid size on initial drop" stepKey="commentValidateInitial"/>
-        <actionGroup ref="openGridSizeForm" stepKey="openGridSizeForm"/>
-        <seeInField selector="{{ColumnOnBackend.gridSizeInput('1')}}" userInput="{{PageBuilderGridSize.defaultGridSize}}" stepKey="seeDefaultGridSize"/>
+        <actionGroup ref="openPageBuilderEditPanel" stepKey="openGridSizeForm">
+            <argument name="contentType" value="PageBuilderColumnsContentType"/>
+        </actionGroup>
+        <actionGroup ref="seeInFieldSlideOutProperty" stepKey="seeDefaultGridSize">
+            <argument name="property" value="PageBuilderColumnsGridSizeProperty_Default"/>
+        </actionGroup>
+        <actionGroup ref="closeEditPanelSettings" stepKey="closeEditPanel"/>
         <actionGroup ref="exitPageBuilderFullScreen" stepKey="exitPageBuilderFullScreen"/>
         <actionGroup ref="SaveAndContinueEditCmsPageActionGroup" stepKey="saveAndContinueEditCmsPage"/>
         <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
         <comment userInput="Validate default grid size after save" stepKey="commentValidateAfterSave"/>
-        <actionGroup ref="openGridSizeForm" stepKey="openGridSizeFormAfterSave"/>
-        <seeInField selector="{{ColumnOnBackend.gridSizeInput('1')}}" userInput="{{PageBuilderGridSize.defaultGridSize}}" stepKey="seeDefaultGridSizeAfterSave"/>
+        <actionGroup ref="openPageBuilderEditPanel" stepKey="openGridSizeFormAfterSave">
+            <argument name="contentType" value="PageBuilderColumnsContentType"/>
+        </actionGroup>
+        <actionGroup ref="seeInFieldSlideOutProperty" stepKey="seeDefaultGridSizeAfterSave">
+            <argument name="property" value="PageBuilderColumnsGridSizeProperty_Default"/>
+        </actionGroup>
     </test>
 </tests>
diff --git a/...lder/Test/Mftf/Test/AdminPageBuilderColumnGridTest/ValidateGridInputFocusedOnOpenTest.xml b/...lder/Test/Mftf/Test/AdminPageBuilderColumnGridTest/ValidateGridInputFocusedOnOpenTest.xml
@@ -7,7 +7,7 @@
 -->
 <tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 	xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
-    <test name="ValidateGridInputFocusedOnOpenTest">
+    <test name="ValidateGridInputFocusedOnOpenTest" deprecated="Grid size control has been moved in content type settings form">
         <annotations>
             <features value="PageBuilder"/>
             <stories value="Column"/>
@@ -19,6 +19,9 @@
             <group value="pagebuilder"/>
             <group value="pagebuilder-column"/>
             <group value="pagebuilder-columnGridSize"/>
+            <skip>
+                <issueId value="PB-500"/>
+            </skip>
         </annotations>
         <before>
             <actionGroup ref="AdminLoginActionGroup" stepKey="loginAsAdmin"/>

diff --git a/...r/Test/Mftf/Test/AdminPageBuilderColumnGridTest/ValidateGridSizeFormDisablesStageTest.xml b/...r/Test/Mftf/Test/AdminPageBuilderColumnGridTest/ValidateGridSizeFormDisablesStageTest.xml
@@ -7,7 +7,7 @@
 -->
 <tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 	xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
-    <test name="ValidateGridSizeFormDisablesStageTest">
+    <test name="ValidateGridSizeFormDisablesStageTest" deprecated="Grid size control has been moved in content type settings form">
         <annotations>
             <features value="PageBuilder"/>
             <stories value="Column"/>
@@ -19,6 +19,9 @@
             <group value="pagebuilder"/>
             <group value="pagebuilder-column"/>
             <group value="pagebuilder-columnGridSize"/>
+            <skip>
+                <issueId value="PB-500"/>
+            </skip>
         </annotations>
         <before>
             <actionGroup ref="AdminLoginActionGroup" stepKey="loginAsAdmin"/>

diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_column_group_form.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_column_group_form.xml
@@ -68,6 +68,11 @@
                 </select>
             </formElements>
         </field>
+    </fieldset>
+    <fieldset name="general" sortOrder="20">
+        <settings>
+            <label/>
+        </settings>
         <field name="grid_size" sortOrder="10" formElement="input" class="Magento\PageBuilder\Component\Form\Element\GridSize">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">