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; +}