Revert "Issue #1842140 by mdrummond, tonystar, gavin.hughes, killerpoke, lauriii, droweski, stevector, omg-its-maggie, jenlampton, Renee S: Remove title and wrapper div from theme_item_list."

This reverts commit 7939567609.

core/modules/comment/config/install/views.view.comments_recent.yml

@@ -45,6 +45,7 @@ display:
           row_class: ''
           default_row_class: true
           type: ul
+          wrapper_class: item-list
           class: ''
         provider: views
       row:

core/modules/simpletest/css/simpletest.module.css

@@ -35,7 +35,7 @@ table#simpletest-form-table tr.simpletest-group label {
   display: inline;
 }
 
-div.message > ul {
+div.message > div.item-list {
   font-weight: normal;
 }
 

core/modules/system/css/system.theme.css

@@ -20,6 +20,24 @@ td.active {
   background-color: #ddd;
 }
 
+/**
+ * Markup generated by theme_item_list().
+ */
+.item-list .title {
+  font-weight: bold;
+}
+.item-list ul {
+  margin: 0 0 0.75em 0;
+  padding: 0;
+}
+.item-list ul li {
+  margin: 0 0 0.25em 1.5em; /* LTR */
+  padding: 0;
+}
+[dir="rtl"] .item-list ul li {
+  margin: 0 1.5em 0.25em 0;
+}
+
 /**
  * Markup generated by Form API.
  */

core/modules/system/src/Tests/Theme/FunctionsTest.php

@@ -44,21 +44,21 @@ class FunctionsTest extends WebTestBase {
     // Verify that empty items produce the empty string.
     $variables = array();
     $variables['empty'] = 'No items found.';
-    $expected = 'No items found.';
+    $expected = '<div class="item-list">No items found.</div>';
     $this->assertThemeOutput('item_list', $variables, $expected, 'Empty %callback generates empty string.');
 
     // Verify that empty items produce the empty string with title.
     $variables = array();
     $variables['title'] = 'Some title';
     $variables['empty'] = 'No items found.';
-    $expected = '<h3>Some title</h3>No items found.';
+    $expected = '<div class="item-list"><h3>Some title</h3>No items found.</div>';
     $this->assertThemeOutput('item_list', $variables, $expected, 'Empty %callback generates empty string with title.');
 
     // Verify that title set to 0 is output.
     $variables = array();
     $variables['title'] = 0;
     $variables['empty'] = 'No items found.';
-    $expected = '<h3>0</h3>No items found.';
+    $expected = '<div class="item-list"><h3>0</h3>No items found.</div>';
     $this->assertThemeOutput('item_list', $variables, $expected, '%callback with title set to 0 generates a title.');
 
     // Verify that title set to a render array is output.
@@ -67,7 +67,7 @@ class FunctionsTest extends WebTestBase {
       '#markup' => '<span>Render array</span>',
     );
     $variables['empty'] = 'No items found.';
-    $expected = '<h3><span>Render array</span></h3>No items found.';
+    $expected = '<div class="item-list"><h3><span>Render array</span></h3>No items found.</div>';
     $this->assertThemeOutput('item_list', $variables, $expected, '%callback with title set to a render array generates a title.');
 
     // Verify that empty text is not displayed when there are list items.
@@ -75,7 +75,7 @@ class FunctionsTest extends WebTestBase {
     $variables['title'] = 'Some title';
     $variables['empty'] = 'No items found.';
     $variables['items'] = array('Un', 'Deux', 'Trois');
-    $expected = '<h3>Some title</h3><ul><li>Un</li><li>Deux</li><li>Trois</li></ul>';
+    $expected = '<div class="item-list"><h3>Some title</h3><ul><li>Un</li><li>Deux</li><li>Trois</li></ul></div>';
     $this->assertThemeOutput('item_list', $variables, $expected, '%callback does not print empty text when there are list items.');
 
     // Verify nested item lists.
@@ -136,23 +136,24 @@ class FunctionsTest extends WebTestBase {
       'f',
     );
 
-    $inner_b = '<ol id="blist">';
+    $inner_b = '<div class="item-list"><ol id="blist">';
     $inner_b .= '<li>ba</li>';
     $inner_b .= '<li class="item-class-bb">bb</li>';
-    $inner_b .= '</ol>';
+    $inner_b .= '</ol></div>';
 
-    $inner_cb = '<ul>';
+    $inner_cb = '<div class="item-list"><ul>';
     $inner_cb .= '<li>cba</li>';
     $inner_cb .= '<li>cbb</li>';
-    $inner_cb .= '</ul>';
+    $inner_cb .= '</ul></div>';
 
-    $inner_c = '<ul id="clist">';
+    $inner_c = '<div class="item-list"><ul id="clist">';
     $inner_c .= '<li>ca</li>';
     $inner_c .= '<li class="item-class-cb">cb' . $inner_cb . '</li>';
     $inner_c .= '<li>cc</li>';
-    $inner_c .= '</ul>';
+    $inner_c .= '</ul></div>';
 
-    $expected = '<h3>Some title</h3>';
+    $expected = '<div class="item-list">';
+    $expected .= '<h3>Some title</h3>';
     $expected .= '<ul id="parentlist">';
     $expected .= '<li>a</li>';
     $expected .= '<li id="item-id-b">b' . $inner_b . '</li>';
@@ -160,7 +161,7 @@ class FunctionsTest extends WebTestBase {
     $expected .= '<li id="item-id-d">d</li>';
     $expected .= '<li id="item-id-e"></li>';
     $expected .= '<li>f</li>';
-    $expected .= '</ul>';
+    $expected .= '</ul></div>';
 
     $this->assertThemeOutput('item_list', $variables, $expected);
   }

core/modules/system/templates/item-list.html.twig

@@ -19,16 +19,18 @@
  */
 #}
 {%- if items or empty -%}
-  {%- if title is not empty -%}
-    <h3>{{ title }}</h3>
-  {%- endif -%}
-  {%- if items -%}
-    <{{ list_type }}{{ attributes }}>
-      {%- for item in items -%}
-        <li{{ item.attributes }}>{{ item.value }}</li>
-      {%- endfor -%}
-    </{{ list_type }}>
-  {%- else -%}
-    {{- empty -}}
-  {%- endif -%}
+  <div class="item-list">
+    {%- if title is not empty -%}
+      <h3>{{ title }}</h3>
+    {%- endif -%}
+    {%- if items -%}
+      <{{ list_type }}{{ attributes }}>
+        {%- for item in items -%}
+          <li{{ item.attributes }}>{{ item.value }}</li>
+        {%- endfor -%}
+      </{{ list_type }}>
+    {%- else -%}
+      {{- empty -}}
+    {%- endif -%}
+  </div>
 {%- endif %}

core/modules/toolbar/css/toolbar.module.css

@@ -20,9 +20,10 @@
 /**
  * Very specific overrides for Drupal system CSS.
  */
-.toolbar ul,
 .toolbar li,
 .toolbar .menu li,
+.toolbar .item-list,
+.toolbar .item-list li,
 .toolbar .menu li.expanded {
   list-style-type: none;
   list-style-image: none;

core/modules/user/config/install/views.view.who_s_online.yml

@@ -52,6 +52,7 @@ display:
           row_class: ''
           default_row_class: true
           type: ul
+          wrapper_class: item-list
           class: ''
         provider: views
       row:

core/modules/user/src/Tests/UserAdminListingTest.php

@@ -69,8 +69,8 @@ class UserAdminListingTest extends WebTestBase {
     foreach ($result as $account) {
       $name = (string) $account->td[0]->span;
       $roles = array();
-      if (isset($account->td[2]->ul)) {
-        foreach ($account->td[2]->ul->li as $element) {
+      if (isset($account->td[2]->div->ul)) {
+        foreach ($account->td[2]->div->ul->li as $element) {
           $roles[] = (string) $element;
         }
       }

core/modules/views/src/Plugin/views/style/HtmlList.php

@@ -46,6 +46,7 @@ class HtmlList extends StylePluginBase {
 
     $options['type'] = array('default' => 'ul');
     $options['class'] = array('default' => '');
+    $options['wrapper_class'] = array('default' => 'item-list');
 
     return $options;
   }
@@ -61,6 +62,13 @@ class HtmlList extends StylePluginBase {
       '#options' => array('ul' => $this->t('Unordered list'), 'ol' => $this->t('Ordered list')),
       '#default_value' => $this->options['type'],
     );
+    $form['wrapper_class'] = array(
+      '#title' => $this->t('Wrapper class'),
+      '#description' => $this->t('The class to provide on the wrapper, outside the list.'),
+      '#type' => 'textfield',
+      '#size' => '30',
+      '#default_value' => $this->options['wrapper_class'],
+    );
     $form['class'] = array(
       '#title' => $this->t('List class'),
       '#description' => $this->t('The class to provide on the list element itself.'),

core/modules/views/src/Tests/Plugin/StyleHtmlListTest.php

@@ -33,16 +33,24 @@ class StyleHtmlListTest extends ViewUnitTestBase {
     $output = $view->preview();
     $output = drupal_render($output);
 
+    // Check that an empty class attribute is not added if the wrapper class is
+    // not set.
+    $this->assertTrue(strpos($output, '<div>') !== FALSE, 'Empty class is not added to DIV when class is not set');
+
     // Check that an empty class attribute is not added if the list class is
     // not set.
     $this->assertTrue(strpos($output, '<ul>') !== FALSE, 'Empty class is not added to UL when class is not set');
 
     // Set wrapper class and list class in style options.
     $view->style_plugin->options['class'] = 'class';
+    $view->style_plugin->options['wrapper_class'] = 'wrapper-class';
 
     $output = $view->preview();
     $output = drupal_render($output);
 
+    // Check that class attribute is present if the wrapper class is set.
+    $this->assertTrue(strpos($output, '<div class="wrapper-class">') !== FALSE, 'Class is added to DIV');
+
     // Check that class attribute is present if the list class is set.
     $this->assertTrue(strpos($output, '<ul class="class">') !== FALSE, 'Class is added to UL');
   }

core/modules/views/templates/views-view-list.html.twig

@@ -4,6 +4,7 @@
  * Default theme implementation for a view template to display a list of rows.
  *
  * Available variables:
+ * - attributes: HTML attributes for the container.
  * - rows: A list of rows for this list.
  *   - attributes: The row's HTML attributes.
  *   - content: The row's contents.
@@ -17,14 +18,21 @@
  * @ingroup themeable
  */
 #}
-{% if title %}
-  <h3>{{ title }}</h3>
+{% if attributes -%}
+  <div{{ attributes }}>
 {% endif %}
+  {% if title %}
+    <h3>{{ title }}</h3>
+  {% endif %}
 
-<{{ list.type }}{{ list.attributes }}>
+  <{{ list.type }}{{ list.attributes }}>
 
-  {% for row in rows %}
-    <li{{ row.attributes }}>{{ row.content }}</li>
-  {% endfor %}
+    {% for row in rows %}
+      <li{{ row.attributes }}>{{ row.content }}</li>
+    {% endfor %}
 
-</{{ list.type }}>
+  </{{ list.type }}>
+
+{% if attributes -%}
+  </div>
+{% endif %}

core/modules/views/templates/views-view-summary.html.twig

@@ -19,12 +19,14 @@
  * @ingroup themeable
  */
 #}
-<ul class="views-summary">
-{% for row in rows %}
-  <li><a href="{{ row.url }}"{{ row.attributes }}>{{ row.link }}</a>
-    {% if options.count %}
-      ({{ row.count }})
-    {% endif %}
-  </li>
-{% endfor %}
-</ul>
+<div class="item-list">
+  <ul class="views-summary">
+  {% for row in rows %}
+    <li><a href="{{ row.url }}"{{ row.attributes }}>{{ row.link }}</a>
+      {% if options.count %}
+        ({{ row.count }})
+      {% endif %}
+    </li>
+  {% endfor %}
+  </ul>
+</div>

core/modules/views/views.theme.inc

@@ -842,6 +842,12 @@ function template_preprocess_views_view_list(&$variables) {
     $variables['list']['attributes'] = new Attribute(array('class' => $class));
   }
 
+  // Fetch wrapper classes from handler options.
+  if ($handler->options['wrapper_class']) {
+    $wrapper_class = explode(' ', $handler->options['wrapper_class']);
+    $variables['attributes']['class'] = array_map('drupal_clean_css_identifier', $wrapper_class);
+  }
+
   $variables['list']['type'] = $handler->options['type'];
 
   template_preprocess_views_view_unformatted($variables);

core/modules/views_ui/css/views_ui.admin.theme.css

@@ -912,7 +912,7 @@ td.group-title {
   content: "\00A0\003E";
 }
 
-.views-ui-dialog details ul {
+.views-ui-dialog details .item-list {
   padding-left: 2em;
 }
 /* @end */
@@ -1059,11 +1059,11 @@ td.group-title {
 
 /* @group HTML list */
 
-#views-live-preview .view-content > ul {
+#views-live-preview .view-content > .item-list > ul {
   list-style-position: outside;
   padding-left: 21px; /* LTR */
 }
-[dir="rtl"] #views-live-preview .view-content > ul {
+[dir="rtl"] #views-live-preview .view-content > .item-list > ul {
   padding-left: 0;
   padding-right: 21px;
 }

core/modules/views_ui/src/Tests/FieldUITest.php

@@ -42,18 +42,18 @@ class FieldUITest extends UITestBase {
     // Ensure that the expected tokens appear in the UI.
     $edit_handler_url = 'admin/structure/views/nojs/handler/test_view/default/field/age';
     $this->drupalGet($edit_handler_url);
-    $result = $this->xpath('//details[@id="edit-options-alter-help"]/div[@class="details-wrapper"]//li');
+    $result = $this->xpath('//details[@id="edit-options-alter-help"]/div[@class="details-wrapper"]/div[@class="item-list"]/fields/li');
     $this->assertEqual((string) $result[0], '[age] == Age');
 
     $edit_handler_url = 'admin/structure/views/nojs/handler/test_view/default/field/id';
     $this->drupalGet($edit_handler_url);
-    $result = $this->xpath('//details[@id="edit-options-alter-help"]/div[@class="details-wrapper"]//li');
+    $result = $this->xpath('//details[@id="edit-options-alter-help"]/div[@class="details-wrapper"]/div[@class="item-list"]/fields/li');
     $this->assertEqual((string) $result[0], '[age] == Age');
     $this->assertEqual((string) $result[1], '[id] == ID');
 
     $edit_handler_url = 'admin/structure/views/nojs/handler/test_view/default/field/name';
     $this->drupalGet($edit_handler_url);
-    $result = $this->xpath('//details[@id="edit-options-alter-help"]/div[@class="details-wrapper"]//li');
+    $result = $this->xpath('//details[@id="edit-options-alter-help"]/div[@class="details-wrapper"]/div[@class="item-list"]/fields/li');
     $this->assertEqual((string) $result[0], '[age] == Age');
     $this->assertEqual((string) $result[1], '[id] == ID');
     $this->assertEqual((string) $result[2], '[name] == Name');

core/themes/bartik/css/style.css

@@ -326,11 +326,11 @@ ul.menu li {
 [dir="rtl"] .region-content ol {
   padding: 0 15px 0.25em 0;
 }
-li {
+.item-list ul li {
   margin: 0;
   padding: 0.2em 0.5em 0 0; /* LTR */
 }
-[dir="rtl"] li {
+[dir="rtl"] .item-list ul li {
   padding: 0.2em 0 0 0.5em;
 }
 ul.tips {
@@ -494,30 +494,30 @@ h1.site-name {
   margin: 0;
   padding: 0;
 }
-.region-header #block-user-login ul,
+.region-header #block-user-login div.item-list,
 .region-header #block-user-login div.description {
   font-size: 0.916em;
   margin: 0;
 }
-.region-header #block-user-login ul {
+.region-header #block-user-login div.item-list {
   clear: both;
 }
 .region-header #block-user-login div.description {
   display: inline;
 }
-.region-header #block-user-login ul {
+.region-header #block-user-login .item-list ul {
   padding: 0;
   line-height: 1;
 }
-.region-header #block-user-login li {
+.region-header #block-user-login .item-list li {
   list-style: none;
   float: left; /* LTR */
   padding: 3px 0 1px;
 }
-.region-header #block-user-login li:last-child {
+.region-header #block-user-login .item-list li:last-child {
   padding-left: 0.5em; /* LTR */
 }
-[dir="rtl"] .region-header #block-user-login li:last-child {
+[dir="rtl"] .region-header #block-user-login .item-list li:last-child {
   padding-left: 0;
   padding-right: 0.5em;
 }
@@ -559,7 +559,7 @@ h1.site-name {
 [dir="rtl"] .site-branding-text,
 [dir="rtl"] .region-header .block,
 [dir="rtl"] .region-header #block-user-login .form-item,
-[dir="rtl"] .region-header #block-user-login li {
+[dir="rtl"] .region-header #block-user-login .item-list li {
   float: right;
 }
 

core/themes/seven/css/components/menus-and-lists.css

@@ -1,7 +1,15 @@
 /**
  * Menus and lists.
  */
-li,
+.item-list ul {
+  list-style-type: disc;
+  list-style-image: none;
+  margin: 0.25em 0 0.25em 1.5em; /* LTR */
+}
+[dir="rtl"] .item-list ul {
+  margin: 0.25em 1.5em 0.25em 0;
+}
+.item-list ul li,
 li.leaf,
 ul.menu li {
   list-style-type: disc;
@@ -10,11 +18,13 @@ ul.menu li {
 ul.menu li {
   margin: 0;
 }
-li.collapsed {
+.item-list ul li.collapsed,
+ul.menu li.collapsed {
   list-style-image: url(../../../../misc/menu-collapsed.png);
   list-style-type: disc;
 }
-li.expanded {
+.item-list ul li.expanded,
+ul.menu li.expanded {
   list-style-image: url(../../../../misc/menu-expanded.png);
   list-style-type: circle;
 }

core/themes/seven/css/components/tables.css

@@ -93,7 +93,7 @@ th.active > a:focus:after,
 th.active > a:hover:after {
   border-bottom-color: #008ee6;
 }
-td ul {
+td .item-list ul {
   margin: 0;
 }
 td.active {

core/themes/seven/css/components/views-ui.css

@@ -93,8 +93,8 @@ details.fieldset-no-legend {
 
 /* @group Lists */
 
-.views-admin ul,
-.views-admin ul.secondary {
+.views-admin ul.secondary,
+.views-admin .item-list ul {
   margin: 0;
   padding: 0;
 }