Issue #3151534 by Darren Oh, mathilde_dumond, komalk, lauriii,...

Issue #3151534 by Darren Oh, mathilde_dumond, komalk, lauriii, ranjith_kumar_k_u, DanielVeza, idebr, dorianwinterfeld, elgandoz, amykhailova, scotwith1t, FiNeX, jimmynash, janmejaig: "Add another item" field button is displayed as a modal action

core/tests/Drupal/FunctionalJavascriptTests/Theme/ClaroModalDisplayTest.php

+<?php
+
+namespace Drupal\FunctionalJavascriptTests\Theme;
+
+use Drupal\Core\Field\FieldStorageDefinitionInterface;
+use Drupal\field\Entity\FieldConfig;
+use Drupal\field\Entity\FieldStorageConfig;
+use Drupal\Tests\media_library\FunctionalJavascript\MediaLibraryTestBase;
+use Drupal\Tests\TestFileCreationTrait;
+
+/**
+ * Tests that buttons in modals are not in their button pane.
+ *
+ * @group claro
+ */
+class ClaroModalDisplayTest extends MediaLibraryTestBase {
+
+  use TestFileCreationTrait;
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'claro';
+
+  /**
+   * Tests the position f "add another" button in dialogs.
+   */
+  public function testModalAddAnother() {
+
+    // Add unlimited field to the media type four.
+    $unlimited_field_storage = FieldStorageConfig::create([
+      'entity_type' => 'media',
+      'field_name' => 'unlimited',
+      'type' => 'string',
+      'cardinality' => FieldStorageDefinitionInterface::CARDINALITY_UNLIMITED,
+    ]);
+    $unlimited_field_storage->save();
+    $unlimited_field = FieldConfig::create([
+      'field_storage' => $unlimited_field_storage,
+      'bundle' => 'type_four',
+      'label' => 'Unlimited',
+    ]);
+    $unlimited_field->save();
+
+    /** @var \Drupal\Core\Entity\EntityDisplayRepositoryInterface $display_repository */
+    $display_repository = \Drupal::service('entity_display.repository');
+
+    $display_repository->getFormDisplay('media', 'type_four', 'media_library')
+      ->setComponent('unlimited', [
+        'type' => 'string_textfield',
+      ])
+      ->save();
+
+    $assert_session = $this->assertSession();
+
+    foreach ($this->getTestFiles('image') as $image) {
+      $extension = pathinfo($image->filename, PATHINFO_EXTENSION);
+      if ($extension === 'jpg') {
+        $jpg_image = $image;
+      }
+    }
+    if (!isset($jpg_image)) {
+      $this->fail('Expected test files not present.');
+    }
+
+    // Create a user that can create media for all media types.
+    $user = $this->drupalCreateUser([
+      'access administration pages',
+      'access content',
+      'create basic_page content',
+      'create media',
+      'view media',
+    ]);
+    $this->drupalLogin($user);
+
+    // Visit a node create page.
+    $this->drupalGet('node/add/basic_page');
+
+    // Add to the twin media field.
+    $this->openMediaLibraryForField('field_twin_media');
+    $this->switchToMediaType('Four');
+
+    // A file needs to be added for the unlimited field to appear in the form.
+    $this->addMediaFileToField('Add files', $this->container->get('file_system')->realpath($jpg_image->uri));
+
+    // Wait for the file upload to be completed.
+    // Copied from \Drupal\Tests\media_library\FunctionalJavascript\MediaLibraryTestBase::assertMediaAdded.
+    $selector = '.js-media-library-add-form-added-media';
+    $this->assertJsCondition('jQuery("' . $selector . '").is(":focus")');
+
+    // Assert that the 'add another item' button is not in the dialog footer.
+    $assert_session->elementNotExists('css', '.ui-dialog-buttonset .field-add-more-submit');
+    $assert_session->elementExists('css', '.ui-dialog-content .field-add-more-submit');
+  }
+
+}

core/themes/claro/css/components/action-link.css

@@ -105,7 +105,8 @@
   * Add the same margin for action-link inside form-actions as button has.
   */
 
-.form-actions .action-link {
+.form-actions .action-link,
+.field-actions .action-link {
   margin-inline: 0 var(--space-s);
 }
 

core/themes/claro/css/components/action-link.pcss.css

@@ -91,7 +91,8 @@
   *
   * Add the same margin for action-link inside form-actions as button has.
   */
-  @nest .form-actions & {
+  .form-actions &,
+  .field-actions & {
     margin-inline: 0 var(--space-s);
   }
 }

core/themes/claro/css/components/dialog.css

@@ -143,7 +143,8 @@
 
 /* Form action buttons are moved in dialogs. Remove empty space. */
 
-.ui-dialog .ui-dialog-content .form-actions {
+.ui-dialog .ui-dialog-content .form-actions,
+.ui-dialog .ui-dialog-content .field-actions {
   margin: 0;
   padding: 0;
 }

core/themes/claro/css/components/dialog.pcss.css

@@ -129,7 +129,8 @@
 }
 
 /* Form action buttons are moved in dialogs. Remove empty space. */
-.ui-dialog .ui-dialog-content .form-actions {
+.ui-dialog .ui-dialog-content .form-actions,
+.ui-dialog .ui-dialog-content .field-actions {
   margin: 0;
   padding: 0;
 }

core/themes/claro/css/components/dropbutton.css

@@ -44,11 +44,13 @@
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
 }
 
-.form-actions .dropbutton-wrapper {
+.form-actions .dropbutton-wrapper,
+.field-actions .dropbutton-wrapper {
   margin: var(--space-xs) var(--space-m) var(--space-xs) 0;
 }
 
-[dir="rtl"] .form-actions .dropbutton-wrapper {
+[dir="rtl"] .form-actions .dropbutton-wrapper,
+[dir="rtl"] .field-actions .dropbutton-wrapper {
   margin-right: 0;
   margin-left: var(--space-m);
 }

core/themes/claro/css/components/dropbutton.pcss.css

@@ -37,10 +37,12 @@
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
 }
 
-.form-actions .dropbutton-wrapper {
+.form-actions .dropbutton-wrapper,
+.field-actions .dropbutton-wrapper {
   margin: var(--space-xs) var(--space-m) var(--space-xs) 0;
 }
-[dir="rtl"] .form-actions .dropbutton-wrapper {
+[dir="rtl"] .form-actions .dropbutton-wrapper,
+[dir="rtl"] .field-actions .dropbutton-wrapper {
   margin-right: 0;
   margin-left: var(--space-m);
 }

core/themes/claro/css/components/form.css

@@ -133,7 +133,8 @@ tr .form-item,
  * Form actions.
  */
 
-.form-actions {
+.form-actions,
+.field-actions {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
@@ -141,11 +142,14 @@ tr .form-item,
 }
 
 .form-actions .button,
-.form-actions .action-link {
+.field-actions .button,
+.form-actions .action-link,
+.field-actions .action-link {
   margin-block: var(--space-m);
 }
 
-.form-actions .ajax-progress--throbber {
+.form-actions .ajax-progress--throbber,
+.field-actions .ajax-progress--throbber {
   align-self: center;
 }
 

core/themes/claro/css/components/form.pcss.css

@@ -116,7 +116,8 @@ tr .form-item,
 /**
  * Form actions.
  */
-.form-actions {
+.form-actions,
+.field-actions {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;

core/themes/claro/css/theme/media-library.css

@@ -313,7 +313,8 @@
   flex-wrap: wrap;
 }
 
-.media-library-views-form > .form-actions {
+.media-library-views-form > .form-actions,
+.media-library-views-form > .field-actions {
   flex-basis: 100%;
 }
 
@@ -500,7 +501,8 @@
   align-items: center;
 }
 
-.media-library-widget-modal .ui-dialog-buttonpane .form-actions {
+.media-library-widget-modal .ui-dialog-buttonpane .form-actions,
+.media-library-widget-modal .ui-dialog-buttonpane .field-actions {
   flex: 1;
 }
 

core/themes/claro/css/theme/media-library.pcss.css

@@ -282,7 +282,8 @@
   flex-wrap: wrap;
 }
 
-.media-library-views-form > .form-actions {
+.media-library-views-form > .form-actions,
+.media-library-views-form > .field-actions {
   flex-basis: 100%;
 }
 
@@ -456,7 +457,8 @@
   align-items: center;
 }
 
-.media-library-widget-modal .ui-dialog-buttonpane .form-actions {
+.media-library-widget-modal .ui-dialog-buttonpane .form-actions,
+.media-library-widget-modal .ui-dialog-buttonpane .field-actions {
   flex: 1;
 }
 

core/themes/claro/css/theme/views_ui.admin.theme.css

@@ -330,7 +330,8 @@ td.group-title {
   background-color: var(--color-gray-050);
 }
 
-.form-edit .form-actions {
+.form-edit .form-actions,
+.form-edit .field-actions {
   margin-top: 0;
   padding: var(--space-s) var(--space-m);
   border-right: 1px solid var(--color-gray-200-o-80);
@@ -369,7 +370,8 @@ td.group-title {
 }
 
 .view-preview-form .form-item--view-args,
-.view-preview-form .form-actions {
+.view-preview-form .form-actions,
+.view-preview-form .field-actions {
   margin-top: 0.3125rem;
 }
 
@@ -396,7 +398,8 @@ td.group-title {
 }
 
 .form-item--live-preview,
-.view-preview-form .form-actions {
+.view-preview-form .form-actions,
+.view-preview-form .field-actions {
   vertical-align: top;
 }
 

core/themes/claro/css/theme/views_ui.admin.theme.pcss.css

@@ -263,7 +263,8 @@ td.group-title {
   border-bottom: 1px solid var(--color-gray-200-o-80);
   background-color: var(--color-gray-050);
 }
-.form-edit .form-actions {
+.form-edit .form-actions,
+.form-edit .field-actions {
   margin-top: 0;
   padding: var(--space-s) var(--space-m);
   border-right: 1px solid var(--color-gray-200-o-80);
@@ -296,7 +297,8 @@ td.group-title {
   margin-top: 0;
 }
 .view-preview-form .form-item--view-args,
-.view-preview-form .form-actions {
+.view-preview-form .form-actions,
+.view-preview-form .field-actions {
   margin-top: 5px;
 }
 .view-preview-form .views-bulk-actions__item {
@@ -317,7 +319,8 @@ td.group-title {
   display: inline-block;
 }
 .form-item--live-preview,
-.view-preview-form .form-actions {
+.view-preview-form .form-actions,
+.view-preview-form .field-actions {
   vertical-align: top;
 }
 

core/themes/claro/templates/form/field-multiple-value-form.html.twig

@@ -42,7 +42,7 @@
       <div{{ description.attributes.addClass(description_classes) }} >{{ description.content }}</div>
     {% endif %}
     {% if button %}
-      <div class="form-actions">{{ button }}</div>
+      <div class="field-actions">{{ button }}</div>
     {% endif %}
   </div>
 {% else %}