Support SVG icon id attributes with single quotes in the styleguide (#11903)

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

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)

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-<name>"` attribute, icons are referenced by this name.
+-   Set the `id="icon-<name>"` 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.

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)

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

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,
+            '<use href="#icon-single-quotes"></use>',
+            html=True,
+        )
+        self.assertContains(
+            response,
+            "<td>Custom icon with single quotes for the id</td>",
+            html=True,
+        )
+        # Built-in icon, not from the above hook
+        self.assertContains(
+            response,
+            '<use href="#icon-h1"></use>',
+            html=True,
+        )
+        self.assertContains(
+            response,
+            "<td>Custom icon</td>",
+            html=True,
+        )

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"<!--!(.*?)-->")
 
 

wagtail/test/testapp/templates/tests/icons/single-quotes.svg

@@ -0,0 +1 @@
+<svg id='icon-single-quotes' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><!--! Custom icon with single quotes for the id --></svg>