Issue #1812048 by mikeker, Pancho, dawehner, tim.plunkett: Build the exposed...

Issue #1812048 by mikeker, Pancho, dawehner, tim.plunkett: Build the exposed form using form API functions.

core/modules/views/css/views.exposed_form.css

+/**
+ * @file
+ * Styling for Views exposed forms.
+ */
+.views-exposed-form .form-item {
+  /* Display exposed form elements horizontally. */
+  float: left; /* LTR */
+  margin-right: .25em; /* LTR */
+}
+[dir="rtl"] .views-exposed-form .form-item {
+  float: right;
+  margin-left: .25em;
+}
+
+.views-exposed-form .form-actions {
+  clear: left; /* LTR */
+}
+[dir="rtl"] .views-exposed-form .form-actions {
+  clear: right;
+}

core/modules/views/css/views.module.css

-.views-exposed-form .views-exposed-widget {
-  display: inline-block;
-}
-
-.views-exposed-form .form-item,
-.views-exposed-form .form-submit {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
 /* table style column align */
 .views-align-left {
   text-align: left;

core/modules/views/templates/views-exposed-form.html.twig

@@ -4,21 +4,7 @@
  * Default theme implementation of a views exposed form.
  *
  * Available variables:
- * - widgets: A list of exposed form widgets. Each widget contains:
- *   - label: The sanitized label of the widget.
- *   - id: The ID of the widget, if available.
- *   - operator: The select element for the operator widget.
- *   - description: The sanitized description of the widget.
- *   - widget: The widget itself.
- *   - index: the widget's row index.
  * - form: A render element representing the form.
- *   - sort_by: An optional select element to sort the view by fields.
- *   - sort_order: An optional select element with ascending or
- *     descending order options.
- *   - items_per_page: An optional select element for the available items per
- *     page.
- *   - offset: An optional textfield to define the offset of the view.
- *   - reset_button: An optional button to reset the exposed filter applied.
  *
  * @see template_preprocess_views_exposed_form()
  *
@@ -32,55 +18,6 @@
   #}
 {{ q }}
 {% endif %}
-<div class="views-exposed-form">
-  <div class="views-exposed-widgets clearfix">
-    {% for index, widget in widgets %}
-      <div id="{{ widget.id }}-wrapper" class="views-exposed-widget views-widget-{{ index }}">
-          {% if widget.label %}
-          <label for="{{ widget.id }}">
-            {{ widget.label }}
-          </label>
-        {% endif %}
-        {% if widget.operator %}
-          <div class="views-operator">
-            {{ widget.operator }}
-          </div>
-        {% endif %}
-        <div class="views-widget">
-          {{ widget.widget }}
-        </div>
-        {% if widget.description %}
-          <div class="description">
-            {{ widget.description }}
-          </div>
-        {% endif %}
-      </div>
-    {% endfor %}
-    {% if form.sort_by %}
-      <div class="views-exposed-widget views-widget-sort-by">
-        {{ form.sort_by }}
-      </div>
-      <div class="views-exposed-widget views-widget-sort-order">
-        {{ form.sort_order }}
-      </div>
-    {% endif %}
-    {% if form.items_per_page %}
-      <div class="views-exposed-widget views-widget-per-page">
-        {{ form.items_per_page }}
-      </div>
-    {% endif %}
-    {% if form.offset %}
-      <div class="views-exposed-widget views-widget-offset">
-        {{ form.offset }}
-      </div>
-    {% endif %}
-    <div class="views-exposed-widget views-submit-button">
-      {{ form }}
-    </div>
-    {% if form.reset_button %}
-      <div class="views-exposed-widget views-reset-button">
-        {{ form.reset_button }}
-      </div>
-    {% endif %}
-  </div>
+<div class="views-exposed-form clearfix">
+  {{ form }}
 </div>

core/modules/views/views.module

@@ -830,6 +830,13 @@ function views_library_info() {
       array('system', 'drupal'),
     ),
   );
+  $libraries['views.exposed-form'] = array(
+    'title' => 'Views exposed form',
+    'version' => VERSION,
+    'css' => array(
+      "$path/css/views.exposed_form.css",
+    ),
+  );
 
   return $libraries;
 }
@@ -1351,7 +1358,8 @@ function views_exposed_form($form, &$form_state) {
     }
   }
 
-  $form['submit'] = array(
+  $form['actions'] = array('#type' => 'actions');
+  $form['actions']['submit'] = array(
     // Prevent from showing up in $_GET.
     '#name' => '',
     '#type' => 'submit',

core/modules/views/views.theme.inc

@@ -1038,52 +1038,17 @@ function template_preprocess_views_view_row_rss(&$variables) {
 function template_preprocess_views_exposed_form(&$variables) {
   $form = &$variables['form'];
 
-  // Put all single checkboxes together in the last spot.
-  $checkboxes = array();
-
   if (!empty($form['q'])) {
     $variables['q'] = $form['q'];
   }
 
-  $variables['widgets'] = array();
-  foreach ($form['#info'] as $id => $info) {
-    // Set aside checkboxes.
-    if (isset($form[$info['value']]['#type']) && $form[$info['value']]['#type'] == 'checkbox') {
-      $checkboxes[] = $form[$info['value']];
-      continue;
-    }
-    $widget = new stdClass();
-    // set up defaults so that there's always something there.
-    $widget->label = $widget->operator = $widget->widget = $widget->description = '';
-
-    $widget->id = isset($form[$info['value']]['#id']) ? $form[$info['value']]['#id'] : '';
+  // Include basic theming for exposed forms.
+  $form['#attached']['library'][] = array('views', 'views.exposed-form');
 
+  foreach ($form['#info'] as $id => $info) {
     if (!empty($info['label'])) {
-      $widget->label = check_plain($info['label']);
-    }
-    if (!empty($info['operator']) && isset($form[$info['operator']])) {
-      $widget->operator = $form[$info['operator']];
+      $form[$info['value']]['#title'] = $info['label'];
     }
-
-    $widget->widget = $form[$info['value']];
-
-    if (!empty($info['description'])) {
-      $widget->description = check_plain($info['description']);
-    }
-
-    $variables['widgets'][$id] = $widget;
-    // Unset the widget, so that it doesn't get rendered twice.
-    unset($form[$info['value']]);
-  }
-
-  // Wrap up all the checkboxes we set aside into a widget.
-  if (!empty($checkboxes)) {
-    $widget = new stdClass();
-    // set up defaults so that there's always something there.
-    $widget->label = $widget->operator = $widget->widget = NULL;
-    $widget->id = 'checkboxes';
-    $widget->widget = $checkboxes;
-    $variables['widgets']['checkboxes'] = $widget;
   }
 }