From db4e86a2c1e0a4606a0643247857e88cef46c97b Mon Sep 17 00:00:00 2001
From: Sage Abdullah <sage.abdullah@torchbox.com>
Date: Thu, 14 Mar 2024 17:41:23 +0000
Subject: [PATCH] Rename preview-panel class to w-preview
---
client/scss/components/_preview-panel.scss | 4 +-
.../shared/side_panels/preview.html | 40 +++++++++----------
wagtail/admin/tests/pages/test_preview.py | 16 ++++----
wagtail/snippets/tests/test_preview.py | 16 ++++----
4 files changed, 38 insertions(+), 38 deletions(-)
diff --git a/client/scss/components/_preview-panel.scss b/client/scss/components/_preview-panel.scss
index c32cfa611a..b2deb2c5f4 100644
--- a/client/scss/components/_preview-panel.scss
+++ b/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;
diff --git a/wagtail/admin/templates/wagtailadmin/shared/side_panels/preview.html b/wagtail/admin/templates/wagtailadmin/shared/side_panels/preview.html
index dd12ece99e..62ab9c7d2d 100644
--- a/wagtail/admin/templates/wagtailadmin/shared/side_panels/preview.html
+++ b/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 #}
diff --git a/wagtail/admin/tests/pages/test_preview.py b/wagtail/admin/tests/pages/test_preview.py
index 9e4cedc72b..e85ca48293 100644
--- a/wagtail/admin/tests/pages/test_preview.py
+++ b/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>')
diff --git a/wagtail/snippets/tests/test_preview.py b/wagtail/snippets/tests/test_preview.py
index 96497bf8b7..8e9eb1fcf0 100644
--- a/wagtail/snippets/tests/test_preview.py
+++ b/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>')