MC-3847: Issues With Same Width Buttons In Tabs

- Add visibility check so Buttons don't re-calculate if they're not visible
- Add docblock and @api tag to new event
- Add comment to Tabs widget why we're triggering an event
- Update documentation to include event data structure for both frontend and backend

Author: tjwiebell

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

@@ -271,6 +271,8 @@ All events starting with `contentType:` can also be called for specific content
 
 ### `contentType:redrawAfter`
 
+#### Backend
+
 **Triggers**
 
 * `Tabs.Preview::onTabClick`
@@ -284,6 +286,20 @@ All events starting with `contentType:` can also be called for specific content
 }
 ```
 
+#### Frontend
+
+**Triggers**
+
+* `Tabs.widget.ui.tabs::activate`
+
+**Params**
+
+``` js
+{
+    element: HTMLElement
+}
+```
+
 [Back to top]
 
 ### `column:dragStart`

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

@@ -247,6 +247,9 @@ export default class Preview extends PreviewCollection {
                 if (buttonItems.length > 0) {
                     const currentLargestButtonWidth = this.findLargestButtonWidth(buttonItems);
                     const parentWrapperWidth = $(this.wrapperElement).width();
+                    if (currentLargestButtonWidth === 0) {
+                        return;
+                    }
                     buttonResizeValue = Math.min(currentLargestButtonWidth, parentWrapperWidth);
                 }
             }
@@ -272,6 +275,9 @@ export default class Preview extends PreviewCollection {
      * @returns {number}
      */
     private calculateButtonWidth(buttonItem: JQuery): number {
+        if (buttonItem.is(":visible") === false) {
+            return 0;
+        }
         const widthProperties = ["paddingLeft", "paddingRight", "borderLeftWidth", "borderRightWidth"];
         return widthProperties.reduce((accumulatedWidth, widthProperty): number => {
             return accumulatedWidth + (parseInt(buttonItem.css(widthProperty), 10) || 0);

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

@@ -6,6 +6,11 @@
 import ContentTypeCollectionInterface from "../content-type-collection";
 import ContentTypeInterface from "../content-type";
 
+/**
+ * Content type event fired whenever content changes dimensions or visibility
+ *
+ * @api
+ */
 export default interface ContentTypeRedrawAfterEventParamsInterface {
     id: string,
     contentType: ContentTypeInterface & ContentTypeCollectionInterface

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

@@ -27,6 +27,9 @@ define([
                     $element.find('.tabs-navigation li:not(:first-child)').css('marginLeft', -borderWidth);
                 },
             activate:
+                /**
+                 * Trigger redraw event since new content is being displayed
+                 */
                 function () {
                     events.trigger('contentType:redrawAfter', {
                         element: element