Merge branch 'MAGETWO-91970-enable-toolbar-wrap' into cms-team-1-delivery

Author: davemacaulay

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderHeadingSection.xml

@@ -20,6 +20,7 @@
         <element name="headingTypeToolbarSelected" type="text" selector="(//div[contains(@class,'pagebuilder-heading')])[{{arg1}}]//a[contains(@class, 'toolbar-active')]//span[text()='{{arg2}}']" parameterized="true"/>
         <element name="headingTextAlignToolbar" type="button" selector="(//div[contains(@class,'pagebuilder-heading')])[{{arg1}}]//i[contains(@class,'icon-pagebuilder-align-{{arg2}}')]" parameterized="true"/>
         <element name="headingTextAlignToolbarSelected" type="button" selector="(//div[contains(@class,'pagebuilder-heading')])[{{arg1}}]//a[contains(@class, 'toolbar-active')]//i[contains(@class,'icon-pagebuilder-align-{{arg2}}')]" parameterized="true"/>
+        <element name="headingToolbarButtonViewportPositionTop" type="button" selector="return document.querySelector('.pagebuilder-toolbar-options-wrapper ul:{{arg1}}-child li:{{arg1}}-child').getBoundingClientRect().top;" parameterized="true"/>
         <!-- Advanced Configuration -->
         <element name="alignment" type="text" selector="(//div[contains(@class,'pagebuilder-heading')]//{{arg1}})[{{arg2}}][contains(@style,'text-align: {{arg3}};')]" parameterized="true"/>
         <element name="noAlignment" type="text" selector="(//{{arg1}})[{{arg2}}][not(contains(@style,'text-align:'))]" parameterized="true"/>

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

@@ -1501,4 +1501,53 @@
             <argument name="index" value="4"/>
         </actionGroup>
     </test>
+    <test name="HeadingToolbarButtonsCanWrap">
+        <annotations>
+            <features value="Pagebuilder"/>
+            <stories value="Heading"/>
+            <title value="Heading Toolbar Buttons Can Wrap"/>
+            <description value="Inline edit toolbar button items can wrap on multiple lines when in a one-sixth column"/>
+            <severity value="CRITICAL"/>
+            <useCaseId value="MAGETWO-88142"/>
+            <testCaseId value="MAGETWO-92000"/>
+            <group value="pagebuilder"/>
+            <group value="pagebuilder-heading"/>
+        </annotations>
+        <before>
+            <actionGroup ref="LoginAsAdmin" stepKey="loginAsAdmin"/>
+            <actionGroup ref="navigateToAPageWithPageBuilder" stepKey="navigateToAPageWithPageBuilder"/>
+            <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
+        </before>
+        <after>
+            <actionGroup ref="logout" stepKey="logout"/>
+        </after>
+        <actionGroup ref="dragContentTypeToContainer" stepKey="dragFirstTwoColumns">
+            <argument name="contentType" value="PageBuilderColumnContentType"/>
+            <argument name="containerTargetType" value="PageBuilderRowContentType"/>
+            <argument name="containerTargetIndex" value="1"/>
+            <argument name="contentTypeIndex" value="1"/>
+        </actionGroup>
+        <actionGroup ref="dragContentTypeToContainer" stepKey="dragThirdColumn">
+            <argument name="contentType" value="PageBuilderColumnContentType"/>
+            <argument name="containerTargetType" value="PageBuilderColumnContentType"/>
+            <argument name="containerTargetIndex" value="1" />
+            <argument name="contentTypeIndex" value="3"/>
+        </actionGroup>
+        <actionGroup ref="dragContentTypeToContainer" stepKey="dragHeading1ToFirstColumn">
+            <argument name="contentType" value="PageBuilderHeadingContentType"/>
+            <argument name="containerTargetType" value="PageBuilderColumnContentType"/>
+            <argument name="containerTargetIndex" value="1"/>
+            <argument name="contentTypeIndex" value="1"/>
+        </actionGroup>
+        <resizeWindow width="767" height="1000" stepKey="resizeWindowToMobile"/>
+        <!-- Stage: Check toolbar buttons have wrapped -->
+        <comment userInput="Stage: Check toolbar buttons have wrapped" stepKey="commentStageCheckToolbarButtonsAreWrapped"/>
+        <executeJS function="{{HeadingOnStage.headingToolbarButtonViewportPositionTop('first')}}" stepKey="actualFirstButtonYPosition"/>
+        <executeJS function="{{HeadingOnStage.headingToolbarButtonViewportPositionTop('last')}}" stepKey="actualLastButtonYPosition"/>
+        <!-- Assert first button y-coordinate is less than last button y-coordinate -->
+        <assertLessThan message="AssertButtonPositions" stepKey="assertSecondButtonIsBelowFirstButton">
+            <actualResult type="variable">actualFirstButtonYPosition</actualResult>
+            <expectedResult type="variable">actualLastButtonYPosition</expectedResult>
+        </assertLessThan>
+    </test>
 </tests>

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

@@ -404,6 +404,9 @@
             <argument name="containerTargetType" value="PageBuilderRowContentType"/>
             <argument name="containerTargetIndex" value="1" />
         </actionGroup>
+        <actionGroup ref="clickOutsideLiveEditHeading" stepKey="clickOutsideLiveEditHeading">
+            <argument name="index" value="1"/>
+        </actionGroup>
 
         <!-- Configure our heading -->
         <actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage">

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_toolbar.less

@@ -18,8 +18,8 @@
     }
 
     .pagebuilder-toolbar-options {
+        bottom: 100%;
         opacity: 1;
-        top: -39px;
         transition-delay: 200ms;
         visibility: visible;
     }
@@ -35,21 +35,22 @@
     -webkit-transition: opacity 200ms, top 200ms, visibility 200ms;
     background-color: @color-gray94;
     border: 1px solid @color-gray75;
-    height: 38px;
+    bottom: 0;
     left: -2px;
     opacity: 0;
     position: absolute;
-    top: 0;
-    transition: opacity 200ms, top 200ms, visibility 200ms;
+    transition: bottom 200ms, opacity 200ms, visibility 200ms;
     visibility: hidden;
     width: calc(~'100% + 4px');
     z-index: 32;
 
     .pagebuilder-toolbar-options-wrapper {
         display: flex;
+        flex-wrap: wrap;
 
         .pagebuilder-toolbar-options-links {
             display: flex;
+            flex-wrap: wrap;
             list-style: none;
             margin: 0;
             vertical-align: middle;