Implement design for active filter pills

client/scss/components/_filters.scss

@@ -38,3 +38,8 @@
     height: theme('fontSize.16');
   }
 }
+
+.w-active-filters {
+  @apply w-m-0 w-py-4 w-bg-surface-header w-border-b w-border-border-furniture w-flex w-flex-wrap w-list-none w-gap-2;
+  @include nice-padding;
+}

client/scss/components/_pill.scss

@@ -0,0 +1,12 @@
+.w-pill {
+  @apply w-flex w-items-center;
+  min-height: theme('spacing[6.5]');
+
+  &__content {
+    @apply w-pl-3 w-py-1 w-rounded-l-xl w-bg-info-100 hover:w-bg-info-125 w-p-0 w-text-white hover:w-text-white w-pr-2 w-text-14 w-flex w-items-center w-border-r w-border-white-15 w-h-full;
+  }
+
+  &__remove {
+    @apply w-pr-3 w-py-1 w-rounded-r-xl w-bg-info-100 hover:w-bg-info-125 w-text-white hover:w-text-white w-p-0 w-pl-2 w-flex w-items-center w-justify-center w-h-full;
+  }
+}

client/scss/core.scss

@@ -142,6 +142,7 @@ These are classes for components.
 @import 'components/form-side';
 @import 'components/userbar';
 @import 'components/breadcrumbs';
+@import 'components/pill';
 
 @import '../src/components/Sidebar/Sidebar';
 @import '../src/components/Minimap/Minimap';

client/src/tokens/objectStyles.js

@@ -3,6 +3,7 @@ const borderRadius = {
   sm: '0.1875rem', // 3px
   DEFAULT: '0.3125rem', // 5px
   md: '0.625rem', // 10px
+  xl: '1.5rem', // 24px
   full: '100%',
 };
 

client/src/tokens/spacing.js

@@ -11,6 +11,7 @@ const spacing = {
   4: '1rem',
   5: '1.25rem',
   6: '1.5rem',
+  6.5: '1.625rem',
   7: '1.75rem',
   7.5: '1.875rem',
   8: '2rem',

wagtail/admin/templates/wagtailadmin/shared/active_filters.html

@@ -1,12 +1,16 @@
-{% load i18n %}
+{% load i18n wagtailadmin_tags %}
 <ul class="w-active-filters">
     {% for filter in active_filters %}
-        <li>
-            {{ filter.field_label }}: <b>{{ filter.value }}</b>
-            <a href="{{ filter.removed_filter_url }}"
-               aria-label="{% blocktranslate trimmed with field_label=filter.field_label value=filter.value %}Remove filter on {{ field_label }}: {{ value }}{% endblocktranslate %}">
-                [x]
-            </a>
+        <li class="w-pill">
+            <button class="w-pill__content">
+                <span class="w-text-14">{{ filter.field_label }}:</span>
+                <b class="w-ml-1">{{ filter.value }}</b>
+            </button>
+            <button
+                class="w-pill__remove"
+                aria-label="{% trans 'Clear' %}">
+                {% icon name="cross" classname="w-h-4 w-w-4" %}
+            </button>
         </li>
     {% endfor %}
 </ul>

wagtail/admin/tests/pages/test_explorer_view.py

@@ -53,8 +53,8 @@ class TestPageExplorer(WagtailTestUtils, TestCase):
 
     def assertContainsActiveFilter(self, response, filter_name, value):
         soup = self.get_soup(response.content)
-        active_filter = soup.find("ul", class_="w-active-filters").find("li")
-        self.assertEqual(active_filter.contents[0].strip(), f"{filter_name}:")
+        active_filter = soup.select_one(".w-active-filters .w-pill__content")
+        self.assertEqual(active_filter.find("span").text.strip(), f"{filter_name}:")
         self.assertEqual(active_filter.find("b").text.strip(), value)
 
     def test_explore(self):