added prefix w- before header classes

- refine existing scss to use classes & remove unused scss

CHANGELOG.txt

@@ -56,6 +56,7 @@ Changelog
  * Introduce new template fragment and block level enclosure tags for easier template composition (Thibaud Colas)
  * Add a `classnames` template tag to easily build up classes from variables provided to a template (Paarth Agarwal)
  * Migrate the dashboard (home) view header to the shared header template and update designs (Paarth Agarwal)
+ * Update classes and styles for the shared header templates to align with UI guidelines (Paarth Agarwal)
  * Fix: Typo in `ResumeWorkflowActionFormatter` message (Stefan Hammer)
  * Fix: Throw a meaningful error when saving an image to an unrecognised image format (Christian Franke)
  * Fix: Remove extra padding for headers with breadcrumbs on mobile viewport (Steven Steinwand)

client/scss/components/_header.scss

@@ -1,13 +1,9 @@
 @use 'sass:math';
 @use 'sass:color';
 
-header {
+.w-header {
   @apply w-text-primary w-mb-8;
 
-  a {
-    @apply w-text-primary w-underline;
-  }
-
   h1,
   h2 {
     @apply w-text-primary;
@@ -19,7 +15,6 @@ header {
     position: relative;
   }
 
-  h1 > svg.icon, // can remove once all headers use shared include
   .w-header__glpyh {
     position: absolute;
     inset-inline-start: -1.5em;
@@ -42,8 +37,8 @@ header {
   }
 
   // Give padding to the rows inside of headers so that nested breadcrumbs aren't padded by their parent header el.
-  // Use header--with-padding for headers that don't contain .row elements.
-  &.header--with-padding,
+  // Use w-header--with-padding for headers that don't contain .row elements.
+  &.w-header--with-padding,
   > .row {
     padding-top: 0.5rem;
     padding-bottom: 1.5rem;
@@ -51,7 +46,7 @@ header {
     padding-inline-end: 20px;
   }
 
-  &.merged .w-breadcrumb {
+  &.w-header--merged .w-breadcrumb {
     padding-inline-start: $mobile-nav-indent;
   }
 
@@ -65,11 +60,6 @@ header {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-
-    .hasform &:first-child {
-      padding-bottom: 0.5em;
-      float: none;
-    }
   }
 
   .right {
@@ -87,21 +77,16 @@ header {
   }
 
   // For case where content below header should merge with it
-  &.merged {
+  &.w-header--merged {
     margin-bottom: 0;
     padding-bottom: 1rem;
   }
 
-  &.no-border {
+  &.w-header--no-border {
     border: 0;
   }
 
-  &.merged.no-border {
-    padding-bottom: 0;
-  }
-
-  &.no-v-padding {
-    padding-top: 0;
+  &.w-header--merged.w-header--no-border {
     padding-bottom: 0;
   }
 
@@ -165,20 +150,20 @@ header {
 
 // Media for Windows High Contrast
 @media (forced-colors: $media-forced-colours) {
-  header .field-content {
+  .w-header .field-content {
     border: 0.1em solid $system-color-link-text;
   }
 }
 
 @include media-breakpoint-up(sm) {
-  header {
+  .w-header {
     .row {
       padding-top: 1.5rem;
       padding-inline-start: 90px;
       padding-inline-end: 90px;
     }
 
-    &.merged .w-breadcrumb {
+    &.w-header--merged .w-breadcrumb {
       padding-inline-start: 0;
     }
 

docs/releases/4.0.md

@@ -63,6 +63,7 @@ When using a queryset to render a list of images, you can now use the `prefetch_
  * Introduce new template fragment and block level enclosure tags for easier template composition (Thibaud Colas)
  * Add a `classnames` template tag to easily build up classes from variables provided to a template (Paarth Agarwal)
  * Migrate the dashboard (home) view header to the shared header template and update designs (Paarth Agarwal)
+ * Update classes and styles for the shared header templates to align with UI guidelines (Paarth Agarwal)
 
 ### Bug fixes
 

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

@@ -4,7 +4,7 @@
 {% block bodyclass %}page-explorer {% if ordering == 'ord' %}reordering{% endif %}{% endblock %}
 
 {% block content %}
-    <header class="header merged no-border">
+    <header class="w-header w-header--merged w-header--no-border">
         <h1 class="visuallyhidden">Explorer</h1>
 
         {% breadcrumbs parent_page 'wagtailadmin_explore' url_root_name='wagtailadmin_explore_root' %}

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

@@ -4,8 +4,8 @@
 {% block titletag %}{% trans 'Preview error' %}{% endblock %}
 
 {% block content %}
-    <header class="header header--with-padding">
-        <h1 class="header__title">{% trans 'Preview error' %}</h1>
+    <header class="w-header w-header--with-padding">
+        <h1 class="w-header__title">{% trans 'Preview error' %}</h1>
     </header>
     <div class="nice-padding">
         <p>

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

@@ -4,13 +4,13 @@
 {% block titletag %}{{ title }}{% endblock %}
 
 {% block content %}
-    <header class="header" role="banner">
+    <header class="w-header" role="banner">
         <div class="row">
             <div class="left">
                 <div class="col">
-                    <h1 class="header__title">
-                        {% if header_icon %}{% icon name=header_icon %}{% endif %}
-                        {{ title }}{% if subtitle %} <span class="header__subtitle">{{ subtitle }}</span>{% endif %}
+                    <h1 class="w-header__title">
+                        {% if header_icon %}{% icon class_name="w-header__glpyh" name=header_icon %}{% endif %}
+                        {{ title }}{% if subtitle %} <span class="w-header__subtitle">{{ subtitle }}</span>{% endif %}
                     </h1>
                 </div>
             </div>

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

@@ -16,12 +16,12 @@
     - `action_icon` - icon for the 'action' button, default is 'icon-plus'
 
 {% endcomment %}
-<header class="{% classnames "header" classname merged|yesno:"merged," search_form|yesno:"hasform," %}">
+<header class="{% classnames "w-header" classname merged|yesno:"w-header--merged," search_form|yesno:"w-header--hasform," %}">
     {% block breadcrumb %}{% endblock %}
     <div class="row">
         <div class="left">
             <div class="col">
-                <h1 class="header__title">
+                <h1 class="w-header__title">
                     {% if icon %}
                         {% icon class_name="w-header__glpyh" name=icon %}
                     {% elif avatar %}

wagtail/admin/templates/wagtailadmin/workflows/index.html

@@ -2,12 +2,12 @@
 {% load i18n wagtailadmin_tags %}
 
 {% block content %}
-    <header class="header" role="banner">
+    <header class="w-header" role="banner">
         <div class="row">
             <div class="left">
                 <div class="col">
-                    <h1 class="header__title">
-                        {% if view.header_icon %}{% icon name=view.header_icon %}{% endif %}
+                    <h1 class="w-header__title">
+                        {% if view.header_icon %}{% icon class_name="w-header__glpyh" name=view.header_icon %}{% endif %}
                         {{ view.page_title }}{% if view.subtitle %} <span class="header__subtitle">{{ view.subtitle }}</span>{% endif %}
                     </h1>
                 </div>

wagtail/admin/templates/wagtailadmin/workflows/task_index.html

@@ -2,13 +2,13 @@
 {% load i18n wagtailadmin_tags %}
 
 {% block content %}
-    <header class="header" role="banner">
+    <header class="w-header" role="banner">
         <div class="row">
             <div class="left">
                 <div class="col">
-                    <h1 class="header__title">
-                        {% if view.header_icon %}{% icon name=view.header_icon %}{% endif %}
-                        {{ view.page_title }}{% if view.subtitle %} <span class="header__subtitle">{{ view.subtitle }}</span>{% endif %}
+                    <h1 class="w-header__title">
+                        {% if view.header_icon %}{% icon class_name="w-header__glpyh" name=view.header_icon %}{% endif %}
+                        {{ view.page_title }}{% if view.subtitle %} <span class="w-header__subtitle">{{ view.subtitle }}</span>{% endif %}
                     </h1>
                 </div>
             </div>

wagtail/admin/tests/pages/test_edit_page.py

@@ -859,7 +859,7 @@ class TestPageEdit(TestCase, WagtailTestUtils):
             response, "<title>Wagtail - Preview error</title>", html=True
         )
         self.assertContains(
-            response, '<h1 class="header__title">Preview error</h1>', html=True
+            response, '<h1 class="w-header__title">Preview error</h1>', html=True
         )
 
     @override_settings(

wagtail/contrib/forms/templates/wagtailforms/index_submissions.html

@@ -81,14 +81,14 @@
     </script>
 {% endblock %}
 {% block content %}
-    <header class="header">
+    <header class="w-header w-header--hasform">
         <form action="" method="get" novalidate>
             <div class="row">
                 <div class="left">
                     <div class="col">
-                        <h1 class="header__title">
-                            {% icon name="form" %}
-                            {% blocktrans trimmed with form_title=form_page.title|capfirst %}Form data <span>{{ form_title }}</span>{% endblocktrans %}
+                        <h1 class="w-header__title">
+                            {% icon class_name="w-header__glpyh" name="form" %}
+                            {% blocktrans trimmed with form_title=form_page.title|capfirst %}Form data <span class="w-header__subtitle">{{ form_title }}</span>{% endblocktrans %}
                         </h1>
                     </div>
                     <div class="col search-bar">

wagtail/contrib/modeladmin/templates/modeladmin/index.html

@@ -17,16 +17,16 @@
 
 {% block content %}
     {% block header %}
-        <header class="header hasform">
+        <header class="w-header w-header--hasform">
             {% block breadcrumb %}{% endblock %}
             <div class="row">
                 <div class="left header-left">
                     <div class="col">
                         {% block h1 %}
-                            <h1>
-                                {% if view.header_icon %}{% icon name=view.header_icon %}{% endif %}
+                            <h1 class="w-header__title">
+                                {% if view.header_icon %}{% icon class_name="w-header__glpyh" name=view.header_icon %}{% endif %}
                                 {{ view.get_page_title }}
-                                {% if view.get_page_subtitle %} <span class="header__subtitle">{{ view.get_page_subtitle }}</span> {% endif %}
+                                {% if view.get_page_subtitle %} <span class="w-header__subtitle">{{ view.get_page_subtitle }}</span> {% endif %}
                                 {% include 'modeladmin/includes/result_count.html' %}
                             </h1>
                         {% endblock %}

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

@@ -27,12 +27,15 @@
         {% trans "Import redirects" as import_str %}
         {% trans "Export redirects" as export_str %}
 
-        <header class="header hasform">
+        <header class="w-header w-header--hasform">
             {% block breadcrumb %}{% endblock %}
             <div class="row">
                 <div class="left">
                     <div class="col">
-                        <h1>{% icon name="redirect" %}{{ redirects_str }}</h1>
+                        <h1 class="w-header__title">
+                            {% icon class_name="w-header__glpyh" name="redirect" %}
+                            {{ redirects_str }}
+                        </h1>
                     </div>
                     <form class="col search-form" action="{% url "wagtailredirects:index" %}{% if query_parameters %}?{{ query_parameters }}{% endif %}" method="get" novalidate role="search">
                         <ul class="fields">

wagtail/contrib/settings/templates/wagtailsettings/edit.html

@@ -3,14 +3,14 @@
 {% block titletag %}{% blocktrans trimmed %}Editing {{ setting_type_name}} - {{ instance }}{% endblocktrans %}{% endblock %}
 {% block bodyclass %}menu-settings{% endblock %}
 {% block content %}
-    <header class="header merged">
+    <header class="w-header w-header--merged">
         <div class="row">
             <div class="left">
                 <div class="col">
-                    <h1 class="header__title">
-                        {% icon name="cogs" %}
+                    <h1 class="w-header__title">
+                        {% icon class_name="w-header__glpyh" name="cogs" %}
                         {% trans "Editing" %}
-                        <span class="header__subtitle">{{ setting_type_name|capfirst }}</span>
+                        <span class="w-header__subtitle">{{ setting_type_name|capfirst }}</span>
                     </h1>
                 </div>
             </div>

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

@@ -623,8 +623,8 @@
             </div>
 
             <p>These can also have an inverted theme:</p>
-            <header class="header">
-                <div class="c-dropdown  t-inverted" data-dropdown="">
+            <header class="w-header">
+                <div class="c-dropdown t-inverted" data-dropdown="">
                     <a class="c-dropdown__button  u-btn-current">
                         More
                         <div data-dropdown-toggle="" class="o-icon  c-dropdown__toggle c-dropdown__togle--icon  [ icon icon-arrow-down ]">

wagtail/snippets/templates/wagtailsnippets/snippets/type_index.html

@@ -19,12 +19,12 @@
 {% block content %}
     {% include 'wagtailsnippets/snippets/headers/list_header.html' %}
 
-    <header class="header">
+    <header class="w-header">
         <div class="row">
             <div class="left">
                 <div class="col">
-                    <h1 class="header__title">
-                        {% icon name="snippet" %} {{ model_opts.verbose_name_plural|capfirst }}
+                    <h1 class="w-header__title">
+                        {% icon class_name="w-header__glpyh" name="snippet" %} {{ model_opts.verbose_name_plural|capfirst }}
                     </h1>
                     {% if is_searchable and search_url %}
                         <form class="col search-form" action="{% url search_url %}" method="get" novalidate>