Adopt w-status instead of status for classes

- Fixes #10244

CHANGELOG.txt

@@ -93,6 +93,7 @@ Changelog
  * Maintenance: Remove unused snippets delete-multiple view (Sage Abdullah)
  * Maintenance: Improve performance of determining live page URLs across the admin interface using `pageurl` template tag (Satvik Vashisht)
  * Maintenance: Migrate `window.initSlugAutoPopulate` behaviour to a Stimulus Controller `w-sync` (Loveth Omokaro)
+ * Maintenance: Rename `status` classes to `w-status` to align with preferred CSS class naming conventions (Mansi Gundre)
 
 
 4.2.2 (xx.xx.xxxx) - IN DEVELOPMENT

CONTRIBUTORS.rst

@@ -703,6 +703,7 @@ Contributors
 * George Sakkis
 * Mehul Aggarwal
 * Babitha Kumari
+* Mansi Gundre
 
 Translators
 ===========

client/scss/components/_listing.scss

@@ -117,7 +117,7 @@ ul.listing {
         display: inline-block;
       }
 
-      .status-tag--label {
+      .w-status--label {
         border: 1px solid;
       }
     }
@@ -141,7 +141,7 @@ ul.listing {
         color: $color-white;
       }
 
-      .status-tag {
+      .w-status {
         border-color: $color-white;
       }
     }
@@ -162,7 +162,7 @@ ul.listing {
         cursor: not-allowed;
       }
 
-      .status-tag {
+      .w-status {
         border-color: inherit;
       }
     }
@@ -245,7 +245,7 @@ ul.listing {
       margin-inline-end: 2.5em;
     }
 
-    .status-tag {
+    .w-status {
       margin: 0;
     }
   }
@@ -387,7 +387,7 @@ ul.listing {
     opacity: 0.7;
   }
 
-  .status-tag {
+  .w-status {
     margin: 0;
     margin-inline: 0;
   }

client/scss/components/_status-tag.scss

@@ -1,6 +1,6 @@
 @use 'sass:color';
 
-.status-tag {
+.w-status {
   border-radius: 2px;
   text-align: center;
   display: inline-block;
@@ -15,13 +15,14 @@
   margin: 0 0.5em 0.5em;
   background: $color-white url('#{$images-root}bg-dark-diag.svg');
 
-  &.primary {
+  &.w-status--primary {
     color: $color-grey-2;
     border: 1px solid $color-grey-2;
     background: $color-white;
   }
 
-  &.disabled {
+  &.w-status--disabled,
+  &[disabled] {
     pointer-events: none;
   }
 
@@ -33,18 +34,18 @@
   }
 }
 
-.listing .index .status-tag--label {
+.listing .index .w-status--label {
   border: 1px solid;
 }
 
-button.status-tag:hover,
-a.status-tag:hover,
-a.status-tag.primary:hover {
+button.w-status:hover,
+a.w-status:hover,
+a.w-status.w-status--primary:hover {
   border-color: $color-teal;
   color: $color-teal;
 }
 
-button.status-tag:hover {
+button.w-status:hover {
   border-color: $color-teal-dark;
   background-color: $color-teal-darker;
   color: $color-white;

client/scss/layouts/_report.scss

@@ -8,7 +8,7 @@
     &--text {
       margin: 0 theme('spacing.[1.5]') theme('spacing.[1.5]') 0;
 
-      + .status-tag {
+      + .w-status {
         margin-inline-start: 0;
       }
     }

docs/releases/5.0.md

@@ -117,6 +117,7 @@ Support for adding custom validation logic to StreamField blocks has been formal
  * Remove unused snippets delete-multiple view (Sage Abdullah)
  * Improve performance of determining live page URLs across the admin interface using [`pageurl` template tag](performance_page_urls) (Satvik Vashisht)
  * Migrate `window.initSlugAutoPopulate` behaviour to a Stimulus Controller `w-sync` (Loveth Omokaro)
+ * Rename `status` classes to `w-status` to align with preferred CSS class naming conventions (Mansi Gundre)
 
 
 ## Upgrade considerations
@@ -326,3 +327,22 @@ The ability to remove multiple snippet instances from the `DeleteView` and the u
 The delete bulk action view now also calls the `{before,after}_delete_snippet` hooks, in addition to the `{before,after}_bulk_action` hooks.
 
 If you have customised the `IndexView` and/or `DeleteView` views in a `SnippetViewSet` subclass, make sure that the `delete_multiple_url_name` attribute is renamed to `delete_url_name`.
+
+### `status` classes are now `w-status`
+
+Please update any custom styling or usage within the admin when working with status tags to the following new classes.
+
+| Old                 | New                  |
+| ------------------- | -------------------- |
+| `status-tag`        | `w-status`           |
+| `primary`           | `w-status--primary`  |
+| `disabled`          | `w-status--disabled` |
+| `status-tag--label` | `w-status--label`    |
+
+Note that a new template tag has been built for usage within the admin that may make it easier to generate status tags.
+
+```html+django
+{% load wagtailadmin_tags %}
+{% status "live" url="/test-url/" title=trans_title hidden_label=trans_hidden_label classname="w-status--primary" attrs='target="_blank" rel="noreferrer"' %}
+{% status status_label classname="w-status--primary" %}
+```

wagtail/admin/templates/wagtailadmin/chooser/tables/page_title_cell.html

@@ -12,7 +12,7 @@
             {{ value }}
         {% endif %}
         {% if column.show_locale_labels and page.depth == 2 %}
-            {% status page.locale.get_display_name classname="status-tag--label" %}
+            {% status page.locale.get_display_name classname="w-status--label" %}
         {% endif %}
 
         {% include "wagtailadmin/pages/listing/_privacy_indicator.html" with page=page %}

wagtail/admin/templates/wagtailadmin/chooser/tables/parent_page_cell.html

@@ -2,6 +2,6 @@
 <td {% if column.classname %}class="{{ column.classname }}"{% endif %}>
     {% if value %}
         <a href="{% url 'wagtailadmin_choose_page_child' value.id %}" class="navigate-parent">{{ value.get_admin_display_title }}</a>
-        {% if column.show_locale_labels %}{% status value.locale.get_display_name classname="status-tag--label" %}{% endif %}
+        {% if column.show_locale_labels %}{% status value.locale.get_display_name classname="w-status--label" %}{% endif %}
     {% endif %}
 </td>

wagtail/admin/templates/wagtailadmin/home/locked_pages.html

@@ -25,7 +25,7 @@
                                 {% i18n_enabled as show_locale_labels %}
                                 {% if show_locale_labels and page.locale_id %}
                                     {% locale_label_from_id page.locale_id as locale_label %}
-                                    {% status locale_label classname="status-tag--label" %}
+                                    {% status locale_label classname="w-status--label" %}
                                 {% endif %}
                                 {% include "wagtailadmin/pages/listing/_privacy_indicator.html" with page=page %}
                                 {% include "wagtailadmin/pages/listing/_locked_indicator.html" with page=page %}

wagtail/admin/templates/wagtailadmin/home/pages_for_moderation.html

@@ -32,7 +32,7 @@
                                 {% i18n_enabled as show_locale_labels %}
                                 {% if show_locale_labels and revision.content_object.locale_id %}
                                     {% locale_label_from_id revision.content_object.locale_id as locale_label %}
-                                    {% status locale_label classname="status-tag--label" %}
+                                    {% status locale_label classname="w-status--label" %}
                                 {% endif %}
                                 {% include "wagtailadmin/pages/listing/_privacy_indicator.html" with page=revision.content_object %}
                                 {% include "wagtailadmin/pages/listing/_locked_indicator.html" with page=revision.content_object %}

wagtail/admin/templates/wagtailadmin/home/recent_edits.html

@@ -25,7 +25,7 @@
                                 {% i18n_enabled as show_locale_labels %}
                                 {% if show_locale_labels and page.locale_id %}
                                     {% locale_label_from_id page.locale_id as locale_label %}
-                                    {% status locale_label classname="status-tag--label" %}
+                                    {% status locale_label classname="w-status--label" %}
                                 {% endif %}
                                 {% include "wagtailadmin/pages/listing/_privacy_indicator.html" with page=page %}
                                 {% include "wagtailadmin/pages/listing/_locked_indicator.html" with page=page %}

wagtail/admin/templates/wagtailadmin/home/user_objects_in_workflow_moderation.html

@@ -35,7 +35,7 @@
                                     {% i18n_enabled as show_locale_labels %}
                                     {% if show_locale_labels and obj.locale_id %}
                                         {% locale_label_from_id obj.locale_id as locale_label %}
-                                        {% status locale_label classname="status-tag--label" %}
+                                        {% status locale_label classname="w-status--label" %}
                                     {% endif %}
                                     {% include "wagtailadmin/pages/listing/_privacy_indicator.html" with page=obj %}
                                     {% include "wagtailadmin/pages/listing/_locked_indicator.html" with page=obj %}

wagtail/admin/templates/wagtailadmin/home/workflow_objects_to_moderate.html

@@ -35,7 +35,7 @@
                                     {% i18n_enabled as show_locale_labels %}
                                     {% if show_locale_labels and obj.locale_id %}
                                         {% locale_label_from_id obj.locale_id as locale_label %}
-                                        {% status locale_label classname="status-tag--label" %}
+                                        {% status locale_label classname="w-status--label" %}
                                     {% endif %}
                                     {% include "wagtailadmin/pages/listing/_privacy_indicator.html" with page=obj %}
                                     {% include "wagtailadmin/pages/listing/_locked_indicator.html" with page=obj %}

wagtail/admin/templates/wagtailadmin/pages/history.html

@@ -36,9 +36,9 @@
                             {% endif %}
                             {% if entry.revision %}
                                 {% if entry.action == 'wagtail.publish' %}
-                                    {% if entry.revision_id == page.live_revision_id %}{% trans 'Live version' as status_label %}{% status status_label classname="primary" %}{% endif %}
+                                    {% if entry.revision_id == page.live_revision_id %}{% trans 'Live version' as status_label %}{% status status_label classname="w-status--primary" %}{% endif %}
                                 {% elif entry.content_changed %}
-                                    {% if entry.revision == page_latest_revision %}{% trans 'Current draft' as status_label %}{% status status_label classname="primary" %}{% endif %}
+                                    {% if entry.revision == page_latest_revision %}{% trans 'Current draft' as status_label %}{% status status_label classname="w-status--primary" %}{% endif %}
                                     {% include "wagtailadmin/pages/revisions/_actions.html" with revision=entry.revision %}
                                 {% endif %}
                             {% endif %}

wagtail/admin/templates/wagtailadmin/pages/listing/_page_title_explore.html

@@ -16,7 +16,7 @@
     {% endif %}
 
     {% if show_locale_labels %}
-        {% status page.locale.get_display_name classname="status-tag--label" %}
+        {% status page.locale.get_display_name classname="w-status--label" %}
     {% endif %}
 
     {% include "wagtailadmin/pages/listing/_privacy_indicator.html" with page=page %}

wagtail/admin/templates/wagtailadmin/reports/aging_pages.html

@@ -31,7 +31,7 @@
                             {% i18n_enabled as show_locale_labels %}
                             {% if show_locale_labels %}
                                 {% locale_label_from_id page.locale_id as locale_label %}
-                                {% status locale_label classname="status-tag--label" %}
+                                {% status locale_label classname="w-status--label" %}
                             {% endif %}
                         </td>
                         <td class="status" valign="top">

wagtail/admin/templates/wagtailadmin/reports/workflow.html

@@ -46,13 +46,13 @@
                             {% i18n_enabled as show_locale_labels %}
                             {% if show_locale_labels and workflow_state.content_object.locale_id %}
                                 {% locale_label_from_id workflow_state.content_object.locale_id as locale_label %}
-                                {% status locale_label classname="status-tag--label" %}
+                                {% status locale_label classname="w-status--label" %}
                             {% endif %}
                         </td>
                         <td>
                             {% admin_url_name workflow_state.content_object 'workflow_history_detail' as workflow_history_detail_url_name %}
                             {% url workflow_history_detail_url_name workflow_state.content_object.pk|admin_urlquote workflow_state.pk as status_url %}
-                            {% status workflow_state.get_status_display url=status_url classname="primary" %}
+                            {% status workflow_state.get_status_display url=status_url classname="w-status--primary" %}
                         </td>
                         <td>
                             <h2>{{ workflow_name }}</h2>

wagtail/admin/templates/wagtailadmin/reports/workflow_tasks.html

@@ -44,12 +44,12 @@
                                 {% i18n_enabled as show_locale_labels %}
                                 {% if show_locale_labels and object.locale_id %}
                                     {% locale_label_from_id object.locale_id as locale_label %}
-                                    {% status locale_label classname="status-tag--label" %}
+                                    {% status locale_label classname="w-status--label" %}
                                 {% endif %}
                             {% endwith %}
                         </td>
                         <td>
-                            {% status task_state.get_status_display classname="primary" %}
+                            {% status task_state.get_status_display classname="w-status--primary" %}
                         </td>
                         <td>{{ task_state.started_at }}</td>
                         <td>{{ task_state.finished_at }}</td>

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

@@ -4,9 +4,9 @@
 {% if page.live %}
     {% pageurl page as page_url %}
     {% if page_url is not None %}
-        {% status page.status_string url=page_url title=_("Visit the live page") hidden_label=status_hidden_label classname="primary" attrs='target="_blank" rel="noreferrer"' %}
+        {% status page.status_string url=page_url title=_("Visit the live page") hidden_label=status_hidden_label classname="w-status--primary" attrs='target="_blank" rel="noreferrer"' %}
     {% else %}
-        {% status page.status_string hidden_label=status_hidden_label classname="primary" %}
+        {% status page.status_string hidden_label=status_hidden_label classname="w-status--primary" %}
     {% endif %}
 {% else %}
     {% status page.status_string hidden_label=status_hidden_label %}

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

@@ -1,6 +1,6 @@
 {% load wagtailadmin_tags %}
 {% if url %}
-    <a href="{{ url }}" class="{% classnames 'status-tag' classname %}"{% if title %} title="{{ title }}" {% endif %}{% if attrs %} {{ attrs }}{% endif %}>
+    <a href="{{ url }}" class="{% classnames 'w-status' classname %}"{% if title %} title="{{ title }}" {% endif %}{% if attrs %} {{ attrs }}{% endif %}>
         {% if hidden_label %}
             <span class="visuallyhidden">{{ hidden_label }}</span> {% if label %}{{ label }}{% endif %}
         {% else %}
@@ -8,7 +8,7 @@
         {% endif %}
     </a>
 {% else %}
-    <span class="{% classnames 'status-tag' classname %}"{% if attrs %} {{ attrs }}{% endif %}>
+    <span class="{% classnames 'w-status' classname %}"{% if attrs %} {{ attrs }}{% endif %}>
         {% if hidden_label %}<span class="visuallyhidden">{{ hidden_label }}</span>{% endif %}
         {% if label %}{{ label }}{% endif %}
     </span>

wagtail/admin/templates/wagtailadmin/shared/status_tag.stories.tsx

@@ -10,7 +10,7 @@ export default {
   argTypes: {
     ...argTypes,
     classname: {
-      options: [null, 'primary', 'status-tag--label'],
+      options: [null, 'w-status--primary', 'w-status--label'],
     },
     url: {
       options: [null, 'https://wagtail.org/'],

wagtail/admin/templates/wagtailadmin/shared/workflow_history/detail.html

@@ -20,7 +20,7 @@
     </p>
 
     <p>
-        {% fragment as status_tag_variable %}{% status workflow_state.get_status_display classname="primary" %}{% endfragment %}
+        {% fragment as status_tag_variable %}{% status workflow_state.get_status_display classname="w-status--primary" %}{% endfragment %}
         {% blocktrans trimmed with status_tag_variable as status %}Status {{ status }}{% endblocktrans %}
     </p>
 
@@ -71,7 +71,7 @@
                                 {% for task_state in task_states %}
                                     <td>
                                         {% if task_state.status == 'approved' or task_state.status == 'rejected' %}
-                                            {% fragment as status_action %}{% status task_state.get_status_display classname="primary" %}{% endfragment %}
+                                            {% fragment as status_action %}{% status task_state.get_status_display classname="w-status--primary" %}{% endfragment %}
                                             {% if task_state.finished_by %}
                                                 {% blocktrans trimmed with action=status_action|safe who=task_state.finished_by|user_display_name at=task_state.finished_at %}
                                                     {{ action }} by <b>{{ who }}</b> at <b>{{ at }}</b>
@@ -82,7 +82,7 @@
                                                 {% endblocktrans %}
                                             {% endif %}
                                         {% else %}
-                                            {% status task_state.get_status_display classname="primary" %}
+                                            {% status task_state.get_status_display classname="w-status--primary" %}
                                         {% endif %}
                                         {% if task_state.specific.get_comment %}
                                             <p>{% trans 'with comment:' %} <b>"{{ task_state.specific.get_comment }}"</b></p>
@@ -110,7 +110,7 @@
                                         <b>{% trans "Workflow started" %}</b>
                                     {% elif timeline_item.action == 'workflow_completed' %}
                                         <b>{% trans "Workflow completed" %}</b>
-                                        {% status timeline_item.workflow_state.get_status_display classname="primary" %}
+                                        {% status timeline_item.workflow_state.get_status_display classname="w-status--primary" %}
                                     {% elif timeline_item.action == 'edited' %}
                                         {% trans "Edited" as action %}
                                         {% if revision.user %}
@@ -124,12 +124,12 @@
                                         <b>{{ timeline_item.task_state.task }}</b>
 
                                         {% if timeline_item.task_state.finished_by %}
-                                            {% fragment as status_action %}{% status timeline_item.task_state.get_status_display classname="primary" %}{% endfragment %}
+                                            {% fragment as status_action %}{% status timeline_item.task_state.get_status_display classname="w-status--primary" %}{% endfragment %}
                                             {% blocktrans trimmed with action=status_action|safe who=timeline_item.task_state.finished_by|user_display_name %}
                                                 {{ action }} by <b>{{ who }}</b>
                                             {% endblocktrans %}
                                         {% else %}
-                                            {% status timeline_item.task_state.get_status_display classname="primary" %}
+                                            {% status timeline_item.task_state.get_status_display classname="w-status--primary" %}
                                         {% endif %}
 
                                         {% if timeline_item.task_state.specific.get_comment %}

wagtail/admin/templates/wagtailadmin/shared/workflow_history/list.html

@@ -24,7 +24,7 @@
                 <tr>
                     <td>
                         {% url workflow_history_detail_url_name object.pk|admin_urlquote workflow_state.id as status_url %}
-                        {% status workflow_state.get_status_display url=status_url classname="primary" %}
+                        {% status workflow_state.get_status_display url=status_url classname="w-status--primary" %}
                     </td>
                     <td class="title">
                         <h2>

wagtail/admin/templates/wagtailadmin/tables/status_flag_cell.html

@@ -2,8 +2,8 @@
 
 <td {% if column.classname %}class="{{ column.classname }}"{% endif %}>
     {% if value %}
-        {% if column.true_label %}{% status column.true_label classname="primary" %}{% endif %}
+        {% if column.true_label %}{% status column.true_label classname="w-status--primary" %}{% endif %}
     {% else %}
-        {% if column.false_label %}{% status column.false_label classname="primary" %}{% endif %}
+        {% if column.false_label %}{% status column.false_label classname="w-status--primary" %}{% endif %}
     {% endif %}
 </td>

wagtail/admin/templates/wagtailadmin/tables/status_tag_cell.html

@@ -1,4 +1,4 @@
 {% load wagtailadmin_tags %}
 <td {% if column.classname %}class="{{ column.classname }}"{% endif %}>
-    {% status value classname=primary|yesno:"primary," %}
+    {% status value classname=primary|yesno:"w-status--primary," %}
 </td>

wagtail/admin/templatetags/wagtailadmin_tags.py

@@ -794,7 +794,7 @@ def status(
 
     Usage:
 
-        {% status label="live" url="/test/" title="title" hidden_label="current status:" classname="primary" %}
+        {% status label="live" url="/test/" title="title" hidden_label="current status:" classname="w-status--primary" %}
 
     :param label: the status test, (string)
     :param classname: defaults to 'status-tag' if not provided (string)

wagtail/admin/tests/test_templatetags.py

@@ -549,18 +549,18 @@ class StatusTagTest(TestCase):
     def test_render_block_component_span_variations(self):
         template = """
             {% load wagtailadmin_tags i18n %}
-            {% status "live" classname="primary" %}
+            {% status "live" classname="w-status--primary" %}
             {% status "live" %}
             {% trans "hidden translated label" as trans_hidden_label %}
-            {% status "live" hidden_label=trans_hidden_label classname="primary" %}
+            {% status "live" hidden_label=trans_hidden_label classname="w-status--primary" %}
             {% status %}
         """
 
         expected = """
-            <span class="status-tag primary">live</span>
-            <span class="status-tag">live</span>
-            <span class="status-tag primary"><span class="visuallyhidden">hidden translated label</span>live</span>
-            <span class="status-tag"></span>
+            <span class="w-status w-status--primary">live</span>
+            <span class="w-status">live</span>
+            <span class="w-status w-status--primary"><span class="visuallyhidden">hidden translated label</span>live</span>
+            <span class="w-status"></span>
         """
 
         self.assertHTMLEqual(expected, Template(template).render(Context()))
@@ -570,24 +570,24 @@ class StatusTagTest(TestCase):
             {% load wagtailadmin_tags i18n %}
             {% trans "title" as trans_title %}
             {% trans "hidden label" as trans_hidden_label %}
-            {% status "live" url="/test-url/" title=trans_title hidden_label=trans_hidden_label classname="primary" attrs='target="_blank" rel="noreferrer"' %}
-            {% status "live" url="/test-url/" title=trans_title classname="primary" %}
+            {% status "live" url="/test-url/" title=trans_title hidden_label=trans_hidden_label classname="w-status--primary" attrs='target="_blank" rel="noreferrer"' %}
+            {% status "live" url="/test-url/" title=trans_title classname="w-status--primary" %}
             {% status "live" url="/test-url/" title=trans_title %}
             {% status  url="/test-url/" title=trans_title attrs='id="my-status"' %}
         """
 
         expected = """
-            <a href="/test-url/" class="status-tag primary" title="title" target="_blank" rel="noreferrer">
+            <a href="/test-url/" class="w-status w-status--primary" title="title" target="_blank" rel="noreferrer">
                 <span class="visuallyhidden">hidden label</span>
                 live
             </a>
-            <a href="/test-url/" class="status-tag primary" title="title">
+            <a href="/test-url/" class="w-status w-status--primary" title="title">
                 live
             </a>
-            <a href="/test-url/" class="status-tag" title="title">
+            <a href="/test-url/" class="w-status" title="title">
                 live
             </a>
-            <a href="/test-url/" class="status-tag" title="title" id="my-status">
+            <a href="/test-url/" class="w-status" title="title" id="my-status">
             </a>
         """
 
@@ -599,18 +599,18 @@ class StatusTagTest(TestCase):
             {% fragment as var %}
                 {% trans "title" as trans_title %}
                 {% trans "hidden label" as trans_hidden_label %}
-                {% status "live" url="/test-url/" title=trans_title hidden_label=trans_hidden_label classname="primary" attrs='target="_blank" rel="noreferrer"' %}
-                {% status "live" hidden_label=trans_hidden_label classname="primary" attrs="data-example='present'" %}
+                {% status "live" url="/test-url/" title=trans_title hidden_label=trans_hidden_label classname="w-status--primary" attrs='target="_blank" rel="noreferrer"' %}
+                {% status "live" hidden_label=trans_hidden_label classname="w-status--primary" attrs="data-example='present'" %}
             {% endfragment %}
             {{var}}
         """
 
         expected = """
-            <a href="/test-url/" class="status-tag primary" title="title" target="_blank" rel="noreferrer">
+            <a href="/test-url/" class="w-status w-status--primary" title="title" target="_blank" rel="noreferrer">
                 <span class="visuallyhidden">hidden label</span>
                 live
             </a>
-            <span class="status-tag primary" data-example='present'>
+            <span class="w-status w-status--primary" data-example='present'>
                 <span class="visuallyhidden">hidden label</span>
                 live
             </span>

wagtail/admin/tests/test_workflows.py

@@ -136,7 +136,7 @@ class TestWorkflowsIndexView(WagtailTestUtils, TestCase):
         self.assertNotContains(response, "No workflows have been created.")
         self.assertContains(response, "test_workflow")
         self.assertContains(
-            response, '<span class="status-tag">Disabled</span>', html=True
+            response, '<span class="w-status">Disabled</span>', html=True
         )
 
         # If we set 'show_disabled' to 'False', the workflow should not be displayed
@@ -758,7 +758,7 @@ class TestTaskIndexView(WagtailTestUtils, TestCase):
         self.assertNotContains(response, "No tasks have been created.")
         self.assertContains(response, "test_task")
         self.assertContains(
-            response, '<span class="status-tag">Disabled</span>', html=True
+            response, '<span class="w-status">Disabled</span>', html=True
         )
 
         # The listing should not contain task if show_disabled query parameter is 'False'

wagtail/contrib/redirects/templates/wagtailredirects/list.html

@@ -36,7 +36,7 @@
                         {{ redirect.link }}
                     {% endif %}
                 </td>
-                <td class="type">{% status redirect.get_is_permanent_display classname=primary|yesno:"primary," %}</td>
+                <td class="type">{% status redirect.get_is_permanent_display classname=primary|yesno:"w-status--primary," %}</td>
             </tr>
         {% endfor %}
     </tbody>

wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html

@@ -583,10 +583,10 @@
             <p>{% avatar size="small" %} Avatar small</p>
 
             <h3>Status tags</h3>
-            <div>{% status "status tag primary" classname="primary" %}</div>
+            <div>{% status "status tag primary" classname="w-status--primary" %}</div>
             <div>{% status "status tag secondary" %}</div>
-            <div>{% status "status tag label" classname="status-tag--label" %}</div>
-            <div>{% status "status tag link" url="https://wagtail.org/" title="wagtail.org" hidden_label="current status" classname="primary" %}</div>
+            <div>{% status "status tag label" classname="w-status--label" %}</div>
+            <div>{% status "status tag link" url="https://wagtail.org/" title="wagtail.org" hidden_label="current status" classname="w-status--primary" %}</div>
 
             <h3>Loading mask</h3>
             <p>Add the following <code>div</code> around any items you wish to display with a spinner overlay and fading out</p>

wagtail/snippets/templates/wagtailsnippets/snippets/revisions/_actions.html

@@ -5,8 +5,8 @@
         {% with revision=instance.revision latest_revision=object.get_latest_revision previous_revision=instance.revision.get_previous %}
             <span>{{ value }}</span>
             {% if draftstate_enabled %}
-                {% if instance.action == 'wagtail.publish' and revision == object.live_revision %}{% trans 'Live version' as status_label %}{% status status_label classname="primary" %}
-                {% elif instance.content_changed and revision == latest_revision %}{% trans 'Current draft' as status_label %}{% status status_label classname="primary" %}{% endif %}
+                {% if instance.action == 'wagtail.publish' and revision == object.live_revision %}{% trans 'Live version' as status_label %}{% status status_label classname="w-status--primary" %}
+                {% elif instance.content_changed and revision == latest_revision %}{% trans 'Current draft' as status_label %}{% status status_label classname="w-status--primary" %}{% endif %}
             {% endif %}
             <ul class="actions">
                 {% if preview_enabled and object.is_previewable %}

wagtail/snippets/tests/test_snippets.py

@@ -3964,10 +3964,10 @@ class TestSnippetHistory(WagtailTestUtils, TestCase):
 
         # Should not show the "live version" or "current draft" status tags
         self.assertNotContains(
-            response, '<span class="status-tag primary">Live version</span>'
+            response, '<span class="w-status w-status--primary">Live version</span>'
         )
         self.assertNotContains(
-            response, '<span class="status-tag primary">Current draft</span>'
+            response, '<span class="w-status w-status--primary">Current draft</span>'
         )
 
         # The latest revision should have an "Edit" action instead of "Review"
@@ -3997,7 +3997,7 @@ class TestSnippetHistory(WagtailTestUtils, TestCase):
         # Should show the "live version" status tag for the published revision
         self.assertContains(
             response,
-            '<span class="status-tag primary">Live version</span>',
+            '<span class="w-status w-status--primary">Live version</span>',
             count=1,
             html=True,
         )
@@ -4005,7 +4005,7 @@ class TestSnippetHistory(WagtailTestUtils, TestCase):
         # Should show the "current draft" status tag for the draft revision
         self.assertContains(
             response,
-            '<span class="status-tag primary">Current draft</span>',
+            '<span class="w-status w-status--primary">Current draft</span>',
             count=1,
             html=True,
         )
@@ -4585,24 +4585,24 @@ class TestSnippetChooseStatus(WagtailTestUtils, TestCase):
         response = self.get("choose")
         html = response.json()["html"]
         self.assertTagInHTML("<th>Status</th>", html)
-        self.assertTagInHTML('<span class="status-tag">draft</span>', html)
-        self.assertTagInHTML('<span class="status-tag primary">live</span>', html)
+        self.assertTagInHTML('<span class="w-status">draft</span>', html)
         self.assertTagInHTML(
-            '<span class="status-tag primary">live + draft</span>', html
+            '<span class="w-status w-status--primary">live</span>', html
+        )
+        self.assertTagInHTML(
+            '<span class="w-status w-status--primary">live + draft</span>', html
         )
 
     def test_choose_results_view_shows_status_column(self):
         response = self.get("choose_results")
         self.assertContains(response, "<th>Status</th>", html=True)
+        self.assertContains(response, '<span class="w-status">draft</span>', html=True)
         self.assertContains(
-            response, '<span class="status-tag">draft</span>', html=True
-        )
-        self.assertContains(
-            response, '<span class="status-tag primary">live</span>', html=True
+            response, '<span class="w-status w-status--primary">live</span>', html=True
         )
         self.assertContains(
             response,
-            '<span class="status-tag primary">live + draft</span>',
+            '<span class="w-status w-status--primary">live + draft</span>',
             html=True,
         )
 

wagtail/users/templates/wagtailusers/users/list.html

@@ -48,7 +48,7 @@
                 <td class="status" valign="top">
                     {% if user.is_active %}
                         {% trans "Active" as status_label %}
-                        {% status status_label classname="primary" %}
+                        {% status status_label classname="w-status--primary" %}
                     {% else %}
                         {% trans "Inactive" as status_label %}
                         {% status status_label %}