Repository: wagtail/wagtail

Issue:
Adopt `w-status` BEM classes in shared Status template tag
### Is your proposal related to a problem?

As a follow up from #9721 & #8656 & 10129 adopt BEM classes for the status template tag now that most classes are in one place.

<img width="865" alt="Status tag examples" src="https://user-images.githubusercontent.com/1396140/220348762-80270d23-35e8-45bf-8842-41e21dd0094e.png">

### Describe the solution you'd like - Use BEM `w-status` classes

* Update classes to be `w-status` and use BEM prefixes
* For example `status-tag` would be `w-status` and `primary` would be `w-status w-status--primary`
* We may want to adjust the overuse of `classname` on the status template tag and provide a shortcut `variant='primary'` which would generate the class `w-status--primary`.

Full classes list

* `status-tag` -> `w-status`
* `status-tag--label` -> `w-status--label`
* `primary` -> `w-status--primary`
* `disabled` -> `w-status--disabled`

### Describe alternatives you've considered

* Leave as is, these clean up items are not critical but would be nice to solve.

### Additional context

* See https://getbem.com/naming/ for classes
* See HTML in `wagtail/admin/templates/wagtailadmin/shared/status_tag.html`
* See template tag implementation in `wagtail/admin/templatetags/wagtailadmin_tags.py`
* Ensure scss is updated in `client/scss/components/_listing.scss` & `client/scss/components/_status-tag.scss` (main file) & `client/scss/layouts/_report.scss`
* Split out from Part 2 in #10129
* Based on comment _Originally posted by @lb- in https://github.com/wagtail/wagtail/issues/9721#issuecomment-1438356041_



Discussion:

Resolving patch:
diff --git a/wagtail/admin/templatetags/wagtailadmin_tags.py b/wagtail/admin/templatetags/wagtailadmin_tags.py
--- a/wagtail/admin/templatetags/wagtailadmin_tags.py
+++ b/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)


Test patch:
diff --git a/wagtail/admin/tests/test_templatetags.py b/wagtail/admin/tests/test_templatetags.py
--- a/wagtail/admin/tests/test_templatetags.py
+++ b/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 @@ def test_render_block_component_anchor_variations(self):
             {% 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 @@ def test_render_as_fragment(self):
             {% 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>
diff --git a/wagtail/admin/tests/test_workflows.py b/wagtail/admin/tests/test_workflows.py
--- a/wagtail/admin/tests/test_workflows.py
+++ b/wagtail/admin/tests/test_workflows.py
@@ -136,7 +136,7 @@ def test_deactivated(self):
         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 @@ def test_deactivated(self):
         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'
diff --git a/wagtail/snippets/tests/test_snippets.py b/wagtail/snippets/tests/test_snippets.py
--- a/wagtail/snippets/tests/test_snippets.py
+++ b/wagtail/snippets/tests/test_snippets.py
@@ -3964,10 +3964,10 @@ def test_should_show_actions_on_revisable_snippet(self):
 
         # 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 @@ def test_with_live_and_draft_status(self):
         # 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 @@ def test_with_live_and_draft_status(self):
         # 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 @@ def test_choose_view_shows_status_column(self):
         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,
         )