Issue #3406534 by Grimreaper: [BS3 port] Tabledrag theming

assets/js/misc/dialog/dialog.js

@@ -140,6 +140,7 @@
           modalHeader += `<h${heading} class="modal-title">${settings.title}</h${heading}>`;
         }
 
+        // @todo use the pattern button_close directly if possible in JS.
         modalHeader += `<button type="button" class="close btn-close" data-bs-dismiss="modal" data-dismiss="modal" aria-label="${Drupal.t(
           'Close',
         )}"><span aria-hidden="true" class="visually-hidden">&times;</span></button>`;

assets/js/misc/message.js

@@ -140,6 +140,7 @@
    *   A constructed HTMLElement.
    */
   Drupal.theme.messageClose = () => {
+    // @todo use the pattern button_close directly if possible in JS.
     const element = document.createElement('button');
     element.setAttribute('class', 'btn-close');
     element.setAttribute('type', 'button');

assets/js/misc/progress.js

@@ -75,6 +75,7 @@
        */
       displayError(string) {
         // @todo use the pattern alert directly if possible in JS.
+        // @todo use the pattern button_close directly if possible in JS.
         const newError = $(
           `<div class="alert-danger alert-dismissible fade show alert">` +
             `<h4 class="alert-heading">${Drupal.t(

assets/js/misc/tabledrag.js

+/**
+ * @file
+ * Extends methods from core/misc/tabledrag.js.
+ */
+
+((Drupal) => {
+  /**
+   * The button for toggling table row weight visibility.
+   *
+   * @return {string}
+   *   HTML markup for the weight toggle button and its container.
+   */
+  Drupal.theme.tableDragToggle = () => {
+    // @todo use the pattern button directly if possible in JS.
+    return (
+      `<div class="tabledrag-toggle-weight-wrapper float-end" data-drupal-selector="tabledrag-toggle-weight-wrapper">` +
+      `<button type="button" class="link tabledrag-toggle-weight btn btn-outline-dark btn-sm ms-2" data-drupal-selector="tabledrag-toggle-weight"></button>` +
+      `</div>`
+    );
+  };
+
+  /**
+   * @return {string}
+   *   Markup for the warning.
+   */
+  Drupal.theme.tableDragChangedWarning = () => {
+    // @todo use the pattern alert directly if possible in JS.
+    return `<div class="tabledrag-changed-warning messages messages--warning alert alert-warning p-1 ps-2 m-0 overflow-hidden" role="alert">${Drupal.theme(
+      'tableDragChangedMarker',
+    )} ${Drupal.t('You have unsaved changes.')}</div>`;
+  };
+})(Drupal);

assets/js/text/text.js

@@ -39,6 +39,7 @@
           $fullLabel.removeClass('visually-hidden');
         }
 
+        // @todo use the pattern button directly if possible in JS.
         // Set up the edit/hide summary link.
         const $link = $(
           `<span class="field-edit-link"><button type="button" class="link link-edit-summary btn btn-outline-dark btn-sm float-end">${Drupal.t(

templates/overrides/input/datetime-wrapper.html.twig

@@ -32,7 +32,7 @@
 {% endif %}
 {{ content }}
 {% if errors %}
-  <div class="form-item--error-message alert alert-danger alert-sm">
+  <div class="form-item--error-message alert alert-danger">
     {{ errors }}
   </div>
 {% endif %}

ui_suite_bootstrap.libraries.yml

@@ -69,6 +69,8 @@ drupal.progress:
     - core/jquery
 
 drupal.tabledrag:
+  js:
+    assets/js/misc/tabledrag.js: {}
   css:
     component:
       assets/css/component/tabledrag.css: {}