From 85408d8626f57821765e1fc993a54df3a12cd043 Mon Sep 17 00:00:00 2001
From: Sage Abdullah <sage.abdullah@torchbox.com>
Date: Mon, 15 Jan 2024 10:45:58 +0000
Subject: [PATCH] Implement design for active filter pills

---
 client/scss/components/_filters.scss           |  5 +++++
 client/scss/components/_pill.scss              | 12 ++++++++++++
 client/scss/core.scss                          |  1 +
 client/src/tokens/objectStyles.js              |  1 +
 client/src/tokens/spacing.js                   |  1 +
 .../wagtailadmin/shared/active_filters.html    | 18 +++++++++++-------
 .../admin/tests/pages/test_explorer_view.py    |  4 ++--
 7 files changed, 33 insertions(+), 9 deletions(-)
 create mode 100644 client/scss/components/_pill.scss

diff --git a/client/scss/components/_filters.scss b/client/scss/components/_filters.scss
index 70bd8ad801..34c4099143 100644
--- a/client/scss/components/_filters.scss
+++ b/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;
+}
diff --git a/client/scss/components/_pill.scss b/client/scss/components/_pill.scss
new file mode 100644
index 0000000000..34b00d0fd4
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/client/scss/core.scss b/client/scss/core.scss
index 77853b43f3..9f74b1d7ed 100644
--- a/client/scss/core.scss
+++ b/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';
diff --git a/client/src/tokens/objectStyles.js b/client/src/tokens/objectStyles.js
index 795eb1e5cc..43d5f02b1c 100644
--- a/client/src/tokens/objectStyles.js
+++ b/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%',
 };
 
diff --git a/client/src/tokens/spacing.js b/client/src/tokens/spacing.js
index 5dbd5cea02..e8a048acc7 100644
--- a/client/src/tokens/spacing.js
+++ b/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',
diff --git a/wagtail/admin/templates/wagtailadmin/shared/active_filters.html b/wagtail/admin/templates/wagtailadmin/shared/active_filters.html
index 98f2c1cc6e..323d4a4717 100644
--- a/wagtail/admin/templates/wagtailadmin/shared/active_filters.html
+++ b/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>
diff --git a/wagtail/admin/tests/pages/test_explorer_view.py b/wagtail/admin/tests/pages/test_explorer_view.py
index c173891791..0fb908c2c8 100644
--- a/wagtail/admin/tests/pages/test_explorer_view.py
+++ b/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):