-
Notifications
You must be signed in to change notification settings - Fork 334
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.
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
Various improvements to Button component #552
Conversation
src/components/button/_button.scss
Outdated
@@ -130,6 +99,10 @@ | |||
cursor: default; | |||
} | |||
|
|||
:focus { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does this need to be &:focus
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good catch! 👏
0dbeaaa
to
529a532
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Went through commit by commit, look like sensible reasoned changes, will need to do some manual testing before approving.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks like a sensible bunch of tidy ups / improvements.
I tested this to work correctly:
-natively in Chrome, FF, Safari
-with Browserstack in IE8-11, Edge, Galaxy S8 (Samsung Internet, Chrome), iPhone 6 (Safari)
529a532
to
9e573fb
Compare
Rebased against master. Pushed an additional commit which ensures that link styles are overridden, which was removed in 7fd770c. Not sure how to document this in the changelog… the only 'effective' change now is the removal of the IE7 outline fix, everything else should just be removing redundant styling and tidying up the Sass. Thoughts? |
Checked the last commit against the various browsers again, looks good 👍 Re: changelog, we do have very small changes like "Button hover colour now has a semantic Sass name: $govuk-button-hover-colour" already documented so the ones in this PR don't feel any less worthy of being mentioned. However I thought our intended audience were service teams who want to know what has changed since last version and I don't know how useful such granular information is... But this is not to do with this PR... happy to approve this as soon as the changelog is updated. |
9e573fb
to
dab67ef
Compare
This is a hangover from when the button mixin could be used to generate buttons of different colours. Now that we have one colour palette for buttons, we can remove this logic and define the button colour in the same place we define the background colour.
We needed this in Elements, when we did not give buttons a border. Now that they have a border, they do not need an outline as well.
This is exactly the same as the shadow defined on the `govuk-c-button` class, so there’s no need to redefine it here.
I see this as part of the styling of the ‘default’ state of the button, so it makes sense to group it with the other ‘core’ govuk-c-button rules, before we start introducing states.
This code was copied from Frontend Toolkit. Unfortunately, there’s nothing in the comment or its history to tell us what version of IE8 the issue it is trying to address occurs in. As far as I can tell, this is not an issue that affects IE8 (I can’t see any difference to the button in any state in IE8 when this line is removed, and references to this `filter: chroma` hack tend to talk about IE7) so I think we can remove it.
dab67ef
to
3166f58
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💯
I suggest walking through the individual commits to understand the changes.