Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 3 commits into from
May 30, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c23e3ef
Allow icons with unquoted/single-quoted ids in the styleguide
laymonage Apr 29, 2024
4ef9909
Remove support for unquoted icon id attributes
thibaudcolas May 30, 2024
a57090f
release notes for #11903
thibaudcolas May 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion docs/advanced_topics/icons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pretty sure this limitation only exists because of the styleguide's regex, and the icons can technically still be used elsewhere as long as the ID is prefixed with icon-. Alternatively we could update the regex to be more permissive.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think alphanumeric hyphenated should be fine? I’d be surprised if XML allowed much more.

Copy link
Member Author

@laymonage laymonage May 30, 2024 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it allows at least a few others (e.g. :, ., _) and of course, uppercase letters should have no issues
https://www.w3.org/TR/REC-xml/#NT-Name

But yeah I don't think we want to encourage people to use unconventional IDs as that may cause other unexpected issues down the line. (Uppercase letters might not be so controversial though)

- 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.
Expand Down
1 change: 1 addition & 0 deletions docs/releases/6.1.2.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
1 change: 1 addition & 0 deletions docs/releases/6.2.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
33 changes: 33 additions & 0 deletions wagtail/contrib/styleguide/tests.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,36 @@ def test_styleguide(self):
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,
)
5 changes: 4 additions & 1 deletion wagtail/contrib/styleguide/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,10 @@ def media(self):
)


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


Expand Down
1 change: 1 addition & 0 deletions wagtail/test/testapp/templates/tests/icons/single-quotes.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.