diff --git a/core/modules/media_library/css/media_library.module.css b/core/modules/media_library/css/media_library.module.css index 1ba3b89c06..d57fc4ea6c 100644 --- a/core/modules/media_library/css/media_library.module.css +++ b/core/modules/media_library/css/media_library.module.css @@ -24,7 +24,7 @@ .media-library-views-form, .media-library-selection, -.media-library-add-form-selection, +.media-library-add-form__selected-media, .media-library-views-form__bulk_form, .media-library-view .form--inline { display: flex; @@ -83,7 +83,7 @@ /* @todo Remove or re-work in https://www.drupal.org/node/2985168 */ .media-library-widget .media-library-item__name a, .media-library-view--widget .media-library-item__name a, -.media-library-add-form-selection .media-library-item__name a { +.media-library-add-form__selected-media .media-library-item__name a { pointer-events: none; } diff --git a/core/modules/media_library/css/media_library.theme.css b/core/modules/media_library/css/media_library.theme.css index fbbb015c75..5b13d5141d 100644 --- a/core/modules/media_library/css/media_library.theme.css +++ b/core/modules/media_library/css/media_library.theme.css @@ -95,7 +95,7 @@ margin: 0 0 1em; } -.media-library-add-form-media { +.media-library-add-form__added-media { outline: none; } @@ -108,7 +108,7 @@ margin: 8px 0 0; } -.media-library-add-form-description { +.media-library-add-form__description { margin: 0; } @@ -138,17 +138,17 @@ } /* Media add form selection styles. */ -.media-library-add-form-selection { +.media-library-add-form__selected-media { margin-top: 1em; padding-top: 1em; border-top: 1px solid #c0c0c0; } -.media-library-add-form-selection .media-library-item { +.media-library-add-form__selected-media .media-library-item { width: 120px; } -.media-library-add-form-selection .media-library-item .field--name-thumbnail img { +.media-library-add-form__selected-media .media-library-item .field--name-thumbnail img { height: 100px; } @@ -472,7 +472,7 @@ /* @todo Remove or re-work in https://www.drupal.org/node/2985168 */ .media-library-widget .media-library-item__name a, .media-library-view--widget .media-library-item__name a, -.media-library-add-form-selection .media-library-item__name a { +.media-library-add-form__selected-media .media-library-item__name a { text-decoration: none; color: black; } diff --git a/core/modules/media_library/src/Form/AddFormBase.php b/core/modules/media_library/src/Form/AddFormBase.php index 1589d1f9ae..4dee6ea415 100644 --- a/core/modules/media_library/src/Form/AddFormBase.php +++ b/core/modules/media_library/src/Form/AddFormBase.php @@ -150,7 +150,7 @@ public function buildForm(array $form, FormStateInterface $form_state) { '#type' => 'container', '#attributes' => [ 'class' => [ - 'media-library-add-form-media', + 'media-library-add-form__added-media', ], 'tabindex' => -1, 'aria-label' => $this->t('Added media items'), @@ -163,7 +163,7 @@ public function buildForm(array $form, FormStateInterface $form_state) { '#value' => $this->formatPlural(count($added_media), 'The media item has been created. Fill in any required fields and save to add it to the media library.', 'The media items have been created. Fill in any required fields and save to add them to the media library.'), '#attributes' => [ 'class' => [ - 'media-library-add-form-description', + 'media-library-add-form__description', ], ], ]; @@ -317,7 +317,7 @@ protected function buildCurrentSelectionArea(array $form, FormStateInterface $fo '#type' => 'container', '#attributes' => [ 'class' => [ - 'media-library-add-form-selection', + 'media-library-add-form__selected-media', ], 'aria-label' => $this->t('Selected media items'), ], @@ -487,7 +487,7 @@ public function updateFormCallback(array &$form, FormStateInterface $form_state) // Update the form and shift focus to the added media items. $response->addCommand(new ReplaceCommand("#$wrapper_id", $form)); - $response->addCommand(new InvokeCommand('#media-library-add-form-wrapper .media-library-add-form-media', 'focus')); + $response->addCommand(new InvokeCommand('#media-library-add-form-wrapper .media-library-add-form__added-media', 'focus')); return $response; } diff --git a/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php b/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php index caa222fbe6..65e8090402 100644 --- a/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php +++ b/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php @@ -670,14 +670,14 @@ public function testWidgetUpload() { $assert_session->elementNotExists('css', '.media-library-add-form--with-input'); $page->attachFileToField('Add files', $this->container->get('file_system')->realpath($png_image->uri)); $assert_session->assertWaitOnAjaxRequest(); - $this->assertJsCondition('jQuery("#media-library-add-form-wrapper .media-library-add-form-media").is(":focus")'); + $this->assertJsCondition('jQuery("#media-library-add-form-wrapper .media-library-add-form__added-media").is(":focus")'); $assert_session->pageTextContains('The media item has been created. Fill in any required fields and save to add it to the media library.'); - $assert_session->elementAttributeContains('css', '.media-library-add-form-media', 'aria-label', 'Added media items'); + $assert_session->elementAttributeContains('css', '.media-library-add-form__added-media', 'aria-label', 'Added media items'); $assert_session->elementExists('css', '.media-library-add-form--with-input'); $assert_session->elementNotExists('css', '.media-library-add-form--without-input'); // We do not have a pre-selected items, so the container should not be added // to the form. - $assert_session->elementNotExists('css', '.media-library-add-form-selection'); + $assert_session->elementNotExists('css', '.media-library-add-form__selected-media'); // Files are temporary until the form is saved. $files = $file_storage->loadMultiple(); $file = array_pop($files); @@ -758,7 +758,7 @@ public function testWidgetUpload() { $png_uri_3 = $file_system->copy($png_image->uri); $page->attachFileToField('Add files', $this->container->get('file_system')->realpath($png_uri_3)); $assert_session->assertWaitOnAjaxRequest(); - $assert_session->elementAttributeContains('css', '.media-library-add-form-selection', 'aria-label', 'Selected media items'); + $assert_session->elementAttributeContains('css', '.media-library-add-form__selected-media', 'aria-label', 'Selected media items'); $assert_session->checkboxChecked("Select $existing_media_name"); $page->fillField('Name', 'Unlimited Cardinality Image'); $page->fillField('Alternative text', $this->randomString()); @@ -852,7 +852,7 @@ public function testWidgetUpload() { $png_uri_5 = $file_system->copy($png_image->uri); $page->attachFileToField('Add files', $this->container->get('file_system')->realpath($png_uri_5)); $assert_session->assertWaitOnAjaxRequest(); - $selection_area = $assert_session->elementExists('css', '.media-library-add-form-selection'); + $selection_area = $assert_session->elementExists('css', '.media-library-add-form__selected-media'); $assert_session->checkboxChecked("Select $existing_media_name", $selection_area); $page->uncheckField("Select $existing_media_name"); $page->fillField('Alternative text', $this->randomString()); @@ -970,7 +970,7 @@ public function testWidgetOEmbed() { $page->pressButton('Add'); $assert_session->assertWaitOnAjaxRequest(); $page->fillField('Name', 'Custom video title'); - $selection_area = $assert_session->elementExists('css', '.media-library-add-form-selection'); + $selection_area = $assert_session->elementExists('css', '.media-library-add-form__selected-media'); $assert_session->checkboxChecked("Select $youtube_title", $selection_area); $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Save and select'); $assert_session->assertWaitOnAjaxRequest(); @@ -1035,7 +1035,7 @@ public function testWidgetOEmbed() { $page->pressButton('Add'); $assert_session->assertWaitOnAjaxRequest(); $page->fillField('Name', 'Another video'); - $selection_area = $assert_session->elementExists('css', '.media-library-add-form-selection'); + $selection_area = $assert_session->elementExists('css', '.media-library-add-form__selected-media'); $assert_session->checkboxChecked("Select $vimeo_title", $selection_area); $page->uncheckField("Select $vimeo_title"); $assert_session->hiddenFieldValueEquals('current_selection', '');