Rename preview-panel class to w-preview

client/scss/components/_preview-panel.scss

@@ -1,4 +1,4 @@
-.preview-panel {
+.w-preview {
   --w-preview-background-color: var(--w-color-white);
   --preview-width-ratio: min(
     1,
@@ -138,7 +138,7 @@
 
     // Show the border only if there's an error,
     // but always show it if there are multiple preview modes
-    .preview-panel--has-errors &:not(&--multiple),
+    .w-preview--has-errors &:not(&--multiple),
     &--multiple {
       @apply w-border-border-furniture w-border-t;
       padding-top: 1rem;

wagtail/admin/templates/wagtailadmin/shared/side_panels/preview.html

@@ -3,41 +3,41 @@
 {% wagtail_config as settings %}
 
 <div
-    class="preview-panel"
+    class="w-preview"
     data-controller="w-preview"
-    data-w-preview-has-errors-class="preview-panel--has-errors"
-    data-w-preview-selected-size-class="preview-panel__size-button--selected"
+    data-w-preview-has-errors-class="w-preview--has-errors"
+    data-w-preview-selected-size-class="w-preview__size-button--selected"
     data-w-preview-url-value="{{ preview_url }}"
     data-w-preview-auto-update-value="{{ settings.WAGTAIL_AUTO_UPDATE_PREVIEW|yesno:'true,false' }}"
     data-w-preview-auto-update-interval-value="{{ settings.WAGTAIL_AUTO_UPDATE_PREVIEW_INTERVAL }}"
     data-w-preview-w-progress-outlet="[data-controller='w-preview'] [data-controller='w-progress']"
 >
-    <div class="preview-panel__sizes">
-        <label class="preview-panel__size-button">
+    <div class="w-preview__sizes">
+        <label class="w-preview__size-button">
             {% icon name="mobile-alt" %}
             <input type="radio" name="preview-size" value="mobile" data-action="w-preview#togglePreviewSize" data-w-preview-target="size" data-device-width="375" data-default-size checked aria-label="{% trans 'Preview in mobile size' %}" />
         </label>
-        <label class="preview-panel__size-button">
+        <label class="w-preview__size-button">
             {% icon name="tablet-alt" %}
             <input type="radio" name="preview-size" value="tablet" data-action="w-preview#togglePreviewSize" data-w-preview-target="size" data-device-width="768" aria-label="{% trans 'Preview in tablet size' %}" />
         </label>
-        <label class="preview-panel__size-button">
+        <label class="w-preview__size-button">
             {% icon name="desktop" %}
             <input type="radio" name="preview-size" value="desktop" data-action="w-preview#togglePreviewSize" data-w-preview-target="size" data-device-width="1280" aria-label="{% trans 'Preview in desktop size' %}" />
         </label>
 
-        <a href="{{ preview_url }}?mode={{ object.default_preview_mode|urlencode }}" target="_blank" rel="noreferrer" class="preview-panel__size-button" data-w-preview-target="newTab" data-action="w-preview#openPreviewInNewTab" aria-label="{% trans 'Preview in new tab' %}">{% icon name="link-external" %}</a>
+        <a href="{{ preview_url }}?mode={{ object.default_preview_mode|urlencode }}" target="_blank" rel="noreferrer" class="w-preview__size-button" data-w-preview-target="newTab" data-action="w-preview#openPreviewInNewTab" aria-label="{% trans 'Preview in new tab' %}">{% icon name="link-external" %}</a>
     </div>
 
     {% if settings.WAGTAIL_AUTO_UPDATE_PREVIEW %}
-        <div class="preview-panel__spinner" data-w-preview-target="spinner" hidden>
+        <div class="w-preview__spinner" data-w-preview-target="spinner" hidden>
             {% icon name="spinner" classname="default" %}
             <span class="w-sr-only">{% trans 'Loading'%}</span>
         </div>
     {% else %}
         <button
             type="button"
-            class="button button-small button-secondary button-longrunning button--icon preview-panel__refresh-button"
+            class="button button-small button-secondary button-longrunning button--icon w-preview__refresh-button"
             data-controller="w-progress"
             data-action="click->w-preview#setPreviewDataWithAlert click->w-progress#activate"
             data-w-progress-active-value="{% trans 'Refreshing…' %}"
@@ -50,22 +50,22 @@
         </button>
     {% endif %}
 
-    <div class="preview-panel__area">
-        <div class="preview-panel__controls{% if has_multiple_modes %} preview-panel__controls--multiple{% endif %}">
-            <div id="preview-panel-error-banner" class="preview-panel__error-banner">
+    <div class="w-preview__area">
+        <div class="w-preview__controls{% if has_multiple_modes %} w-preview__controls--multiple{% endif %}">
+            <div id="w-preview-error-banner" class="w-preview__error-banner">
                 {% icon name='warning' classname='default' %}
                 <div>
-                    <h3 class="preview-panel__error-title">
+                    <h3 class="w-preview__error-title">
                         {% trans 'Preview is out of date' %}
                     </h3>
-                    <p class="preview-panel__error-details">
+                    <p class="w-preview__error-details">
                         {% trans 'Correct the validation errors to resume preview (saving will highlight errors)' %}
                     </p>
                 </div>
             </div>
             {% if has_multiple_modes %}
-                {% rawformattedfield label_text=_("Preview mode") id_for_label="id_preview_mode" classname="preview-panel__modes" %}
-                    <select id="id_preview_mode" name="preview_mode" class="preview-panel__mode-select" data-w-preview-target="mode" data-action="w-preview#setPreviewMode">
+                {% rawformattedfield label_text=_("Preview mode") id_for_label="id_preview_mode" classname="w-preview__modes" %}
+                    <select id="id_preview_mode" name="preview_mode" class="w-preview__mode-select" data-w-preview-target="mode" data-action="w-preview#setPreviewMode">
                         {% for internal_name, display_name in object.preview_modes %}
                             <option value="{{ internal_name }}"{% if internal_name == object.default_preview_mode %} selected{% endif %}>{{ display_name }}</option>
                         {% endfor %}
@@ -74,14 +74,14 @@
             {% endif %}
         </div>
 
-        <div class="preview-panel__wrapper">
+        <div class="w-preview__wrapper">
             <iframe
                 id="w-preview-iframe"
                 title="{% trans 'Preview' %}"
-                class="preview-panel__iframe"
+                class="w-preview__iframe"
                 data-w-preview-target="iframe"
                 data-action="load->w-preview#replaceIframe"
-                aria-describedby="preview-panel-error-banner"
+                aria-describedby="w-preview-error-banner"
             >
                 <div>
                      {# Add placeholder element to support styling content when iframe has loaded #}

wagtail/admin/tests/pages/test_preview.py

@@ -460,7 +460,7 @@ class TestEnablePreview(WagtailTestUtils, TestCase):
         # Should show the iframe
         self.assertContains(
             response,
-            '<iframe id="preview-iframe" loading="lazy" title="Preview" class="preview-panel__iframe" data-preview-iframe aria-describedby="preview-panel-error-banner">',
+            '<iframe id="preview-iframe" loading="lazy" title="Preview" class="w-preview__iframe" data-preview-iframe aria-describedby="w-preview-error-banner">',
         )
 
         # Should show the new tab button with the default mode set
@@ -469,7 +469,7 @@ class TestEnablePreview(WagtailTestUtils, TestCase):
         # Should not show the preview mode selection
         self.assertNotContains(
             response,
-            '<select id="id_preview_mode" name="preview_mode" class="preview-panel__mode-select" data-preview-mode-select>',
+            '<select id="id_preview_mode" name="preview_mode" class="w-preview__mode-select" data-preview-mode-select>',
         )
 
     def test_show_preview_panel_on_create_with_multiple_modes(self):
@@ -488,7 +488,7 @@ class TestEnablePreview(WagtailTestUtils, TestCase):
         # Should show the iframe
         self.assertContains(
             response,
-            '<iframe id="preview-iframe" loading="lazy" title="Preview" class="preview-panel__iframe" data-preview-iframe aria-describedby="preview-panel-error-banner">',
+            '<iframe id="preview-iframe" loading="lazy" title="Preview" class="w-preview__iframe" data-preview-iframe aria-describedby="w-preview-error-banner">',
         )
 
         # Should show the new tab button with the default mode set and correctly quoted
@@ -497,7 +497,7 @@ class TestEnablePreview(WagtailTestUtils, TestCase):
         # should show the preview mode selection
         self.assertContains(
             response,
-            '<select id="id_preview_mode" name="preview_mode" class="preview-panel__mode-select" data-preview-mode-select>',
+            '<select id="id_preview_mode" name="preview_mode" class="w-preview__mode-select" data-preview-mode-select>',
         )
         self.assertContains(response, '<option value="original">Original</option>')
 
@@ -522,7 +522,7 @@ class TestEnablePreview(WagtailTestUtils, TestCase):
         # Should show the iframe
         self.assertContains(
             response,
-            '<iframe id="preview-iframe" loading="lazy" title="Preview" class="preview-panel__iframe" data-preview-iframe aria-describedby="preview-panel-error-banner">',
+            '<iframe id="preview-iframe" loading="lazy" title="Preview" class="w-preview__iframe" data-preview-iframe aria-describedby="w-preview-error-banner">',
         )
 
         # Should show the new tab button with the default mode set
@@ -531,7 +531,7 @@ class TestEnablePreview(WagtailTestUtils, TestCase):
         # Should not show the preview mode selection
         self.assertNotContains(
             response,
-            '<select id="id_preview_mode" name="preview_mode" class="preview-panel__mode-select" data-preview-mode-select>',
+            '<select id="id_preview_mode" name="preview_mode" class="w-preview__mode-select" data-preview-mode-select>',
         )
 
     def test_show_preview_panel_on_edit_with_multiple_modes(self):
@@ -550,7 +550,7 @@ class TestEnablePreview(WagtailTestUtils, TestCase):
         # Should show the iframe
         self.assertContains(
             response,
-            '<iframe id="preview-iframe" loading="lazy" title="Preview" class="preview-panel__iframe" data-preview-iframe aria-describedby="preview-panel-error-banner">',
+            '<iframe id="preview-iframe" loading="lazy" title="Preview" class="w-preview__iframe" data-preview-iframe aria-describedby="w-preview-error-banner">',
         )
 
         # Should show the new tab button with the default mode set and correctly quoted
@@ -559,7 +559,7 @@ class TestEnablePreview(WagtailTestUtils, TestCase):
         # should show the preview mode selection
         self.assertContains(
             response,
-            '<select id="id_preview_mode" name="preview_mode" class="preview-panel__mode-select" data-preview-mode-select>',
+            '<select id="id_preview_mode" name="preview_mode" class="w-preview__mode-select" data-preview-mode-select>',
         )
         self.assertContains(response, '<option value="original">Original</option>')
 

wagtail/snippets/tests/test_preview.py

@@ -310,7 +310,7 @@ class TestEnablePreview(WagtailTestUtils, TestCase):
         # Should show the iframe
         self.assertContains(
             response,
-            '<iframe id="preview-iframe" loading="lazy" title="Preview" class="preview-panel__iframe" data-preview-iframe aria-describedby="preview-panel-error-banner">',
+            '<iframe id="preview-iframe" loading="lazy" title="Preview" class="w-preview__iframe" data-preview-iframe aria-describedby="w-preview-error-banner">',
         )
 
         # Should show the new tab button with the default mode set
@@ -319,7 +319,7 @@ class TestEnablePreview(WagtailTestUtils, TestCase):
         # Should not show the preview mode selection
         self.assertNotContains(
             response,
-            '<select id="id_preview_mode" name="preview_mode" class="preview-panel__mode-select" data-preview-mode-select>',
+            '<select id="id_preview_mode" name="preview_mode" class="w-preview__mode-select" data-preview-mode-select>',
         )
 
     def test_show_preview_panel_on_create_with_multiple_modes(self):
@@ -338,7 +338,7 @@ class TestEnablePreview(WagtailTestUtils, TestCase):
         # Should show the iframe
         self.assertContains(
             response,
-            '<iframe id="preview-iframe" loading="lazy" title="Preview" class="preview-panel__iframe" data-preview-iframe aria-describedby="preview-panel-error-banner">',
+            '<iframe id="preview-iframe" loading="lazy" title="Preview" class="w-preview__iframe" data-preview-iframe aria-describedby="w-preview-error-banner">',
         )
 
         # Should show the new tab button with the default mode set and correctly quoted
@@ -347,7 +347,7 @@ class TestEnablePreview(WagtailTestUtils, TestCase):
         # should show the preview mode selection
         self.assertContains(
             response,
-            '<select id="id_preview_mode" name="preview_mode" class="preview-panel__mode-select" data-preview-mode-select>',
+            '<select id="id_preview_mode" name="preview_mode" class="w-preview__mode-select" data-preview-mode-select>',
         )
         self.assertContains(response, '<option value="">Normal</option>')
 
@@ -374,7 +374,7 @@ class TestEnablePreview(WagtailTestUtils, TestCase):
         # Should show the iframe
         self.assertContains(
             response,
-            '<iframe id="preview-iframe" loading="lazy" title="Preview" class="preview-panel__iframe" data-preview-iframe aria-describedby="preview-panel-error-banner">',
+            '<iframe id="preview-iframe" loading="lazy" title="Preview" class="preview-panel__iframe" data-preview-iframe aria-describedby="w-preview-error-banner">',
         )
 
         # Should show the new tab button with the default mode set
@@ -383,7 +383,7 @@ class TestEnablePreview(WagtailTestUtils, TestCase):
         # Should not show the preview mode selection
         self.assertNotContains(
             response,
-            '<select id="id_preview_mode" name="preview_mode" class="preview-panel__mode-select" data-preview-mode-select>',
+            '<select id="id_preview_mode" name="preview_mode" class="w-preview__mode-select" data-preview-mode-select>',
         )
 
     def test_show_preview_panel_on_edit_with_multiple_modes(self):
@@ -404,7 +404,7 @@ class TestEnablePreview(WagtailTestUtils, TestCase):
         # Should show the iframe
         self.assertContains(
             response,
-            '<iframe id="preview-iframe" loading="lazy" title="Preview" class="preview-panel__iframe" data-preview-iframe aria-describedby="preview-panel-error-banner">',
+            '<iframe id="preview-iframe" loading="lazy" title="Preview" class="w-preview__iframe" data-preview-iframe aria-describedby="w-preview-error-banner">',
         )
 
         # Should show the new tab button with the default mode set and correctly quoted
@@ -413,7 +413,7 @@ class TestEnablePreview(WagtailTestUtils, TestCase):
         # should show the preview mode selection
         self.assertContains(
             response,
-            '<select id="id_preview_mode" name="preview_mode" class="preview-panel__mode-select" data-preview-mode-select>',
+            '<select id="id_preview_mode" name="preview_mode" class="w-preview__mode-select" data-preview-mode-select>',
         )
         self.assertContains(response, '<option value="">Normal</option>')