Add support for SVG icons to SearchArea subclasses and register_admin_search_area (#6493)

CHANGELOG.txt

@@ -13,6 +13,7 @@ Changelog
  * Add `PageQueryset.defer_streamfields()` (Andy Babic)
  * Utilize `PageQuerySet.defer_streamfields()` to improve efficiency in a few key places (Andy Babic)
  * Switch ``register_setting``, ``register_settings_menu_item`` to use SVG icons (Thibaud Colas)
+ * Add support to SVG icons for ``SearchArea`` subclasses in ``register_admin_search_area`` (Thibaud Colas)
  * Fix: StreamField required status is now consistently handled by the `blank` keyword argument (Matt Westcott)
  * Fix: Show 'required' asterisks for blocks inside required StreamFields (Matt Westcott)
  * Fix: Make image chooser "Select format" fields translatable (Helen Chapman, Thibaud Colas)

client/scss/components/_listing.scss

@@ -580,6 +580,15 @@ table.listing {
         padding: 0.8em;
         float: left;
     }
+
+    &__icon {
+        width: 1em;
+        height: 1em;
+        margin-right: 0.2em;
+        vertical-align: middle;
+        position: relative;
+        top: -1px;
+    }
 }
 
 

docs/reference/hooks.rst

@@ -288,7 +288,8 @@ Hooks for building new areas of the admin interface (alongside pages, images, do
   :label: text displayed in the "Other Searches" option box.
   :name: an internal name used to identify the search option; defaults to the slugified form of the label.
   :url: the URL of the target search page.
-  :classnames: additional CSS classnames applied to the link, used to give it an icon.
+  :classnames: arbitrary CSS classnames applied to the link
+  :icon_name: icon to display next to the label.
   :attrs: additional HTML attributes to apply to the link.
   :order: an integer which determines the item's position in the list of options.
 
@@ -307,7 +308,7 @@ Hooks for building new areas of the admin interface (alongside pages, images, do
 
     @hooks.register('register_admin_search_area')
     def register_frank_search_area():
-        return SearchArea('Frank', reverse('frank'), classnames='icon icon-folder-inverse', order=10000)
+        return SearchArea('Frank', reverse('frank'), icon_name='folder-inverse', order=10000)
 
 
 .. _register_permissions:

docs/releases/2.13.rst

@@ -22,6 +22,7 @@ Other features
 * Update default attribute copying behaviour of ``Page.get_specific()`` and added the ``copy_attrs_exclude`` option (Andy Babic)
 * Update ``PageQueryset.specific(defer=True)`` to only perform a single database query (Andy Babic)
 * Switched ``register_setting``, ``register_settings_menu_item`` to use SVG icons (Thibaud Colas)
+* Add support to SVG icons for ``SearchArea`` subclasses in ``register_admin_search_area`` (Thibaud Colas)
 
 Bug fixes
 ~~~~~~~~~

wagtail/admin/search.py

@@ -13,10 +13,11 @@ from wagtail.core import hooks
 class SearchArea(metaclass=MediaDefiningClass):
     template = 'wagtailadmin/shared/search_area.html'
 
-    def __init__(self, label, url, name=None, classnames='', attrs=None, order=1000):
+    def __init__(self, label, url, name=None, classnames='', icon_name='', attrs=None, order=1000):
         self.label = label
         self.url = url
         self.classnames = classnames
+        self.icon_name = icon_name
         self.name = (name or slugify(str(label)))
         self.order = order
 
@@ -49,6 +50,7 @@ class SearchArea(metaclass=MediaDefiningClass):
             'name': self.name,
             'url': self.url,
             'classnames': self.classnames,
+            'icon_name': self.icon_name,
             'attr_string': self.attr_string,
             'label': self.label,
             'active': self.is_active(request, current),

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

@@ -1,3 +1,4 @@
+{% load wagtailadmin_tags %}
 <li>
-    <a href="{{ url }}?q={{ query_string|urlencode }}" class="{{ classnames }}{% if active %} nolink{% endif %}"{{ attr_string }}>{{ label }}</a>
+    <a href="{{ url }}?q={{ query_string|urlencode }}" class="{{ classnames }}{% if active %} nolink{% endif %}"{{ attr_string }}>{% if icon_name %}{% icon name=icon_name class_name="filter-options__icon" %}{% endif %}{{ label }}</a>
 </li>

wagtail/admin/tests/test_admin_search.py

@@ -34,23 +34,24 @@ class TestSearchAreas(BaseSearchAreaTestCase):
     def test_other_searches(self):
         search_url = reverse('wagtailadmin_pages:search')
         query = "Hello"
-        base_css = "icon icon-custom"
-        test_string = '<a href="/customsearch/?q=%s" class="%s" is-custom="true">My Search</a>'
+        base_css = "search--custom-class"
+        icon = '<svg class="icon icon-custom filter-options__icon" aria-hidden="true" focusable="false"><use href="#icon-custom"></use></svg>'
+        test_string = '<a href="/customsearch/?q=%s" class="%s" is-custom="true">%sMy Search</a>'
         # Testing the option link exists
         response = self.client.get(search_url, {'q': query})
         self.assertEqual(response.status_code, 200)
         self.assertTemplateUsed(response, 'wagtailadmin/pages/search.html')
         self.assertTemplateUsed(response, 'wagtailadmin/shared/search_area.html')
         self.assertTemplateUsed(response, 'wagtailadmin/shared/search_other.html')
-        self.assertContains(response, test_string % (query, base_css), html=True)
+        self.assertContains(response, test_string % (query, base_css, icon), html=True)
 
         # Testing is_shown
         response = self.client.get(search_url, {'q': query, 'hide-option': "true"})
-        self.assertNotContains(response, test_string % (query, base_css), status_code=200, html=True)
+        self.assertNotContains(response, test_string % (query, base_css, icon), status_code=200, html=True)
 
         # Testing is_active
         response = self.client.get(search_url, {'q': query, 'active-option': "true"})
-        self.assertContains(response, test_string % (query, base_css + " nolink"), status_code=200, html=True)
+        self.assertContains(response, test_string % (query, base_css + " nolink", icon), status_code=200, html=True)
 
     def test_menu_search(self):
         rendered = self.menu_search()
@@ -102,7 +103,7 @@ class TestSearchAreaNoPagePermissions(BaseSearchAreaTestCase):
         self.assertIn('action="/customsearch/"', rendered)
 
     def test_search_other(self):
-        """The pages search link should be hidden."""
+        """The pages search link should be hidden, custom search should be visible."""
         rendered = self.search_other()
         self.assertNotIn(reverse('wagtailadmin_pages:search'), rendered)
         self.assertIn('/customsearch/', rendered)

wagtail/admin/wagtail_hooks.py

@@ -79,7 +79,7 @@ class PageSearchArea(SearchArea):
         super().__init__(
             _('Pages'), reverse('wagtailadmin_pages:search'),
             name='pages',
-            classnames='icon icon-folder-open-inverse',
+            icon_name='folder-open-inverse',
             order=100)
 
     def is_shown(self, request):

wagtail/documents/wagtail_hooks.py

@@ -134,7 +134,7 @@ def register_documents_search_area():
     return DocsSearchArea(
         _('Documents'), reverse('wagtaildocs:index'),
         name='documents',
-        classnames='icon icon-doc-full-inverse',
+        icon_name='doc-full-inverse',
         order=400)
 
 

wagtail/images/wagtail_hooks.py

@@ -159,7 +159,7 @@ def register_images_search_area():
     return ImagesSearchArea(
         _('Images'), reverse('wagtailimages:index'),
         name='images',
-        classnames='icon icon-image',
+        icon_name='image',
         order=200)
 
 

wagtail/tests/testapp/wagtail_hooks.py

@@ -69,7 +69,8 @@ def register_custom_search_area():
     return MyCustomSearchArea(
         'My Search',
         '/customsearch/',
-        classnames='icon icon-custom',
+        classnames='search--custom-class',
+        icon_name='custom',
         attrs={'is-custom': 'true'},
         order=10000)
 

wagtail/users/wagtail_hooks.py

@@ -97,7 +97,7 @@ def register_users_search_area():
     return UsersSearchArea(
         _('Users'), reverse('wagtailusers_users:index'),
         name='users',
-        classnames='icon icon-user',
+        icon_name='user',
         order=600)