MC-3847: Issues With Same Width Buttons In Tabs

- Leverage a more generic event to remove coupling between Buttons and Tabs
- Add documentation for this new event
- Use a more consistent transition animation duration used by other components
- Debounce button resize events so it's not called more than it needs to be
- Add redraw event to storefront so Buttons know when you recalculate button size
- Add test to cover the functionality works on the frontend

Author: tjwiebell

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

@@ -2077,5 +2077,22 @@
             <argument name="firstButtonIndex" value="3"/>
             <argument name="secondButtonIndex" value="4"/>
         </actionGroup>
+        <!-- Validate Storefront -->
+        <comment userInput="Validate Storefront: Initial" stepKey="commentValidateStorefront1"/>
+        <amOnPage url="$$createCMSPage.identifier$$" stepKey="goToStorefront1"/>
+        <waitForPageLoad  stepKey="waitForPageLoad1"/>
+        <actionGroup ref="validateButtonItemsSameSize" stepKey="validateButtonsSameSizeStorefront1">
+            <argument name="buttonGroupPage" value="ButtonGroupOnStorefront"/>
+            <argument name="buttonItemPage" value="ButtonItemOnStorefront"/>
+        </actionGroup>
+        <click selector="{{TabOnStorefront.tabHeader('2')}}" stepKey="clickActiveTabStorefront"/>
+        <waitForElementVisible time="30" selector="{{TabOnStorefront.tabHeaderItemActive('2')}}" stepKey="seeNewTabActiveStorefront"/>
+        <actionGroup ref="validateButtonItemsSameSize" stepKey="validateButtonsSameSizeStorefront2">
+            <argument name="buttonGroupPage" value="ButtonGroupOnStorefront"/>
+            <argument name="buttonItemPage" value="ButtonItemOnStorefront"/>
+            <argument name="buttonGroupIndex" value="3"/>
+            <argument name="firstButtonIndex" value="5"/>
+            <argument name="secondButtonIndex" value="6"/>
+        </actionGroup>
     </test>
 </tests>

app/code/Magento/PageBuilder/docs/events.md

@@ -73,6 +73,7 @@ This document contains reference information for events dispatched in Page Build
 * [contentType:duplicateAfter](#contenttypeduplicateafter)
 * [contentType:moveBefore](#contenttypemovebefore)
 * [contentType:moveAfter](#contenttypemoveafter)
+* [contentType:redrawAfter](#contenttyperedrawafter)
 * [column:dragStart](#columdragstart)
 * [column:dragStop](#columndragstop)
 * [column:initializeAfter](#columninitializeafter)
@@ -268,6 +269,23 @@ All events starting with `contentType:` can also be called for specific content
 
 [Back to top]
 
+### `contentType:redrawAfter`
+
+**Triggers**
+
+* `Tabs.Preview::onTabClick`
+
+**Params**
+
+``` js
+{
+    id: string,
+    contentType: ContentTypeInterface & ContentTypeCollectionInterface
+}
+```
+
+[Back to top]
+
 ### `column:dragStart`
 
 **Triggers**

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

@@ -30,7 +30,7 @@
             max-width: 100%;
             min-width: 0;
             position: relative;
-            transition: min-width .3s ease;
+            transition: min-width 200ms ease;
             word-wrap: break-word;
             [data-element='link_text'] {
                 max-width: 100%;

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/buttons/preview.js

@@ -17,14 +17,15 @@ import {OptionsInterface} from "../../content-type-menu/option.d";
 import StageUpdateAfterParamsInterface from "../../stage-update-after-params.d";
 import ContentTypeAfterRenderEventParamsInterface from "../content-type-after-render-event-params.d";
 import ContentTypeDroppedCreateEventParamsInterface from "../content-type-dropped-create-event-params";
+import ContentTypeRedrawAfterEventParamsInterface from "../content-type-redraw-after-event-params";
 import PreviewCollection from "../preview-collection";
-import BeforeSetFocusedEventInterface from "../tabs/before-set-focused-event";
 
 /**
  * @api
  */
 export default class Preview extends PreviewCollection {
     public isLiveEditing: KnockoutObservable<boolean> = ko.observable(false);
+
     /**
      * Keeps track of number of button item to disable sortable if there is only 1.
      */
@@ -37,6 +38,10 @@ export default class Preview extends PreviewCollection {
         }
     });
 
+    private debouncedResizeHandler = _.debounce(() => {
+        this.resizeChildButtons();
+    }, 350);
+
     public bindEvents() {
         super.bindEvents();
 
@@ -48,24 +53,22 @@ export default class Preview extends PreviewCollection {
 
         events.on("buttons:renderAfter", (eventData: ContentTypeAfterRenderEventParamsInterface) => {
             if (eventData.contentType.id === this.parent.id) {
-                this.resizeChildButtons();
+                this.debouncedResizeHandler();
             }
         });
 
         events.on("button-item:renderAfter", (eventData: ContentTypeAfterRenderEventParamsInterface) => {
             if (eventData.contentType.parent.id === this.parent.id) {
-                this.resizeChildButtons();
+                this.debouncedResizeHandler();
             }
         });
 
         events.on("stage:updateAfter", (eventData: StageUpdateAfterParamsInterface) => {
-            _.debounce(() => {
-                this.resizeChildButtons();
-            }, 500).call(this);
+            this.debouncedResizeHandler();
         });
 
-        events.on("tabs:beforeSetFocused", (eventData: BeforeSetFocusedEventInterface) => {
-            this.resizeChildButtons();
+        events.on("contentType:redrawAfter", (eventData: ContentTypeRedrawAfterEventParamsInterface) => {
+            this.debouncedResizeHandler();
         });
     }
 
@@ -239,7 +242,7 @@ export default class Preview extends PreviewCollection {
     private resizeChildButtons() {
         if (this.wrapperElement) {
             const buttonItems: JQuery = $(this.wrapperElement).find(".pagebuilder-button-item > a");
-            let buttonResizeValue: string|number = "0";
+            let buttonResizeValue: number = 0;
             if (this.parent.dataStore.get("is_same_width") === "true") {
                 if (buttonItems.length > 0) {
                     const currentLargestButtonWidth = this.findLargestButtonWidth(buttonItems);

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/tabs/preview.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+import ContentTypeCollectionInterface from "../content-type-collection";
+import ContentTypeInterface from "../content-type";
+
+export default interface ContentTypeRedrawAfterEventParamsInterface {
+    id: string,
+    contentType: ContentTypeInterface & ContentTypeCollectionInterface
+}

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/buttons/preview.ts

@@ -260,11 +260,13 @@ export default class Preview extends PreviewCollection {
         if ($(event.target).parents(".pagebuilder-options").length > 0) {
             return;
         }
-        events.trigger("tabs:beforeSetFocused", {
-            index,
+
+        this.setFocusedTab(index);
+
+        events.trigger("contentType:redrawAfter", {
+            id: this.parent.id,
             contentType: this,
         });
-        this.setFocusedTab(index);
     }
 
     /**

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/content-type-redraw-after-event-params.d.ts

@@ -4,8 +4,9 @@
  */
 define([
     'jquery',
+    'Magento_PageBuilder/js/events',
     'jquery/ui'
-], function ($) {
+], function ($, events) {
     'use strict';
 
     return function (config, element) {
@@ -24,6 +25,12 @@ define([
 
                     $element.find('.tabs-navigation').css('marginBottom', -borderWidth);
                     $element.find('.tabs-navigation li:not(:first-child)').css('marginLeft', -borderWidth);
+                },
+            activate:
+                function () {
+                    events.trigger('contentType:redrawAfter', {
+                        element: element
+                    });
                 }
         }, element);
     };