Issue #3049943 by bnjmnm, phenaproxima, Wim Leers, lauriii, alexpott: Media library should not use js- prefixed CSS classes for styling

core/modules/media_library/config/install/views.view.media_library.yml

@@ -121,7 +121,7 @@ display:
             preserve_tags: ''
             html: false
           element_type: ''
-          element_class: js-click-to-select-checkbox
+          element_class: js-click-to-select-checkbox media-library-item__click-to-select-checkbox
           element_label_type: ''
           element_label_class: ''
           element_label_colon: false
@@ -492,7 +492,7 @@ display:
             preserve_tags: ''
             html: false
           element_type: ''
-          element_class: js-click-to-select-checkbox
+          element_class: js-click-to-select-checkbox media-library-item__click-to-select-checkbox
           element_label_type: ''
           element_label_class: ''
           element_label_colon: false
@@ -846,7 +846,7 @@ display:
           element_label_class: ''
           element_label_colon: false
           element_wrapper_type: ''
-          element_wrapper_class: js-click-to-select-checkbox
+          element_wrapper_class: js-click-to-select-checkbox media-library-item__click-to-select-checkbox
           element_default_classes: true
           empty: ''
           hide_empty: false
@@ -1057,7 +1057,7 @@ display:
           relationship: none
           entity_type: media
           plugin_id: media_library_select_form
-          element_wrapper_class: js-click-to-select-checkbox
+          element_wrapper_class: js-click-to-select-checkbox media-library-item__click-to-select-checkbox
           element_class: ''
         thumbnail__target_id:
           id: thumbnail__target_id

core/modules/media_library/css/media_library.module.css

@@ -47,7 +47,7 @@
   position: relative;
 }
 
-.media-library-item .click-to-select-trigger {
+.media-library-item__click-to-select-trigger {
   overflow: hidden;
   height: 100%;
   cursor: pointer;
@@ -57,14 +57,14 @@
   align-self: flex-end;
 }
 
-.media-library-item .js-click-to-select-checkbox {
+.media-library-item__click-to-select-checkbox {
   position: absolute;
   z-index: 1;
   top: 16px;
   left: 16px; /* LTR */
   display: block;
 }
-[dir="rtl"] .media-library-item .js-click-to-select-checkbox {
+[dir="rtl"] .media-library-item__click-to-select-checkbox {
   right: 16px;
   left: auto;
 }

core/modules/media_library/css/media_library.theme.css

@@ -322,6 +322,11 @@
   border: 1px solid #dbdbdb;
 }
 
+/* Media library widget weight field styles. */
+.media-library-item--grid .form-item {
+  margin: 0.75em;
+}
+
 /* The selected items in the add form should be shown a bit smaller. */
 .media-library-add-form__selected-media .media-library-item--small {
   width: 33.3%;
@@ -404,12 +409,12 @@
   border-color: #0076c0;
 }
 
-.media-library-item--grid .js-click-to-select-checkbox input {
+.media-library-item__click-to-select-checkbox input {
   width: 20px;
   height: 20px;
 }
 
-.media-library-item--grid .js-click-to-select-checkbox .form-item {
+.media-library-item__click-to-select-checkbox .form-item {
   margin: 0;
 }
 
@@ -503,11 +508,6 @@
   margin: 1em -8px;
 }
 
-/* Media library widget weight field styles. */
-.media-library-item--grid .form-item {
-  margin: 0.75em;
-}
-
 /**
  * Media library widget edit and delete button styles.
  *

core/modules/media_library/media_library.module

@@ -130,7 +130,7 @@ function media_library_preprocess_views_view_fields(&$variables) {
   // styling and JavaScript mouseover and click events.
   if ($variables['view']->id() === 'media_library' && isset($variables['fields']['rendered_entity'])) {
     if (isset($variables['fields']['rendered_entity']->wrapper_attributes)) {
-      $variables['fields']['rendered_entity']->wrapper_attributes->addClass('js-click-to-select-trigger click-to-select-trigger');
+      $variables['fields']['rendered_entity']->wrapper_attributes->addClass('js-click-to-select-trigger media-library-item__click-to-select-trigger');
     }
   }
 }

core/modules/media_library/media_library.post_update.php

@@ -529,3 +529,57 @@ function media_library_post_update_add_buttons_to_page_view() {
     $view->storage->save(TRUE);
   }
 }
+
+/**
+ * Add non js prefixed classes to checkboxes if not present.
+ *
+ * Note the inclusion of "update_8001" in the function name. This ensures the
+ * function is executed after media_library_post_update_table_display(), as
+ * hook_post_update_NAME() implementations within the same file are executed in
+ * alphanumeric order.
+ */
+function media_library_post_update_update_8001_checkbox_classes() {
+  $view = Views::getView('media_library');
+  if (!$view) {
+    return;
+  }
+  $display_items = [
+    [
+      'display_id' => 'default',
+      'option' => 'element_class',
+      'field' => 'media_bulk_form',
+    ],
+    [
+      'display_id' => 'page',
+      'option' => 'element_class',
+      'field' => 'media_bulk_form',
+    ],
+    [
+      'display_id' => 'widget',
+      'option' => 'element_wrapper_class',
+      'field' => 'media_library_select_form',
+    ],
+    [
+      'display_id' => 'widget_table',
+      'option' => 'element_wrapper_class',
+      'field' => 'media_library_select_form',
+    ],
+  ];
+  foreach ($display_items as $item) {
+    $display_id = $item['display_id'];
+    $option = $item['option'];
+    $field = $item['field'];
+    $display = &$view->storage->getDisplay($display_id);
+
+    // Only proceed if the display, field and option exist.
+    if (!$display || !isset($display['display_options']['fields'][$field][$option])) {
+      continue;
+    }
+    $classes = $display['display_options']['fields'][$field][$option];
+    $classes_array = preg_split('/\s+/', $classes);
+    if (!in_array('media-library-item__click-to-select-checkbox', $classes_array, TRUE)) {
+      $display['display_options']['fields'][$field][$option] = "$classes media-library-item__click-to-select-checkbox";
+      $view->save();
+    }
+  }
+}

core/modules/media_library/src/Form/AddFormBase.php

@@ -429,7 +429,7 @@ abstract class AddFormBase extends FormBase {
         '#type' => 'container',
         '#attributes' => [
           'class' => [
-            'js-click-to-select-checkbox',
+            'js-click-to-select-checkbox media-library-item__click-to-select-checkbox',
           ],
         ],
         'select_checkbox' => [

core/modules/media_library/tests/src/Functional/Update/MediaLibraryUpdateCheckboxClassesTest.php

@@ -0,0 +1,83 @@
+<?php
+
+namespace Drupal\Tests\media_library\Functional\Update;
+
+use Drupal\FunctionalTests\Update\UpdatePathTestBase;
+use Drupal\views\Views;
+
+/**
+ * Tests the media library module updates views checkbox classes.
+ *
+ * @group media_library
+ * @group legacy
+ */
+class MediaLibraryUpdateCheckboxClassesTest extends UpdatePathTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function setDatabaseDumpFiles() {
+    $this->databaseDumpFiles = [
+      __DIR__ . '/../../../../../system/tests/fixtures/update/drupal-8.4.0.bare.standard.php.gz',
+      __DIR__ . '/../../../../../media/tests/fixtures/update/drupal-8.4.0-media_installed.php',
+      __DIR__ . '/../../../fixtures/update/drupal-8.8.x-media_library-update-views-classnames-3049943.php',
+    ];
+  }
+
+  /**
+   * Tests that non js prefixes are added to checkboxes in the media view.
+   *
+   * @see media_library_post_update_update_8001_checkbox_classes()
+   */
+  public function testAddNonPrefixedClasses() {
+    $view = Views::getView('media_library');
+
+    $display_items = [
+      [
+        'display_id' => 'default',
+        'option' => 'element_class',
+        'field' => 'media_bulk_form',
+      ],
+      [
+        'display_id' => 'page',
+        'option' => 'element_class',
+        'field' => 'media_bulk_form',
+      ],
+      [
+        'display_id' => 'widget',
+        'option' => 'element_wrapper_class',
+        'field' => 'media_library_select_form',
+      ],
+      [
+        'display_id' => 'widget_table',
+        'option' => 'element_wrapper_class',
+        'field' => 'media_library_select_form',
+      ],
+    ];
+    foreach ($display_items as $item) {
+      $display_id = $item['display_id'];
+      $option = $item['option'];
+      $field = $item['field'];
+      $display = $view->storage->getDisplay($display_id);
+      $classes_string = $display['display_options']['fields'][$field][$option];
+      $classes = preg_split('/\s+/', $classes_string);
+      $this->assertContains('js-click-to-select-checkbox', $classes);
+      $this->assertNotContains('media-library-item__click-to-select-checkbox', $classes);
+    }
+
+    $this->runUpdates();
+    $view = Views::getView('media_library');
+
+    foreach ($display_items as $item) {
+      $display_id = $item['display_id'];
+      $option = $item['option'];
+      $field = $item['field'];
+      $display = $view->storage->getDisplay($display_id);
+      $classes_string = $display['display_options']['fields'][$field][$option];
+      $classes = preg_split('/\s+/', $classes_string);
+      $this->assertContains('js-click-to-select-checkbox', $classes);
+      $this->assertContains('media-library-item__click-to-select-checkbox', $classes, "Class 'media-library-item__click-to-select-checkbox' not found in display: $display_id");
+    }
+  }
+
+}