Horizontal list section uses responsive grid

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.18.4",
+  "version": "4.19.0",
   "author": {
     "email": "[email protected]",
     "name": "Canonical Webteam"

releases.yml

@@ -1,3 +1,9 @@
+- version: 4.19.0
+  features:
+    - component: List
+      url: /docs/patterns/lists#horizontal-section-new
+      status: New
+      notes: We've introduced the <code>.p-list--horizontal-section</code> list variant.
 - version: 4.18.0
   features:
     - component: Quote wrapper

scss/_base_placeholders.scss

@@ -67,17 +67,6 @@
     padding-left: 0;
   }
 
-  %vf-list-with-state-icons {
-    @extend %vf-list;
-
-    .p-list__item {
-      &.is-ticked::before,
-      &.is-crossed::before {
-        top: $spv--medium;
-      }
-    }
-  }
-
   // Bars and borders
   %vf-pseudo-border {
     background-color: $colors--theme--border-default;

scss/_patterns_lists.scss

@@ -134,6 +134,13 @@ $list-step-bullet-margin: $sph--x-large;
     }
   }
 
+  %vf-list-item-with-divisor-common-properties {
+    box-shadow: inset 0px 1px 0px 0px $colors--theme--border-low-contrast;
+    margin: 0;
+    padding-bottom: $sph--large;
+    padding-top: $sph--small;
+  }
+
   %vf-list-item-bullet {
     &::before {
       color: $colors--theme--text-default;
@@ -149,6 +156,7 @@ $list-step-bullet-margin: $sph--x-large;
   position: relative;
 
   > .p-list--divided,
+  > .p-list--horizontal-section,
   > .p-list {
     margin-left: 0;
   }
@@ -161,10 +169,7 @@ $list-step-bullet-margin: $sph--x-large;
 }
 
 @mixin vf-list-item-divided {
-  box-shadow: inset 0px 1px 0px 0px $colors--theme--border-low-contrast;
-  margin: 0;
-  padding-bottom: $sph--large;
-  padding-top: $sph--small;
+  @extend %vf-list-item-with-divisor-common-properties;
 
   &:first-child {
     box-shadow: none;
@@ -175,6 +180,18 @@ $list-step-bullet-margin: $sph--x-large;
   }
 }
 
+@mixin vf-list-item-horizontal-section {
+  @extend %vf-list-item-with-divisor-common-properties;
+}
+
+// Offset a list item icon (tick or cross) away from the divisor above it
+@mixin vf-list-item-icon-divisor-offset {
+  &.is-ticked::before,
+  &.is-crossed::before {
+    top: $spv--medium;
+  }
+}
+
 // Mixin for inline list items
 @mixin vf-inline-list-item {
   display: inline;
@@ -199,64 +216,58 @@ $list-step-bullet-margin: $sph--x-large;
   }
 }
 
-// todo this extraction may not be necessary but keeping it for now should the list items need more styling
-@mixin list-horizontal-item-intrinsic-sizing-impl($num-cols) {
-  grid-column-end: span #{$num-cols};
-}
+@mixin vf-p-list-horizontal-section {
+  .p-list--horizontal-section {
+    @extend %vf-grid-row;
+    @extend %vf-list;
 
-/**
- * Applies intrinsic sizing to horizontal list items by adjusting their grid column span based on the container's width.
- * Requires that the parent container has `container-type` set to `inline-size` or `size`.
- * @param {number} $min-width - The min width that the entire list should span, not including gutter adjustments
- * @param {number} $num-cols - The number of columns the list item should span.
- * @param {number} $gutter-width - The width of the gutter (space) between grid items. This is used to calculate the required width for the item.
- *
- * Example Usage:
- * ```scss
- * <selector> {
- *   @include list-horizontal-item-intrinsic-sizing(30, 4, 1rem);
- * }
- * ```
- */
-@mixin list-horizontal-item-intrinsic-sizing($min-width, $num-cols, $gutter-width) {
-  @if $min-width {
-    // Constrain to min width, taking gutters into account
-    @container (width > #{$min-width - ($num-cols * $gutter-width)}) {
-      @include list-horizontal-item-intrinsic-sizing-impl($num-cols);
-    }
-  } @else {
-    @include list-horizontal-item-intrinsic-sizing-impl($num-cols);
-  }
-}
+    .p-list__item {
+      @extend %vf-list-item;
+      @include vf-list-item-icon-divisor-offset;
+      @include vf-list-item-horizontal-section;
 
-@mixin vf-p-list-horizontal {
-  .p-list--horizontal {
-    @extend %vf-list-with-state-icons;
-    @extend %vf-grid-row;
-    container-type: inline-size;
-  }
-  .p-list--horizontal .p-list__item {
-    @extend %vf-list-item;
-    border-top: $border;
-  }
+      // Only apply custom grid colspans if there is more than one list item.
+      // If there's only one list item, it will span the full row width.
+      &:not(:only-child) {
+        grid-column-end: span $grid-8-columns-small;
+
+        @media (min-width: $threshold-4-6-col) {
+          grid-column-end: span $grid-8-columns-medium / 2;
+        }
 
-  .p-list--horizontal.is-4-cols-on-large .p-list__item {
-    // note that the 4/4/8 grid will snap at different breakpoints than these list items
-    @include list-horizontal-item-intrinsic-sizing(null, $grid-8-columns-small, map-get($grid-gutter-widths, small));
-    @include list-horizontal-item-intrinsic-sizing(40rem, $grid-8-columns-medium / 2, map-get($grid-gutter-widths, default));
-    // Technically, this "large grid" rule is not needed because half of the medium grid and a quarter of the large grid are both 2 columns.
-    // @include list-horizontal-item-intrinsic-sizing(80, $grid-8-columns / 4, map-get($grid-gutter-widths, default));
+        @media (min-width: $threshold-6-12-col) {
+          grid-column-end: span $grid-8-columns / 4;
+        }
+      }
+    }
+  }
+  .p-list--horizontal-section.is-25-75 {
+    .p-list__item {
+      // Skip the first two columns on large
+      @media (min-width: $threshold-6-12-col) {
+        &:nth-child(3n + 1) {
+          grid-column-start: 3;
+        }
+        &:nth-child(3n + 2) {
+          grid-column-start: 5;
+        }
+        &:nth-child(3n + 3) {
+          grid-column-start: 7;
+        }
+      }
+    }
   }
 }
 
 // A list with separators between items
 @mixin vf-p-list-divided {
   .p-list--divided {
-    @extend %vf-list-with-state-icons;
+    @extend %vf-list;
 
     .p-list__item {
       @extend %vf-list-item;
       @include vf-list-item-divided;
+      @include vf-list-item-icon-divisor-offset;
     }
 
     & & {
@@ -271,7 +282,8 @@ $list-step-bullet-margin: $sph--x-large;
   }
 
   // stylelint-disable selector-max-type -- we want to target ordered lists
-  ol.p-list--divided {
+  ol.p-list--divided,
+  ol.p-list--horizontal-section {
     counter-reset: p-list-divided-counter;
     list-style: none;
 
@@ -534,7 +546,7 @@ $list-step-bullet-margin: $sph--x-large;
   @include vf-p-list-placeholders;
 
   @include vf-p-list;
-  @include vf-p-list-horizontal;
+  @include vf-p-list-horizontal-section;
   @include vf-p-list-divided;
   @include vf-p-list-item-state;
   @include vf-p-inline-list;

templates/docs/examples/patterns/lists/_list-horizontal-section-example.jinja

@@ -0,0 +1,51 @@
+{#
+  Generates an example of the horizontal section list pattern.
+  Params:
+    - list_item_type: The style of the list items (optional). Options are: "has-bullet", "is-ticked", "is-crossed", "ordered".
+    - list_variant_class: Modifier classes to apply to the list (optional).
+#}
+{%  macro list_horizontal_section_example(list_item_type="", list_variant_class="") %}
+  {% set list_item_type = list_item_type | trim %}
+  {% set list_variant_class = list_variant_class | trim %}
+
+  {% set list_classes = "p-list--horizontal-section" %}
+  {% if list_variant_class | length > 0 %}
+    {% set list_classes = list_classes + " " + list_variant_class %}
+  {% endif %}
+
+  {% set list_tag = "ul" %}
+  {% if list_item_type == "ordered" %}
+    {% set list_tag = "ol" %}
+    {% set list_item_type = "" %}
+  {% endif %}
+
+  {% set list_item_classes = "p-list__item" %}
+  {% if list_item_type | length > 0 %}
+    {% set list_item_classes = list_item_classes + " " + list_item_type %}
+  {% endif %}
+
+  <{{ list_tag }} class="{{ list_classes }}">
+    <li class="{{ list_item_classes }}">
+      10 year security maintenance and CVE Patching
+    </li>
+    <li class="{{ list_item_classes }}">
+      <a href="#">Kernel Livepatch</a> for 24/7 patching with no downtime
+    </li>
+    <li class="{{ list_item_classes }}">
+      <a href="#">Expanded security</a> for infrastructure and applications
+    </li>
+    <li class="{{ list_item_classes }}">
+      <a href="#">FIPS 140-2</a> cryptographic modules certified by NIST
+    </li>
+    <li class="{{ list_item_classes }}">
+      <a href="#">Common Criteria EAL2</a>: ISO/IEC IS 15408 validated by CSEC
+    </li>
+    <li class="{{ list_item_classes }}">
+      <a href="#">DISA/STIG</a> hardening for <abbr title="Department of Defence, USA">DoD</abbr>
+      compliance
+    </li>
+    <li class="{{ list_item_classes }}">
+      <a href="#">CIS profiles</a> for cyber defence and malware prevention
+    </li>
+  </{{ list_tag }}>
+{% endmacro %}

templates/docs/examples/patterns/lists/combined.html

@@ -26,5 +26,15 @@
 <section>{% include 'docs/examples/patterns/lists/lists-stepped-heading-classes.html' %}</section>
 <section>{% include 'docs/examples/patterns/lists/lists-stepped-headings.html' %}</section>
 <section>{% include 'docs/examples/patterns/lists/lists-stepped-without-headings.html' %}</section>
+<section>{% include 'docs/examples/patterns/lists/lists-horizontal-section-responsive.html' %}</section>
+<section>{% include 'docs/examples/patterns/lists/lists-horizontal-section-responsive-bulleted.html' %}</section>
+<section>{% include 'docs/examples/patterns/lists/lists-horizontal-section-responsive-crossed.html' %}</section>
+<section>{% include 'docs/examples/patterns/lists/lists-horizontal-section-responsive-ordered.html' %}</section>
+<section>{% include 'docs/examples/patterns/lists/lists-horizontal-section-responsive-ticked.html' %}</section>
+<section>{% include 'docs/examples/patterns/lists/lists-horizontal-section-25-75-responsive.html' %}</section>
+<section>{% include 'docs/examples/patterns/lists/lists-horizontal-section-25-75-responsive-bulleted.html' %}</section>
+<section>{% include 'docs/examples/patterns/lists/lists-horizontal-section-25-75-responsive-crossed.html' %}</section>
+<section>{% include 'docs/examples/patterns/lists/lists-horizontal-section-25-75-responsive-ordered.html' %}</section>
+<section>{% include 'docs/examples/patterns/lists/lists-horizontal-section-25-75-responsive-ticked.html' %}</section>
 {% endwith %}
 {% endblock %}

templates/docs/examples/patterns/lists/lists-dividers-bulleted.html

@@ -1,5 +1,5 @@
 {% extends "_layouts/examples.html" %}
-{% block title %}Lists / Bulletted with horizontal divider{% endblock %}
+{% block title %}Lists / Bulleted with horizontal divider{% endblock %}
 
 {% block standalone_css %}patterns_lists{% endblock %}
 

templates/docs/examples/patterns/lists/lists-horizontal-section-25-75-responsive-bulleted.html

@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Horizontal section / 25/75 / Bulleted{% endblock %}
+{% from "docs/examples/patterns/lists/_list-horizontal-section-example.jinja" import list_horizontal_section_example %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+{{ list_horizontal_section_example(list_item_type='has-bullet', list_variant_class='is-25-75') }}
+{% endblock %}

templates/docs/examples/patterns/lists/lists-horizontal-section-25-75-responsive-crossed.html

@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Horizontal section / 25/75 / Crossed{% endblock %}
+{% from "docs/examples/patterns/lists/_list-horizontal-section-example.jinja" import list_horizontal_section_example %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+{{ list_horizontal_section_example(list_item_type='is-crossed', list_variant_class='is-25-75') }}
+{% endblock %}

templates/docs/examples/patterns/lists/lists-horizontal-section-25-75-responsive-ordered.html

@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Horizontal section / 25/75 / Ordered{% endblock %}
+{% from "docs/examples/patterns/lists/_list-horizontal-section-example.jinja" import list_horizontal_section_example %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+{{ list_horizontal_section_example(list_item_type='ordered', list_variant_class='is-25-75') }}
+{% endblock %}

templates/docs/examples/patterns/lists/lists-horizontal-section-25-75-responsive-ticked.html

@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Horizontal section / 25/75 / Ticked{% endblock %}
+{% from "docs/examples/patterns/lists/_list-horizontal-section-example.jinja" import list_horizontal_section_example %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+{{ list_horizontal_section_example(list_item_type='is-ticked', list_variant_class='is-25-75') }}
+{% endblock %}

templates/docs/examples/patterns/lists/lists-horizontal-section-25-75-responsive.html

@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Horizontal section / 25/75{% endblock %}
+{% from "docs/examples/patterns/lists/_list-horizontal-section-example.jinja" import list_horizontal_section_example %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+{{ list_horizontal_section_example(list_variant_class='is-25-75') }}
+{% endblock %}

templates/docs/examples/patterns/lists/lists-horizontal-section-responsive-bulleted.html

@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Horizontal section / Bulleted{% endblock %}
+{% from "docs/examples/patterns/lists/_list-horizontal-section-example.jinja" import list_horizontal_section_example %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+{{ list_horizontal_section_example(list_item_type='has-bullet') }}
+{% endblock %}