MC-3847: Issues With Same Width Buttons In Tabs

- Re-add min-width transition animation
- Re-factor algorithm for finding largest button to max out at parent container width to control overflow
- Add event to Tabs component so buttons will know when to re-calculate their size on tab focus

Author: tjwiebell

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

@@ -28,7 +28,9 @@
         }
         a[data-element='link'] {
             max-width: 100%;
+            min-width: 0;
             position: relative;
+            transition: min-width .3s 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

@@ -18,13 +18,13 @@ 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 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);
-    public currentMaxWidth: KnockoutObservable<number> = ko.observable(0);
     /**
      * Keeps track of number of button item to disable sortable if there is only 1.
      */
@@ -63,6 +63,10 @@ export default class Preview extends PreviewCollection {
                 this.resizeChildButtons();
             }, 500).call(this);
         });
+
+        events.on("tabs:beforeSetFocused", (eventData: BeforeSetFocusedEventInterface) => {
+            this.resizeChildButtons();
+        });
     }
 
     /**
@@ -235,40 +239,27 @@ 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 = "";
+            let buttonResizeValue: string|number = "0";
             if (this.parent.dataStore.get("is_same_width") === "true") {
                 if (buttonItems.length > 0) {
-                    buttonItems.css("min-width", "");
-                    const currentLargestButton = this.findLargestButton(buttonItems);
-                    const currentLargestButtonWidth = currentLargestButton.outerWidth();
-                    if (currentLargestButtonWidth !== 0) {
-                        buttonResizeValue = currentLargestButtonWidth;
-                        this.currentMaxWidth(currentLargestButtonWidth);
-                    } else {
-                        buttonResizeValue = this.currentMaxWidth();
-                    }
+                    const currentLargestButtonWidth = this.findLargestButtonWidth(buttonItems);
+                    const parentWrapperWidth = $(this.wrapperElement).width();
+                    buttonResizeValue = Math.min(currentLargestButtonWidth, parentWrapperWidth);
                 }
             }
+
             buttonItems.css("min-width", buttonResizeValue);
         }
     }
 
     /**
-     * Find the largest button which will determine the button width we use for re-sizing.
+     * Find the largest button width for calculating same size value.
      *
      * @param {JQuery} buttonItems
-     * @returns {JQuery}
+     * @returns {number}
      */
-    private findLargestButton(buttonItems: JQuery): JQuery {
-        let largestButton: JQuery|null = null;
-        buttonItems.each((index, element) => {
-            const buttonElement = $(element);
-            if (largestButton === null
-                || this.calculateButtonWidth(buttonElement) > this.calculateButtonWidth(largestButton)) {
-                largestButton = buttonElement;
-            }
-        });
-        return largestButton;
+    private findLargestButtonWidth(buttonItems: JQuery): number {
+        return _.max(_.map(buttonItems, (buttonItem) => this.calculateButtonWidth($(buttonItem))));
     }
 
     /**
@@ -279,9 +270,8 @@ export default class Preview extends PreviewCollection {
      */
     private calculateButtonWidth(buttonItem: JQuery): number {
         const widthProperties = ["paddingLeft", "paddingRight", "borderLeftWidth", "borderRightWidth"];
-        const calculatedButtonWidth: number = widthProperties.reduce((accumulatedWidth, widthProperty): number => {
+        return widthProperties.reduce((accumulatedWidth, widthProperty): number => {
             return accumulatedWidth + (parseInt(buttonItem.css(widthProperty), 10) || 0);
         }, buttonItem.find("[data-element='link_text']").width());
-        return calculatedButtonWidth;
     }
 }

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.d";
+import ContentTypeInterface from "../../content-type.d";
+
+export default interface BeforeSetFocusedEventInterface {
+    index: number,
+    contentType: ContentTypeInterface & ContentTypeCollectionInterface
+}

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

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