Added test coverage for deleting components. Simplified z-indexes that were...

css/builder.css

-.lpb-dialog {
-  z-index: 700;
-}
 .lp-builder {
   min-height: 30px;
   position: relative;
@@ -74,13 +71,12 @@
 }
 .lpb-controls__wrapper {
   position: absolute;
-  z-index: 95;
 }
 .lpb-controls {
   cursor: default;
   padding: 5px;
   display: flex;
-  z-index: 10;
+  z-index: 80;
   position: absolute;
   left: 0;
   top: 0;
@@ -91,7 +87,7 @@
 }
 .lpb-controls:hover,
 .lpb-controls:focus-within {
-  z-index: 1010;
+  z-index: 90;
 }
 .lpb-controls.is-layout {
   background-color: #00659B;
@@ -226,7 +222,7 @@
   background: #fff;
   border-radius: 10px;
   box-shadow: 0 2px 15px rgba(0, 0, 0, .15);
-  z-index: 1000;
+  z-index: 80;
   left: 50%;
   transform: translateX(-50%);
   padding: 6px 10px;
@@ -253,7 +249,7 @@
   width: 24px;
   height: 24px;
   left: 50%;
-  z-index: 1000;
+  z-index: 80;
   position: absolute;
   border: 3px solid white;
   cursor: pointer;
@@ -275,7 +271,7 @@
 .lpb-btn:hover,
 .lpb-btn--add:focus-within,
 .lpb-btn:focus-within {
-  z-index: 1010;
+  z-index: 90;
 }
 .js-lpb-component .lpb-btn--add,
 .js-lpb-region .lpb-btn--add {
@@ -391,7 +387,7 @@ a.lpb-enable-button::before {
   text-align: center;
   padding: 10px;
   position: absolute;
-  z-index: 1000;
+  z-index: 90;
   bottom: 100%;
   left: -7px;
   margin-bottom: -2px;

layout_paragraphs.module

@@ -242,6 +242,7 @@ function layout_paragraphs_preprocess_layout_paragraphs_builder_controls(&$varia
         'data-dialog-options' => Json::encode([
           'modal' => TRUE,
           'target' => Dialog::dialogId($layout),
+          'dialogClass' => 'lpb-dialog',
         ]),
       ],
       '#access' => $variables['delete_access'],

src/Form/DeleteComponentForm.php

@@ -77,6 +77,10 @@ class DeleteComponentForm extends FormBase {
         '#ajax' => [
           'callback' => '::deleteComponent',
         ],
+        '#attributes' => [
+          'class' => ['lpb-btn--confirm-delete'],
+          'data-disable-refocus' => 'true',
+        ],
       ],
       'cancel' => [
         '#type' => 'button',
@@ -84,6 +88,12 @@ class DeleteComponentForm extends FormBase {
         '#ajax' => [
           'callback' => '::closeForm',
         ],
+        '#attributes' => [
+          'class' => [
+            'dialog-cancel',
+            'lpb-btn--cancel',
+          ],
+        ],
       ],
     ];
     return $form;

tests/src/FunctionalJavascript/BuilderTest.php

@@ -61,6 +61,37 @@ class BuilderTest extends BuilderTestBase {
     $this->assertSession()->pageTextContains('Edit section');
   }
 
+  /**
+   * Tests deleting a component.
+   */
+  public function testDeleteComponent() {
+    $this->testAddComponent();
+    $this->drupalGet('node/1/edit');
+    $page = $this->getSession()->getPage();
+    // Press delete on the component in the first region.
+    $button = $page->find('css', '.layout__region--first a.lpb-delete');
+    $button->click();
+    $this->assertSession()->assertWaitOnAjaxRequest();
+    $this->assertSession()->pageTextContains('Delete text');
+    // Confirm delete.
+    $button = $page->find('css', 'button.lpb-btn--confirm-delete');
+    $button->click();
+    $this->assertSession()->assertWaitOnAjaxRequest();
+    // Component should no longer be on page.
+    $this->assertSession()->pageTextNotContains('Some arbitrary text');
+    // Add a new component and press delete.
+    $this->addTextComponent('New text component.', '.layout__region--first .lpb-btn--add');
+    $button = $page->find('css', '.layout__region--first a.lpb-delete');
+    $button->click();
+    $this->assertSession()->assertWaitOnAjaxRequest();
+    // Cancel the operation.
+    $button = $page->find('css', 'button.dialog-cancel');
+    $button->click();
+    $this->assertSession()->assertWaitOnAjaxRequest();
+    $this->assertSession()->pageTextContains('New text component.');
+    $this->assertSession()->pageTextNotContains('Delete text');
+  }
+
   /**
    * Tests reordering components with the "move up" button.
    */