diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index 4a4b106ff9..eda0be5d9e 100644
--- a/CHANGELOG.txt
+++ b/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)
diff --git a/client/scss/components/_header.scss b/client/scss/components/_header.scss
index fc94f62132..91e75a3ec4 100644
--- a/client/scss/components/_header.scss
+++ b/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;
}
diff --git a/docs/releases/4.0.md b/docs/releases/4.0.md
index 0a0590d6e3..e4dfaa577a 100644
--- a/docs/releases/4.0.md
+++ b/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
diff --git a/wagtail/admin/templates/wagtailadmin/pages/index.html b/wagtail/admin/templates/wagtailadmin/pages/index.html
index 2f607aed7f..9e59289d26 100644
--- a/wagtail/admin/templates/wagtailadmin/pages/index.html
+++ b/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' %}
diff --git a/wagtail/admin/templates/wagtailadmin/pages/preview_error.html b/wagtail/admin/templates/wagtailadmin/pages/preview_error.html
index bc2f2d9912..aedc7c442a 100644
--- a/wagtail/admin/templates/wagtailadmin/pages/preview_error.html
+++ b/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>
diff --git a/wagtail/admin/templates/wagtailadmin/reports/base_report.html b/wagtail/admin/templates/wagtailadmin/reports/base_report.html
index 5918159221..15d887e06e 100644
--- a/wagtail/admin/templates/wagtailadmin/reports/base_report.html
+++ b/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>
diff --git a/wagtail/admin/templates/wagtailadmin/shared/header.html b/wagtail/admin/templates/wagtailadmin/shared/header.html
index 134e2468c6..46d3abb9d8 100644
--- a/wagtail/admin/templates/wagtailadmin/shared/header.html
+++ b/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 %}
diff --git a/wagtail/admin/templates/wagtailadmin/workflows/index.html b/wagtail/admin/templates/wagtailadmin/workflows/index.html
index 9bdc82227d..e0fd0ab625 100644
--- a/wagtail/admin/templates/wagtailadmin/workflows/index.html
+++ b/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>
diff --git a/wagtail/admin/templates/wagtailadmin/workflows/task_index.html b/wagtail/admin/templates/wagtailadmin/workflows/task_index.html
index 420879a712..304395c2f5 100644
--- a/wagtail/admin/templates/wagtailadmin/workflows/task_index.html
+++ b/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>
diff --git a/wagtail/admin/tests/pages/test_edit_page.py b/wagtail/admin/tests/pages/test_edit_page.py
index 4cd01c080b..b276c36214 100644
--- a/wagtail/admin/tests/pages/test_edit_page.py
+++ b/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(
diff --git a/wagtail/contrib/forms/templates/wagtailforms/index_submissions.html b/wagtail/contrib/forms/templates/wagtailforms/index_submissions.html
index 4c5378e7da..2ca4b5f6a2 100644
--- a/wagtail/contrib/forms/templates/wagtailforms/index_submissions.html
+++ b/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">
diff --git a/wagtail/contrib/modeladmin/templates/modeladmin/index.html b/wagtail/contrib/modeladmin/templates/modeladmin/index.html
index 86e133a4e6..eeae36f94d 100644
--- a/wagtail/contrib/modeladmin/templates/modeladmin/index.html
+++ b/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 %}
diff --git a/wagtail/contrib/redirects/templates/wagtailredirects/index.html b/wagtail/contrib/redirects/templates/wagtailredirects/index.html
index 833e3391ff..49e81430d1 100644
--- a/wagtail/contrib/redirects/templates/wagtailredirects/index.html
+++ b/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">
diff --git a/wagtail/contrib/settings/templates/wagtailsettings/edit.html b/wagtail/contrib/settings/templates/wagtailsettings/edit.html
index 7996255726..8c38f11cce 100644
--- a/wagtail/contrib/settings/templates/wagtailsettings/edit.html
+++ b/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>
diff --git a/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html b/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html
index 1d8fed7b78..5be283ee76 100644
--- a/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html
+++ b/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 ]">
diff --git a/wagtail/snippets/templates/wagtailsnippets/snippets/type_index.html b/wagtail/snippets/templates/wagtailsnippets/snippets/type_index.html
index 45225e0d12..2f478548e3 100644
--- a/wagtail/snippets/templates/wagtailsnippets/snippets/type_index.html
+++ b/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>