MC-3484: z-index issues with MC-1416

- Cleaned up code from other changes
- Removed all z-index from tabs and reworked styles to be easier to layer

Author: nathanjosiah

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

@@ -21,6 +21,16 @@
     &.pagebuilder-tab-item {
         min-height: inherit;
 
+        &:before {
+            background: @color-white;
+            content: '';
+            height: 1px;
+            left: -1px;
+            position: absolute;
+            top: -2px;
+            width: calc(~'100% + 2px');
+        }
+
         &.empty-container {
             min-height: 220px;
         }

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

@@ -9,6 +9,7 @@
 
 .pagebuilder-content-type.pagebuilder-tabs {
     .tabs-navigation {
+        border-bottom: 1px solid rgba(153, 153, 153, .3);
         display: block;
         font-size: 0;
         margin: 0;
@@ -21,13 +22,11 @@
         li.tab-header {
             background: @color-gray-light0;
             border: 1px solid @color-gray80;
-            border-bottom: 0 !important;
             border-bottom-left-radius: 0 !important;
             border-bottom-right-radius: 0 !important;
             display: inline-block;
             margin: 0;
             position: relative;
-            z-index: 1;
 
             a.tab-title {
                 border-right: 0;
@@ -114,7 +113,15 @@
 
             &.ui-state-active {
                 background: @color-white;
-                z-index: 19;
+
+                &:after {
+                    border-bottom: 1px solid @color-white;
+                    bottom: -1px;
+                    content: '';
+                    left: 0;
+                    position: absolute;
+                    width: 100%;
+                }
 
                 a.tab-title {
                     position: relative;
@@ -143,7 +150,6 @@
     .tabs-content {
         border: 1px solid transparent;
         position: relative;
-        z-index: 9;
 
         > .element-children {
             min-height: inherit;

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

@@ -31,7 +31,6 @@ import PreviewCollection from "../preview-collection";
  * @api
  */
 export default class Preview extends PreviewCollection {
-    public static focusOperationTime: number;
     public focusedTab: KnockoutObservable<number> = ko.observable();
     private disableInteracting: boolean;
     private element: Element;
@@ -50,6 +49,7 @@ export default class Preview extends PreviewCollection {
             }
             $(this.element).tabs({
                 create: (event: Event, ui: JQueryUI.TabsCreateOrLoadUIParams) => {
+                    this.$activeTabPositioner = $(this.element).find('.active-tab-positioner');
                     this.setFocusedTab(activeTabIndex || 0);
                 },
             });
@@ -176,26 +176,6 @@ export default class Preview extends PreviewCollection {
                 }
             });
         }
-
-        /**
-         * Record the time the focus operation was completed to ensure the delay doesn't stop interaction when another
-         * interaction has started after.
-         */
-        const focusTime = new Date().getTime();
-        Preview.focusOperationTime = focusTime;
-
-        /**
-         * Keep a reference of the state of the interaction state on the stage to check if the interaction has
-         * restarted since we started our delay timer. This resolves issues with other aspects of the system starting
-         * an interaction during the delay period.
-         */
-        let interactionState: boolean = false;
-        events.on("stage:interactionStart", () => {
-            interactionState = true;
-        });
-        events.on("stage:interactionStop", () => {
-            interactionState = false;
-        });
     }
 
     /**

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

@@ -50,18 +50,22 @@ export default class Preview extends BasePreview {
      * Fixes z-index issues for tabs and column
      */
     private onFocus() {
-        $(this.element).closest(
-            this.config.additional_data.wysiwygConfig.parentSelectorsToUnderlay.join(",") as string,
-        ).css("z-index", 100);
+        const $element = $(this.element);
+
+        $.each(this.config.additional_data.wysiwygConfig.parentSelectorsToUnderlay, (i, selector) => {
+            $element.closest(selector as string).css("z-index", 100);
+        });
     }
 
     /**
      * Event handler for wysiwyg blur
      * Fixes z-index issues for tabs and column
      */
     private onBlur() {
-        $(this.element).closest(
-            this.config.additional_data.wysiwygConfig.parentSelectorsToUnderlay.join(",") as string,
-        ).css("z-index", "");
+        const $element = $(this.element);
+
+        $.each(this.config.additional_data.wysiwygConfig.parentSelectorsToUnderlay, (i, selector) => {
+            $element.closest(selector as string).css("z-index", "");
+        });
     }
 }

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

@@ -50,9 +50,8 @@
                 <item name="wysiwygConfig" xsi:type="array">
                     <item name="wysiwygConfigData" xsi:type="object">Magento\PageBuilder\Model\Config\ContentType\AdditionalData\Provider\Wysiwyg\Config</item>
                     <item name="parentSelectorsToUnderlay" xsi:type="array">
-                        <item name="0" xsi:type="string">.tabs-content</item>
-                        <item name="1" xsi:type="string">.column-container</item>
-                        <item name="2" xsi:type="string">.row-container</item>
+                        <item name="0" xsi:type="string">.column-container</item>
+                        <item name="1" xsi:type="string">.row-container</item>
                     </item>
                 </item>
             </additional_data>