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

SVG viewBox attribute issue with Angular #1780

Closed
chaigh-uk opened this issue Apr 6, 2020 · 0 comments · Fixed by #1838
Closed

SVG viewBox attribute issue with Angular #1780

chaigh-uk opened this issue Apr 6, 2020 · 0 comments · Fixed by #1838
Labels
button footer header 🕔 hours A well understood issue which we expect to take less than a day to resolve.
Milestone
v3.8.0

Comments

@chaigh-uk
Copy link

The viewBox attribute on the SVGs within some of the UI components (e.g. https://design-system.service.gov.uk/styles/page-template/ ) are in lowercase (viewbox). This isn't an issue when used in most browsers as they convert it to camel case and all works correctly, however I'm using Angular and their compiler does not so the SVGs get cut off or are incorrectly sized.

Maybe Angular should handle this better but it's probably safer for the attribute to be updated to be camel cased in the example HTML code for components.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
@36degrees 36degrees added the awaiting triage Needs triaging by team label Apr 6, 2020
@kellylee-gds kellylee-gds added 🕔 hours A well understood issue which we expect to take less than a day to resolve. button footer header and removed awaiting triage Needs triaging by team labels Apr 15, 2020
36degrees added a commit that referenced this issue Jun 17, 2020
@36degrees
Correctly camel case SVG attributes
b327931 
As raised in #1780, lowercasing this attribute causes issue with Angular.

I've searched the codebase for any other camel-cased SVG attributes and viewBox is the only one that we use:

```
$ ag 'allowReorder|attributeName|attributeType|autoReverse|baseFrequency|baseProfile|calcMode|clipPathUnits|contentScriptType|contentStyleType|diffuseConstant|edgeMode|externalResourcesRequired|filterRes|filterUnits|glyphRef|gradientTransform|gradientUnits|kernelMatrix|kernelUnitLength|keyPoints|keySplines|keyTimes|lengthAdjust|limitingConeAngle|markerHeight|markerUnits|markerWidth|maskContentUnits|maskUnits|numOctaves|pathLength|patternContentUnits|patternTransform|patternUnits|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|referrerPolicy|refX|refY|repeatCount|repeatDur|requiredExtensions|requiredFeatures|specularConstant|specularExponent|spreadMethod|startOffset|stdDeviation|stitchTiles|surfaceScale|systemLanguage|tableValues|targetX|targetY|textLength|viewBox|viewTarget|xChannelSelector|yChannelSelector|zoomAndPan' src

src/govuk/components/footer/template.njk
61:          viewBox="0 0 483.2 195.7"

src/govuk/components/button/template.njk
27:<svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">

src/govuk/components/header/template.njk
24:            viewBox="0 0 132 97"

src/govuk/assets/images/govuk-mask-icon.svg
1:<svg xmlns="http://www.w3.org/2000/svg" width="132" height="97" viewBox="0 0 132 97" version="1.1">
```

Fixes #1780.
This was referenced Jun 17, 2020
Merged
Closed
@36degrees 36degrees added this to the v3.8.0 milestone Jul 21, 2020
36degrees added a commit to alphagov/tech-docs-gem that referenced this issue Jul 19, 2021
@36degrees
Update header
9b5dcce 
This syncs the header__logotype element with the latest version from GOV.UK Frontend, including changes from:

- alphagov/govuk-frontend#1780 (changed in v3.8.0)
- alphagov/govuk-frontend#2229 (changed in v3.13.0)
36degrees added a commit to alphagov/tech-docs-gem that referenced this issue Jul 19, 2021
@36degrees
Update header
0e9ac92 
This syncs the header__logotype element with the latest version from GOV.UK Frontend, including changes from:

- alphagov/govuk-frontend#1780 (changed in v3.8.0)
- alphagov/govuk-frontend#2229 (changed in v3.13.0)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
button footer header 🕔 hours A well understood issue which we expect to take less than a day to resolve.
Projects
None yet
Milestone
v3.8.0
Development

Successfully merging a pull request may close this issue.

Correctly camel case SVG attributes in the header and footer alphagov/govuk-frontend
3 participants
@36degrees @kellylee-gds @chaigh-uk