Choosers: refactor to use SVG icons (#6998)

* Choosers: refactor to use SVG icons

Refactored non-deprecated choosers to use SVG icons. Custom choosers can
also supply their own svg icons using the `chosen_icon` and
`unchosen_icon` blocks.

We are keeping the relevant icon font css for custom choosers around to
prevent breaking existing custom choosers.

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

CHANGELOG.txt

@@ -23,6 +23,7 @@ Changelog
  * Allow `{% pageurl %}` fallback to be a direct URL or an object with a `get_absolute_url` method (Andy Babic)
  * Add support for exporting redirects (Martin Sandström)
  * Support slicing on StreamField / StreamBlock values (Matt Westcott)
+ * Switch Wagtail choosers to use SVG icons instead of font icon (Storm Heg)
  * 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/_chooser.scss

@@ -26,6 +26,14 @@ overriden here? hmm.
     .chosen {
         position: relative;
 
+        .icon {
+            color: $color-grey-3;
+            @include svg-icon(2.5em);
+            vertical-align: middle;
+            margin-right: 0.625rem;
+        }
+
+        // TODO: [icon-font] remove when the Wagtail icon font is removed
         &:before {
             vertical-align: middle;
             font-family: wagtail;
@@ -81,46 +89,25 @@ overriden here? hmm.
     }
 }
 
-.page-chooser {
+// TODO: [icon-font] remove when the Wagtail icon font is removed
+.page-chooser,
+.snippet-chooser,
+.document-chooser,
+.image-chooser {
     .unchosen,
     .chosen {
         &:before {
-            content: map-get($icons, 'doc-empty-inverse');
-        }
-    }
-}
-
-.snippet-chooser {
-    .unchosen,
-    .chosen {
-        &:before {
-            content: map-get($icons, 'snippet');
-        }
-    }
-}
-
-.document-chooser {
-    .unchosen,
-    .chosen {
-        &:before {
-            content: map-get($icons, 'doc-full-inverse');
+            display: none;
         }
     }
 }
 
 .image-chooser {
-    .unchosen,
-    .chosen {
-        &:before {
-            content: map-get($icons, 'image');
-        }
-    }
-
     .chosen {
         padding-left: $thumbnail-width;
 
         &:before {
-            content: '';
+            display: inline-block;
         }
 
         .preview-image {

docs/releases/2.13.rst

@@ -46,6 +46,7 @@ Other features
 * Allow ``{% pageurl %}`` fallback to be a direct URL or an object with a ``get_absolute_url`` method (Andy Babic)
 * Add support for exporting redirects (Martin Sandström)
 * Support slicing on StreamField / StreamBlock values (Matt Westcott)
+* Switch Wagtail choosers to use SVG icons instead of font icon (Storm Heg)
 
 
 Bug fixes

wagtail/admin/templates/wagtailadmin/widgets/chooser.html

@@ -5,10 +5,10 @@
     Any element with the 'action-choose' class will open the page chooser modal
     when clicked.
 {% endcomment %}
-
 <div id="{{ attrs.id }}-chooser" class="chooser {% block chooser_class %}page-chooser{% endblock %} {% if not value %}blank{% endif %}" {% block chooser_attributes %}{% endblock %}>
 
     <div class="chosen">
+        {% block chosen_icon %}{% endblock chosen_icon %}
         {% block chosen_state_view %}
             <span class="title">{{ display_title }}</span>
         {% endblock %}
@@ -29,6 +29,7 @@
     </div>
 
     <div class="unchosen">
+        {% block unchosen_icon %}{% endblock unchosen_icon %}
         <button type="button" class="button action-choose button-small button-secondary">{{ widget.choose_one_text }}</button>
     </div>
 

wagtail/admin/templates/wagtailadmin/widgets/page_chooser.html

@@ -1,2 +1,6 @@
 {% extends "wagtailadmin/widgets/chooser.html" %}
+{% load wagtailadmin_tags %}
+
+{% block unchosen_icon %}{% icon name="doc-empty-inverse" %}{% endblock unchosen_icon %}
+{% block chosen_icon %}{% icon name="doc-empty-inverse" %}{% endblock chosen_icon %}
 {% block chooser_attributes %}data-chooser-url="{% url "wagtailadmin_choose_page" %}"{% endblock %}

wagtail/documents/templates/wagtaildocs/widgets/document_chooser.html

@@ -1,3 +1,7 @@
 {% extends "wagtailadmin/widgets/chooser.html" %}
+{% load wagtailadmin_tags %}
+
+{% block unchosen_icon %}{% icon name="doc-full-inverse" %}{% endblock unchosen_icon %}
+{% block chosen_icon %}{% icon name="doc-full-inverse" %}{% endblock chosen_icon %}
 {% block chooser_class %}document-chooser{% endblock %}
 {% block chooser_attributes %}data-chooser-url="{% url "wagtaildocs:chooser" %}"{% endblock %}

wagtail/images/templates/wagtailimages/widgets/image_chooser.html

@@ -1,6 +1,9 @@
 {% extends "wagtailadmin/widgets/chooser.html" %}
-{% load wagtailimages_tags %}
+{% load wagtailadmin_tags wagtailimages_tags %}
 
+{% block unchosen_icon %}{% icon name="image" %}{% endblock unchosen_icon %}
+{# Image chooser doesn't have a chosen icon. It shows an preview of the chosen image instead .#}
+{% block chosen_icon %}{% endblock chosen_icon %}
 {% block chooser_class %}image-chooser{% endblock %}
 {% block chooser_attributes %}data-chooser-url="{% url "wagtailimages:chooser" %}"{% endblock %}
 

wagtail/snippets/templates/wagtailsnippets/widgets/snippet_chooser.html

@@ -1,5 +1,7 @@
 {% extends "wagtailadmin/widgets/chooser.html" %}
 {% load wagtailadmin_tags %}
 
+{% block unchosen_icon %}{% icon name="snippet" %}{% endblock unchosen_icon %}
+{% block chosen_icon %}{% icon name="snippet" %}{% endblock chosen_icon %}
 {% block chooser_class %}snippet-chooser{% endblock %}
 {% block chooser_attributes %}data-chooser-url="{% url 'wagtailsnippets:choose_generic' %}"{% endblock %}