diff --git a/core/modules/system/css/components/item-list.theme.css b/core/modules/system/css/components/item-list.theme.css
index fb4f6e2..9a1088e 100644
--- a/core/modules/system/css/components/item-list.theme.css
+++ b/core/modules/system/css/components/item-list.theme.css
@@ -17,22 +17,23 @@
[dir="rtl"] .item-list ul li {
margin: 0 1.5em 0.25em 0;
}
-[dir="rtl"] ul.comma-list.inline {
- padding-left: 0;
- padding-right: 0;
- margin-left: 0;
- margin-right: 0;
-}
-[dir="rtl"] ul.comma-list.inline li,
-ul.comma-list.inline li {
- padding-left: 0;
- padding-right: 0;
- margin-left: 0;
- margin-right: 0;
-}
-ul.comma-list.inline li:after {
+ul.item-list__comma-list {
+ display: inline;
+}
+ul.item-list__comma-list li {
+ display: inline;
+ list-style-type: none;
+}
+ul.item-list__comma-list,
+ul.item-list__comma-list li,
+[dir="rtl"] ul.item-list__comma-list,
+[dir="rtl"] ul.item-list__comma-list li {
+ margin: 0;
+ padding: 0;
+}
+ul.item-list__comma-list li:after {
content: ", ";
}
-ul.comma-list.inline li:last-child:after {
+ul.item-list__comma-list li:last-child:after {
content: "";
}
diff --git a/core/modules/system/templates/item-list.html.twig b/core/modules/system/templates/item-list.html.twig
index 2cef1d0..172799d 100644
--- a/core/modules/system/templates/item-list.html.twig
+++ b/core/modules/system/templates/item-list.html.twig
@@ -12,12 +12,17 @@
* - attributes: HTML attributes to be applied to the list.
* - empty: A message to display when there are no items. Allowed value is a
* string or render array.
+ * - context: A list of contextual data associated with the list. May contain:
+ * - list_style: The custom list style.
*
* @see template_preprocess_item_list()
*
* @ingroup themeable
*/
#}
+{% if context.list_style %}
+ {% set attributes = attributes.addClass('item-list__' ~ context.list_style) %}
+{% endif %}
{%- if items or empty -%}
{%- if title is not empty -%}
{{ title }}
diff --git a/core/modules/views_ui/src/ViewListBuilder.php b/core/modules/views_ui/src/ViewListBuilder.php
index a0c6875..16abf60 100644
--- a/core/modules/views_ui/src/ViewListBuilder.php
+++ b/core/modules/views_ui/src/ViewListBuilder.php
@@ -111,7 +111,7 @@ public function buildRow(EntityInterface $view) {
'data' => array(
'#theme' => 'item_list',
'#items' => $this->getDisplayPaths($view),
- '#attributes' => array('class' => array('comma-list', 'inline')),
+ '#context' => ['list_style' => 'comma-list'],
),
),
'operations' => $row['operations'],
diff --git a/core/themes/bartik/css/components/item-list.css b/core/themes/bartik/css/components/item-list.css
index eeb4e77..698bd56 100644
--- a/core/themes/bartik/css/components/item-list.css
+++ b/core/themes/bartik/css/components/item-list.css
@@ -10,3 +10,10 @@
[dir="rtl"] .item-list ul li {
padding: 0.2em 0 0 0.5em;
}
+.item-list .item-list__comma-list,
+.item-list .item-list__comma-list li,
+[dir="rtl"] .item-list .item-list__comma-list,
+[dir="rtl"] .item-list .item-list__comma-list li {
+ margin: 0;
+ padding: 0;
+}
diff --git a/core/themes/classy/templates/dataset/item-list.html.twig b/core/themes/classy/templates/dataset/item-list.html.twig
index 0f17cdf..7ba8be4 100644
--- a/core/themes/classy/templates/dataset/item-list.html.twig
+++ b/core/themes/classy/templates/dataset/item-list.html.twig
@@ -12,10 +12,15 @@
* - attributes: HTML attributes to be applied to the list.
* - empty: A message to display when there are no items. Allowed value is a
* string or render array.
+ * - context: A list of contextual data associated with the list. May contain:
+ * - list_style: The custom list style.
*
* @see template_preprocess_item_list()
*/
#}
+{% if context.list_style %}
+ {% set attributes = attributes.addClass('item-list__' ~ context.list_style) %}
+{% endif %}
{%- if items or empty -%}
{%- if title is not empty -%}
diff --git a/core/themes/seven/css/components/menus-and-lists.css b/core/themes/seven/css/components/menus-and-lists.css
index d96fe55..6f87c4c 100644
--- a/core/themes/seven/css/components/menus-and-lists.css
+++ b/core/themes/seven/css/components/menus-and-lists.css
@@ -38,3 +38,6 @@ ul.inline li {
ul.inline li {
display: inline;
}
+[dir="rtl"] ul.item-list__comma-list {
+ margin: 0;
+}