Refactor Wagtail userbar to use core.css stylesheet like other components

CHANGELOG.txt

@@ -106,6 +106,7 @@ Changelog
  * Maintenance: Remove unused dev-only react-axe integration (Thibaud Colas)
  * Maintenance: Migrate accessible Skip Link implementation to a Stimulus controller (Loveth Omokaro)
  * Maintenance: Split up `wagtail.admin.panels` into submodules, existing exports have been preserved (Matt Westcott)
+ * Maintenance: Refactor userbar styles to use the same stylesheet as other components (Thibaud Colas)
 
 
 4.1.2 (xx.xx.xxxx) - IN DEVELOPMENT

wagtail/admin/static_src/wagtailadmin/scss/userbar.scss → client/scss/components/_userbar.scss

@@ -2,12 +2,6 @@
 @use 'sass:math';
 @use 'sass:string';
 
-@tailwind base;
-@tailwind components;
-
-@import '../../../../../client/scss/settings';
-@import '../../../../../client/scss/tools';
-
 // =============================================================================
 // Variables
 // =============================================================================
@@ -93,17 +87,6 @@ $positions: (
   text-decoration: none;
   position: relative;
 
-  .w-userbar-help-text {
-    // Visually hide the help text
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
   .w-icon:before {
     transition: color 0.2s ease;
     font-size: 2rem;

client/scss/core.scss

@@ -162,6 +162,7 @@ These are classes for components.
 @import 'components/preview-panel';
 @import 'components/preview-error';
 @import 'components/form-side';
+@import 'components/userbar';
 
 @import '../src/components/Sidebar/Sidebar';
 @import '../src/components/Minimap/Minimap';

client/webpack.config.js

@@ -113,14 +113,6 @@ module.exports = function exports(env, argv) {
     'panels',
     'streamfield.scss',
   );
-  sassEntry[getOutputPath('admin', 'css', 'userbar')] = path.resolve(
-    'wagtail',
-    'admin',
-    'static_src',
-    'wagtailadmin',
-    'scss',
-    'userbar.scss',
-  );
   sassEntry[getOutputPath('contrib/styleguide', 'css', 'styleguide')] =
     path.resolve(
       'wagtail',

docs/releases/4.2.md

@@ -137,6 +137,7 @@ This feature was developed by Jake Howard.
  * Remove unused dev-only react-axe integration (Thibaud Colas)
  * Migrate accessible Skip Link implementation to a Stimulus controller (Loveth Omokaro)
  * Split up `wagtail.admin.panels` into submodules, existing exports have been preserved (Matt Westcott)
+ * Refactor userbar styles to use the same stylesheet as other components (Thibaud Colas)
 
 ## Upgrade considerations
 

wagtail/admin/templates/wagtailadmin/userbar/base.html

@@ -2,28 +2,30 @@
 <!-- Wagtail user bar embed code -->
 <template id="wagtail-userbar-template">
     <div class="w-userbar w-userbar--{{ position|default:'bottom-right' }}" data-wagtail-userbar part="userbar">
-        <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/userbar.css' %}">
+        <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/core.css' %}">
+        {% hook_output 'insert_global_admin_css' %}
+        {% hook_output 'insert_editor_css' %}
         <div class="w-userbar-nav">
+
+            <svg class="w-hidden">
+                <defs>
+                    {% include "wagtailadmin/icons/wagtail.svg" %}
+                    {% include "wagtailadmin/icons/folder-open-inverse.svg" %}
+                    {% include "wagtailadmin/icons/edit.svg" %}
+                    {% include "wagtailadmin/icons/plus.svg" %}
+                    {% include "wagtailadmin/icons/tick.svg" %}
+                    {% include "wagtailadmin/icons/cross.svg" %}
+                </defs>
+            </svg>
+
             <button aria-controls="wagtail-userbar-items" aria-haspopup="true" class="w-userbar-trigger" id="wagtail-userbar-trigger" data-wagtail-userbar-trigger>
                 {% block branding_logo %}
-                    <div style="display: none">
-                        <svg>
-                            <defs>
-                                {% include "wagtailadmin/icons/wagtail.svg" %}
-                                {% include "wagtailadmin/icons/folder-open-inverse.svg" %}
-                                {% include "wagtailadmin/icons/edit.svg" %}
-                                {% include "wagtailadmin/icons/plus.svg" %}
-                                {% include "wagtailadmin/icons/tick.svg" %}
-                                {% include "wagtailadmin/icons/cross.svg" %}
-                            </defs>
-                        </svg>
-                    </div>
                     {% comment %} Intentionally not using the icon template tag to show as SVG only {% endcomment %}
                     <svg class="w-userbar-icon" aria-hidden="true">
                         <use href="#icon-wagtail-icon"></use>
                     </svg>
                 {% endblock %}
-                <span class="w-userbar-help-text">{% trans 'View Wagtail quick actions' %}</span>
+                <span class="w-sr-only">{% trans 'View Wagtail quick actions' %}</span>
             </button>
             <ul aria-labelledby="wagtail-userbar-trigger" class="w-userbar-items" id="wagtail-userbar-items" role="menu">
                 {% for item in items %}