removed unused styles from utility.legacy.scss file and clean up

- `divider-before` not used
- add w-list-none to Tailwind utility classes
- remove now unused unlist class
- relates to #8947

CHANGELOG.txt

@@ -18,6 +18,7 @@ Changelog
  * Clean up Prettier & Eslint usage for search promotions formset JS file (LB (Ben Johnston))
  * Ensure that translation file generation ignores JavaScript unit tests and clean up unit tests for Django gettext utils (LB (Ben Johnston))
  * Migrated `initButtonSelects` from core.js to own TypesScript file and add unit tests (Loveth Omokaro)
+ * Clean up some unused utility classes and migrate `unlist` to Tailwind utility class `w-list-none` (Loveth Omokaro)
  * Fix: Make sure workflow timeline icons are visible in high-contrast mode (Loveth Omokaro)
  * Fix: Ensure authentication forms (login, password reset) have a visible border in Windows high-contrast mode (Loveth Omokaro)
  * Fix: Ensure visual consistency between buttons and links as buttons in Windows high-contrast mode (Albina Starykova)

client/scss/overrides/_utilities.legacy.scss

@@ -21,10 +21,6 @@
   .divider-before {
     border-inline-start: 1px solid $color-grey-4;
   }
-
-  .divider-after {
-    border-inline-end: 1px solid $color-grey-4;
-  }
 }
 
 body.reordering {
@@ -49,10 +45,6 @@ body.reordering {
   display: block;
 }
 
-.unlist {
-  @include unlist();
-}
-
 // utility class to allow things to be scrollable if their contents can't wrap more nicely
 .overflow {
   overflow: auto;

client/src/tokens/typography.js

@@ -108,6 +108,10 @@ const lineHeight = {
   normal: '1.5',
 };
 
+const listStyleType = {
+  none: 'none',
+};
+
 const headingBaseStyles = {
   fontWeight: 'fontWeight.bold',
   color: 'colors.primary.DEFAULT',
@@ -181,5 +185,6 @@ module.exports = {
   fontWeight,
   letterSpacing,
   lineHeight,
+  listStyleType,
   typeScale,
 };

client/tailwind.config.js

@@ -11,6 +11,7 @@ const {
   fontWeight,
   letterSpacing,
   lineHeight,
+  listStyleType,
   typeScale,
 } = require('./src/tokens/typography');
 const { breakpoints } = require('./src/tokens/breakpoints');
@@ -76,6 +77,7 @@ module.exports = {
     fontSize,
     fontWeight,
     lineHeight,
+    listStyleType,
     letterSpacing,
     borderRadius,
     borderWidth,

docs/releases/4.2.md

@@ -27,6 +27,7 @@ depth: 1
  * Add documentation for [`register_user_listing_buttons`](register_user_listing_buttons) hook (LB (Ben Johnston))
  * Ensure that translation file generation ignores JavaScript unit tests and clean up unit tests for Django gettext utils (LB (Ben Johnston))
  * Migrated `initButtonSelects` from core.js to own TypesScript file and add unit tests (Loveth Omokaro)
+ * Clean up some unused utility classes and migrate `unlist` to Tailwind utility class `w-list-none` (Loveth Omokaro)
 
 ### Bug fixes
 

wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html

@@ -19,7 +19,7 @@
     <div class="nice-padding">
         <h2>Contents</h2>
         <nav>
-            <ul class="unlist">
+            <ul class="w-pl-0">
                 <li><a href="#typography">Typography</a></li>
                 <li><a href="#help">Help text</a></li>
                 <li><a href="#listings">Listings</a></li>
@@ -594,7 +594,7 @@
                 }
             </style>
 
-            <ul class="unlist">
+            <ul class="w-list-none">
                 <li>{% icon 'wagtail-icon' %} wagtail</li>
                 <li>{% icon 'wagtail-inverse' %} wagtail-inverse</li>
                 <li>{% icon 'cogs' %} cogs</li>