Rename list dots to bullets

releases.yml

@@ -11,7 +11,7 @@
     - component: Restyled divided lists
       url: /docs/patterns/lists
       status: Updated
-      notes: We've restyled the divided lists and intend them to be used by default now.<p>We've also added a new <code>.is-dotted</code> class to display dots in front of list items.
+      notes: We've restyled the divided lists and intend them to be used by default now.<p>We've also added a new <code>.has-bullet</code> class to display a bullet in front of list items.
     - component: Small caps text
       url: /docs/base/typography#small-caps-text
       status: Updated

scss/_patterns_lists.scss

@@ -183,7 +183,7 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
   }
 }
 
-%vf-list-item-dotted {
+%vf-list-item-bullet {
   &::before {
     color: $color-dark;
     content: '•';
@@ -194,9 +194,9 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
   }
 }
 
-// Displays item with a dot
-.is-dotted {
-  @extend %vf-list-item-dotted;
+// Displays item with a bullet
+.has-bullet {
+  @extend %vf-list-item-bullet;
 }
 
 // Displays a list inline with spacing

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

@@ -5,10 +5,10 @@
 
 {% block content %}
 <ul class="p-list--divided">
-  <li class="p-list__item is-dotted">
+  <li class="p-list__item has-bullet">
     Balance compute load in the cloud
     <ul class="p-list--divided">
-      <li class="p-list__item is-dotted">Balance compute load in the cloud</li>
+      <li class="p-list__item has-bullet">Balance compute load in the cloud</li>
     </ul>
   </li>
   <li class="p-list__item is-ticked">

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

@@ -0,0 +1,19 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Bulletted with horizontal divider{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+<ul class="p-list--divided">
+  <li class="p-list__item has-bullet">Balance compute load in the cloud</li>
+  <li class="p-list__item has-bullet">
+    List of steps
+    <ul class="p-list--divided">
+      <li class="p-list__item has-bullet">Balance compute load in the cloud</li>
+      <li class="p-list__item has-bullet">Optimise for specific workloads</li>
+      <li class="p-list__item has-bullet">Assess overcommit ratios</li>
+    </ul>
+  </li>
+  <li class="p-list__item has-bullet">Assess overcommit ratios</li>
+</ul>
+{% endblock %}

templates/docs/patterns/lists/index.md

@@ -7,30 +7,30 @@ context:
 If you want to display lists in a way that is more visually distinctive than the
 standard `<ol>` and `<ul>`, we have 7 list styles at your disposal.
 
-## Horizontal divider
+## Bulleted with horizontal divider
 
-Use the class `.p-list--divided` to add horizontal lines between the items.
+Use the class `.p-list--divided` to add horizontal lines between the items and
+`.has-bullet` to add bullets.
 This is meant to be the new default list style please use this going forward.
 
-<div class="embedded-example"><a href="/docs/examples/patterns/lists/lists-dividers/" class="js-example">
-View example of the divided list pattern
+<div class="embedded-example"><a href="/docs/examples/patterns/lists/lists-dividers-bulleted/" class="js-example">
+View example of the bulleted divided list pattern
 </a></div>
 
-## Dotted with horizontal divider
+## Bulletless with horizontal divider
 
-You can combine both `.is-dotted` and `.p-list--divided` to style a
-list with horizontal dividers and dots.
+You can omit the `.has-bullet` class to style a list without them but keep in mind that the bulleted version is to be used as the default.
 
-<div class="embedded-example"><a href="/docs/examples/patterns/lists/lists-dividers-dotted/" class="js-example">
-View example of the dotted divided list pattern
+<div class="embedded-example"><a href="/docs/examples/patterns/lists/lists-dividers/" class="js-example">
+View example of the divided list pattern
 </a></div>
 
 ## Ordered lists with horizontal divider
 
 You can use the class `.p-list--divided` to style an ordered list.
 
 <div class="embedded-example"><a href="/docs/examples/patterns/lists/lists-dividers-ordered/" class="js-example">
-View example of the dotted divided list pattern
+View example of the ordered divided list pattern
 </a></div>
 
 ## Ticked with horizontal divider
@@ -42,7 +42,7 @@ list with horizontal dividers and tick icons.
 View example of the ticked divided list pattern
 </a></div>
 
-## Default
+## Basic
 
 Use the class `.p-list` for a list without bullets and more spacing between
 items than the basic lists.