Tidy up the page chooser breadcrumb

Was funny before, but went haywire after https://github.com/wagtail/wagtail/pull/7783

wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss

@@ -18,18 +18,34 @@
 
     .modal .breadcrumb {
         margin: 0;
+        padding-left: 0.5em;
         background-color: transparent;
 
+        .breadcrumb-item {
+            padding-left: 0;
+            padding-right: 0;
+        }
+
         a {
             color: $color-grey-2;
+            padding-left: 0.5em;
+            padding-right: 0.5em;
+
+            &:hover {
+                color: $color-white;
+            }
         }
 
         li:hover {
-            background-color: $color-grey-4;
+            background-color: transparent;
         }
 
-        .home {
+        .home_icon {
-            padding-left: 0;
+            margin-left: 0;
+        }
+
+        .status-tag {
+            margin-bottom: 0;
         }
     }
 

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

@@ -3,10 +3,12 @@
 <ul class="breadcrumb">
     {% for page in page.get_ancestors.specific %}
         {% if page.is_root %}
-            {% if show_locale_labels %}<li><span class="status-tag primary">{{ page.locale.get_display_name }}</span></li>{% endif %}
+            {% trans 'Home' as home %}
-            <li class="home"><a href="{% url 'wagtailadmin_choose_page_child' page.id %}{% querystring p=None %}" class="navigate-pages icon icon-home text-replace">{% trans 'Home' %}</a></li>
+            <li class="breadcrumb-item home"><a href="{% url 'wagtailadmin_choose_page_child' page.id %}{% querystring p=None %}" class="breadcrumb-link navigate-pages">{% icon name="home" class_name="home_icon" title=home %}{% icon name="arrow-right" class_name="arrow_right_icon" %}</a></li>
+        {% elif forloop.last %}
+            <li class="breadcrumb-item"><a href="{% url 'wagtailadmin_choose_page_child' page.id %}{% querystring p=None %}" class="breadcrumb-link navigate-pages">{{ page.get_admin_display_title }}</a></li>
         {% else %}
-            <li><a href="{% url 'wagtailadmin_choose_page_child' page.id %}{% querystring p=None %}" class="navigate-pages">{{ page.get_admin_display_title }}</a></li>
+            <li class="breadcrumb-item"><a href="{% url 'wagtailadmin_choose_page_child' page.id %}{% querystring p=None %}" class="breadcrumb-link navigate-pages"><span class="title">{{ page.get_admin_display_title }}</span>{% icon name="arrow-right" class_name="arrow_right_icon" %}</a></li>
         {% endif %}
     {% endfor %}
 </ul>

wagtail/admin/tests/test_page_chooser.py

@@ -245,11 +245,20 @@ class TestChooserBrowseChild(TestCase, WagtailTestUtils):
         self.assertTemplateUsed(response, 'wagtailadmin/chooser/browse.html')
 
         # Look for a link element in the breadcrumbs with the admin title
+        expected = """
+            <li class="breadcrumb-item">
+                <a href="/admin/choose-page/{page_id}/?" class="breadcrumb-link navigate-pages">{page_title}
+                    <svg class="icon icon-arrow-right arrow_right_icon" aria-hidden="true" focusable="false">
+                        <use href="#icon-arrow-right"></use>
+                    </svg>
+                </a>
+            </li>
+        """.format(
+            page_id=self.child_page.id,
+            page_title="foobarbaz (simple page)",
+        )
         self.assertTagInHTML(
-            '<li><a href="/admin/choose-page/{page_id}/?" class="navigate-pages">{page_title}</a></li>'.format(
+            expected,
-                page_id=self.child_page.id,
-                page_title="foobarbaz (simple page)",
-            ),
             response.json().get('html')
         )