New start button icon #1329
New start button icon #1329
Conversation
Ordering of :focus and :hover pseudo selectors are important to ensure focus replaces the hover state. The scenario is where a user might decide to use keyboard nagivation and the mouse is left hovered over the button. The button should use the focus state and not the hover state
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1329
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1329
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1329
src/components/button/template.njk
Outdated
| @@ -10,9 +21,14 @@ | |||
| {% endif %} | |||
| {% endif %} | |||
|
|
|||
| {% if params.isStartButton %} | |||
| {% set iconMarkUp = '<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="19px" width="30px"><path fill="currentColor" d="M7.5 0H0l10 10L0 20h7.5l10-10-10-10z"/></svg>' %} | |||
There was a problem hiding this comment.
I think we can improve the inline SVG by doing the following:
- remove 'data-name' attribute as it's not needed.
- add
.govuk-button__iconclass instead of styling the 'svg' element, this'll make sure if anyone else wants to put svg icons into this button we won't style theirs unintentionally. - change
heightandwidthto be relative units (em), this'll make the icon scale alongside the text.
There was a problem hiding this comment.
First two points have been done.
|
Worth checking the sizes for height and width so that they're consistent with the underlying icon, this'll make sure the padding for the button looks consistent with the previous version. |
| @include govuk-device-pixel-ratio { | ||
| background-image: govuk-image-url("icon-pointer-2x.png"); | ||
| background-size: 30px 19px; | ||
| @include govuk-media-query($until: tablet) { |
There was a problem hiding this comment.
Do we need to do this with a breakpoint?
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1329
|
Will there be a solid black chevron for a focussed start button?
|
|
@fofr yep :) |
| @@ -10,9 +21,14 @@ | |||
| {% endif %} | |||
| {% endif %} | |||
|
|
|||
| {% if params.isStartButton %} | |||
| {% set iconMarkUp = '<svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="19px" width="30px"><path fill="currentColor" d="M7.5 0H0l10 10L0 20h7.5l10-10-10-10z"/></svg>' %} | |||
There was a problem hiding this comment.
We should check if we need focusable=false on internet explorer here, since SVGs can be added to the tab order mistakenly.
There was a problem hiding this comment.
I've tested this in IE and it doesn't appear to be an issue. I think this might because the svg is already in a focusable element like a and button
|
Closing in favour of #1341 |
Replacing two tones png file for an inline SVG.
Before
After
👉 Demo
TODO: