From 157a06d3fea32ef37e4a44550066393a8414234f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?sag=E2=80=8Be?= Date: Thu, 30 May 2024 12:39:03 +0100 Subject: [PATCH] Support SVG icon id attributes with single quotes in the styleguide (#11903) Co-authored-by: Thibaud Colas --- CHANGELOG.txt | 2 ++ docs/advanced_topics/icons.md | 2 +- docs/releases/6.1.2.md | 1 + docs/releases/6.2.md | 1 + wagtail/contrib/styleguide/tests.py | 33 +++++++++++++++++++ wagtail/contrib/styleguide/views.py | 5 ++- .../templates/tests/icons/single-quotes.svg | 1 + 7 files changed, 43 insertions(+), 2 deletions(-) create mode 100644 wagtail/test/testapp/templates/tests/icons/single-quotes.svg diff --git a/CHANGELOG.txt b/CHANGELOG.txt index f38c4ab438..b78550f8ae 100644 --- a/CHANGELOG.txt +++ b/CHANGELOG.txt @@ -12,6 +12,7 @@ Changelog * Fix: Ensure permission labels on group permissions page are translated where available (Matt Westcott) * Fix: Preserve whitespace in comment replies (Elhussein Almasri) * Fix: Address layout issues in the title cell of universal listings (Sage Abdullah) + * Fix: Support SVG icon id attributes with single quotes in the styleguide (Sage Abdullah) * Docs: Remove duplicate section on frontend caching proxies from performance page (Jake Howard) * Docs: Document `restriction_type` field on PageViewRestriction (Shlomo Markowitz) * Docs: Document Wagtail's bug bounty policy (Jake Howard) @@ -24,6 +25,7 @@ Changelog ~~~~~~~~~~~~~~~~~~ * Fix: Fix client-side handling of select inputs within `ChoiceBlock` (Matt Westcott) + * Fix: Support SVG icon id attributes with single quotes in the styleguide (Sage Abdullah) 6.1.1 (21.05.2024) diff --git a/docs/advanced_topics/icons.md b/docs/advanced_topics/icons.md index 341104dfe5..26af40ae22 100644 --- a/docs/advanced_topics/icons.md +++ b/docs/advanced_topics/icons.md @@ -30,7 +30,7 @@ Draw or download an icon and save it in a template folder: The `svg` tag should: -- Set the `id="icon-"` attribute, icons are referenced by this name. +- Set the `id="icon-"` attribute, icons are referenced by this `name`. The `name` should only contain lowercase letters, numbers, and hyphens. - Set the `xmlns="http://www.w3.org/2000/svg"` attribute. - Set the `viewBox="..."` attribute, and no `width` and `height` attributes. - If the icon should be mirrored in right-to-left (RTL) languages, set the `class="icon--directional"` attribute. diff --git a/docs/releases/6.1.2.md b/docs/releases/6.1.2.md index ae43dcda6d..2e14651b97 100644 --- a/docs/releases/6.1.2.md +++ b/docs/releases/6.1.2.md @@ -14,3 +14,4 @@ depth: 1 ### Bug fixes * Fix client-side handling of select inputs within `ChoiceBlock` (Matt Westcott) + * Support SVG icon id attributes with single quotes in the styleguide (Sage Abdullah) diff --git a/docs/releases/6.2.md b/docs/releases/6.2.md index 78c3394a79..18dc09d91f 100644 --- a/docs/releases/6.2.md +++ b/docs/releases/6.2.md @@ -25,6 +25,7 @@ depth: 1 * Ensure permission labels on group permissions page are translated where available (Matt Westcott) * Preserve whitespace in comment replies (Elhussein Almasri) * Address layout issues in the title cell of universal listings (Sage Abdullah) + * Support SVG icon id attributes with single quotes in the styleguide (Sage Abdullah) ### Documentation diff --git a/wagtail/contrib/styleguide/tests.py b/wagtail/contrib/styleguide/tests.py index f354ac6b9d..6a2693474b 100644 --- a/wagtail/contrib/styleguide/tests.py +++ b/wagtail/contrib/styleguide/tests.py @@ -21,3 +21,36 @@ class TestStyleGuide(WagtailTestUtils, TestCase): self.assertContains(response, custom_css) self.assertContains(response, widget_css) self.assertContains(response, widget_js) + + def test_icons(self): + def register_icons(icons): + return icons + [ + "tests/icons/single-quotes.svg", # id='icon-single-quotes' + ] + + with self.register_hook("register_icons", register_icons): + response = self.client.get(reverse("wagtailstyleguide")) + + self.assertEqual(response.status_code, 200) + # Should render the icons in the table + self.assertContains( + response, + '', + html=True, + ) + self.assertContains( + response, + "Custom icon with single quotes for the id", + html=True, + ) + # Built-in icon, not from the above hook + self.assertContains( + response, + '', + html=True, + ) + self.assertContains( + response, + "Custom icon", + html=True, + ) diff --git a/wagtail/contrib/styleguide/views.py b/wagtail/contrib/styleguide/views.py index ad3570dd69..79df162628 100644 --- a/wagtail/contrib/styleguide/views.py +++ b/wagtail/contrib/styleguide/views.py @@ -101,7 +101,10 @@ class ExampleForm(forms.Form): ) -icon_id_pattern = re.compile(r"id=\"icon-([a-z0-9-]+)\"") +# Allow single and double quotes for the ID. +# For simplicity and readability, we don't enforce the opening +# and closing quotes to match. +icon_id_pattern = re.compile(r"""id=["']icon-([a-z0-9-]+)["']""") icon_comment_pattern = re.compile(r"") diff --git a/wagtail/test/testapp/templates/tests/icons/single-quotes.svg b/wagtail/test/testapp/templates/tests/icons/single-quotes.svg new file mode 100644 index 0000000000..c245a93aec --- /dev/null +++ b/wagtail/test/testapp/templates/tests/icons/single-quotes.svg @@ -0,0 +1 @@ +