Add new start button icon #1341
Conversation
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1341
NickColley
force-pushed
the
new-start-button-rebased
branch
from
1ffeeff
to
bf058e6
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1341
|
@aliuk2012 I've explored some changes in this branch, will chat with you when we're both in the office. 👍 Can't tell if it's just my eyes or if this version of the icon looks weird now, will have a look again tomorrow... Think I might have messed the path up... |
src/components/button/template.njk
Outdated
| {% if params.isStartButton %} | ||
| {% set iconHtml %} | ||
| <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" focusable="false"> | ||
| <path d="M0 0h13l20 20-20 20H0l21-19z" fill="currentColor"></path> |
There was a problem hiding this comment.
| <path d="M0 0h13l20 20-20 20H0l21-19z" fill="currentColor"></path> | |
| <path d="M0 0h13l20 20-20 20H0l20-20z" fill="currentColor"></path> |
NickColley
force-pushed
the
new-start-button-rebased
branch
from
bf058e6
to
c340492
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1341
NickColley
force-pushed
the
new-start-button-rebased
branch
from
c340492
to
ee4c3f6
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1341
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1341
NickColley
force-pushed
the
new-start-button-rebased
branch
from
44e33c3
to
adeb8e3
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1341
src/components/button/_button.scss
Outdated
| .govuk-button__start-icon { | ||
| margin-top: -.125em; | ||
| margin-right: -.08333333333333333em; | ||
| margin-left: .4166666666666667em; |
There was a problem hiding this comment.
When I initially did this the icon scaled alongside the font size, but to keep it consistent with the current implementation it no longer does that.
So with that in mind we don't need to use relative units (em), so I've changed it back to pixels.
There was a problem hiding this comment.
I think this should be:
margin-top: -3px;
margin-right: 0; (or not there)
margin-left: govuk-spacing(1);
@include govuk-media-query($from: desktop) {
margin-left: govuk-spacing(2);
}
The spacing scale does not change below govuk-spacing(4) so this change from 1 to 2 would need to be done with media queries
There was a problem hiding this comment.
Seems like a lot of complex code when we could be using relative units there, let's go with that for consistency...
NickColley
force-pushed
the
new-start-button-rebased
branch
from
adeb8e3
to
1022317
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1341
NickColley
force-pushed
the
new-start-button-rebased
branch
from
1022317
to
c14c074
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1341
|
@hannalaakso there's not really a great way to keep the icon right aligned on smaller screens that I know of with flexbox, so this felt like an OK compromise for the benefits we get from the inline SVG. |
This changes the icon to be a full opacity, which is consistent with all other icons. This design was originally proposed by Mia Allers.
NickColley
force-pushed
the
new-start-button-rebased
branch
from
c14c074
to
e45a40b
Compare
V3:
V3 Focused:
V3 Legacy mode:
V3 Legacy mode focused:
V2:
V2 Focused:
Changed colours:
Issues:
SVG:
Internet Explorer 8 does not support SVG and will therefore not display the icon. We did not feel that it warranted a fallback as it did not affect how the user would interact with the button and the icon was purely used for presentation.
Flexbox
As this implementation uses flexbox not all browsers support it. I've checked with @dashouse and this shouldn't be a problem as the icon will wrap instead of floating to the right side.
Example where browser doesn't support flexbox