Centre text on full width buttons #289
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Text on native input button/submit inputs is normally centred. When links are dressed as buttons the text is left aligned. This is okay on tablet views and above as buttons are only as wide as they need to be but on mobile views, buttons are full width. Centre the text for full width buttons for consistency.
|
@gavboulton Can you attach some screenshots before / after? |
|
@edwardhorsford I've updated the description. |
|
I'm a bit confused, in the elements site, the button text is already centred? |
|
@joelanman We have no examples of buttons on Elements that are actually links styled as buttons. Buttons are already centred, but links styled as buttons aren't. I'd consider this a bug. |
|
Yep, this is good. |
|
@gemmaleigh @robinwhittleton Could you release an updated version of govuk-elements-sass please? |
|
We’ve been merging some other things in today. Me or @gemmaleigh will probably be able to cut a new release tomorrow. |
robinwhittleton
pushed a commit
that referenced
this pull request
Aug 24, 2016
- Remove the images path override from the helpers partial ([PR #292](#292)). This will break background images that are currently using the `file-url` function from [the url-helpers partial in the frontend toolkit](https://github.com/alphagov/govuk_frontend_toolkit/blob/d54c9b26d314a6e6cb50ba90f6e96ca50049498f/stylesheets/_url-helpers.scss). As `$path` will vary from project to project you will need to define this in your main application stylesheet. - Bump govuk frontend toolkit to 4.16.1 ([PR #288](#288)). This adds space key activation to links with a role of button. - Form validation patterns for conditionally revealing content ([PR #286](#286)) - Centre text on full-width buttons ([PR #289](#289)) - Lint JS code using [StandardJS](http://standardjs.com/) ([PR #290](#290)) *This version deprecates external link styles. If your service has user research that indicates that external links are useful (or not) then we’d like to hear from you either on Slack, [digital-service-designers](https://groups.google.com/a/digital.cabinet-office.gov.uk/forum/#!forum/digital-service-designers) or [opening an issue](https://github.com/alphagov/govuk_elements/issues/new).*
robinwhittleton
pushed a commit
that referenced
this pull request
Aug 25, 2016
- Remove the images path override from the helpers partial ([PR #292](#292)). This will break background images that are currently using the `file-url` function from [the url-helpers partial in the frontend toolkit](https://github.com/alphagov/govuk_frontend_toolkit/blob/d54c9b26d314a6e6cb50ba90f6e96ca50049498f/stylesheets/_url-helpers.scss). As `$path` will vary from project to project you will need to define this in your main application stylesheet. - Bump govuk frontend toolkit to 4.16.1 ([PR #288](#288)). This adds space key activation to links with a role of button. - Form validation patterns for conditionally revealing content ([PR #286](#286)) - Centre text on full-width buttons ([PR #289](#289)) - Lint JS code using [StandardJS](http://standardjs.com/) ([PR #290](#290)) *This version deprecates external link styles. If your service has user research that indicates that external links are useful (or not) then we’d like to hear from you either on Slack, [digital-service-designers](https://groups.google.com/a/digital.cabinet-office.gov.uk/forum/#!forum/digital-service-designers) or [opening an issue](https://github.com/alphagov/govuk_elements/issues/new).*
Merged
gemmaleigh
added a commit
to alphagov/govuk-prototype-kit
that referenced
this pull request
Oct 13, 2016
# 2.0.0 - Remove the images path override from the helpers partial ([PR #292](alphagov/govuk_elements#292)). This will break background images that are currently using the `file-url` function from [the url-helpers partial in the frontend toolkit](https://github.com/alphagov/govuk_frontend_toolkit/blob/d54c9b2 6d314a6e6cb50ba90f6e96ca50049498f/stylesheets/_url-helpers.scss). As `$path` will vary from project to project you will need to define this in your main application stylesheet. - Bump govuk frontend toolkit to 4.16.1 ([PR #288](alphagov/govuk_elements#288)). This adds space key activation to links with a role of button. - Form validation patterns for conditionally revealing content ([PR #286](alphagov/govuk_elements#286)) - Centre text on full-width buttons ([PR #289](alphagov/govuk_elements#289)) - Lint JS code using [StandardJS](http://standardjs.com/) ([PR #290](alphagov/govuk_elements#290)) *This version deprecates external link styles. If your service has user research that indicates that external links are useful (or not) then we’d like to hear from you either on Slack, [digital-service-designers](https://groups.google.com/a/digital.cabinet- office.gov.uk/forum/#!forum/digital-service-designers) or [opening an issue](https://github.com/alphagov/govuk_elements/issues/new).* # 1.2.2 - Bump govuk frontend toolkit to 4.14.4 (PR #278) - Add a .column-full class (PR #270) - Add a file upload example (PR #268) - Remove the blue outline from the main content area (PR #265) - Fix legend text wrapping in IE (PR #248) # 1.2.1 - Consistent spacing underneath block labels and toggled content (PR #229) - Remove underlines from abbreviations in Firefox (PR #241)
Guntrisoft
added a commit
to guidance-guarantee-programme/pension_guidance
that referenced
this pull request
Dec 2, 2016
- made some minor adjustments to form to look good with new radio/checkbox styles - removed field_with_errors wrapping div which conflicts with new radio/checkbox JS modules Full list of changes: Remove the images path override from the helpers partial alphagov/govuk_elements#292 Bump govuk frontend toolkit to 4.16.1 alphagov/govuk_elements#288 Form validation patterns for conditionally revealing content alphagov/govuk_elements#286 Centre text on full-width buttons alphagov/govuk_elements#289 Lint JS code using StandardJS alphagov/govuk_elements#290 Update govuk_frontend_toolkit to 5.0.0 and govuk_template to 0.19.0 alphagov/govuk_elements#333 Add a select box example alphagov/govuk_elements#303 Add bullet points describing use of disabled buttons alphagov/govuk_elements#304 Add reasoning for native over custom file inputs Clear floats on details elements alphagov/govuk_elements#328 Add a .bold utility class alphagov/govuk_elements#321 Remove external link styles alphagov/govuk_elements#274 Remove rounded corners on form inputs elements and textareas in iOS alphagov/govuk_elements#342 Fix focus outline on form fields in Chrome / Safari alphagov/govuk_elements#346 Updates the contribution guidelines alphagov/govuk_elements#339 Recommend .visually-hidden over .visuallyhidden alphagov/govuk_elements#341 Add snippets for data visualisation examples alphagov/govuk_elements#350 alphagov/govuk_elements#351 Fix the grey left hand border example for Radios and checkboxes alphagov/govuk_elements#349 Fix the spacing underneath the "inline" block label example alphagov/govuk_elements#348 Custom radios / checkboxes alphagov/govuk_elements#296 Fix contrast issues with phase banners. Use $govuk-blue for the phase tag and update the examples alphagov/govuk_elements#364
Guntrisoft
added a commit
to guidance-guarantee-programme/pension_guidance
that referenced
this pull request
Dec 5, 2016
- made some minor adjustments to form to look good with new radio/checkbox styles - removed field_with_errors wrapping div which conflicts with new radio/checkbox JS modules Full list of changes: Remove the images path override from the helpers partial alphagov/govuk_elements#292 Bump govuk frontend toolkit to 4.16.1 alphagov/govuk_elements#288 Form validation patterns for conditionally revealing content alphagov/govuk_elements#286 Centre text on full-width buttons alphagov/govuk_elements#289 Lint JS code using StandardJS alphagov/govuk_elements#290 Update govuk_frontend_toolkit to 5.0.0 and govuk_template to 0.19.0 alphagov/govuk_elements#333 Add a select box example alphagov/govuk_elements#303 Add bullet points describing use of disabled buttons alphagov/govuk_elements#304 Add reasoning for native over custom file inputs Clear floats on details elements alphagov/govuk_elements#328 Add a .bold utility class alphagov/govuk_elements#321 Remove external link styles alphagov/govuk_elements#274 Remove rounded corners on form inputs elements and textareas in iOS alphagov/govuk_elements#342 Fix focus outline on form fields in Chrome / Safari alphagov/govuk_elements#346 Updates the contribution guidelines alphagov/govuk_elements#339 Recommend .visually-hidden over .visuallyhidden alphagov/govuk_elements#341 Add snippets for data visualisation examples alphagov/govuk_elements#350 alphagov/govuk_elements#351 Fix the grey left hand border example for Radios and checkboxes alphagov/govuk_elements#349 Fix the spacing underneath the "inline" block label example alphagov/govuk_elements#348 Custom radios / checkboxes alphagov/govuk_elements#296 Fix contrast issues with phase banners. Use $govuk-blue for the phase tag and update the examples alphagov/govuk_elements#364
Guntrisoft
added a commit
to guidance-guarantee-programme/pension_guidance
that referenced
this pull request
Dec 5, 2016
- made some minor adjustments to form to look good with new radio/checkbox styles Full list of changes: Remove the images path override from the helpers partial alphagov/govuk_elements#292 Bump govuk frontend toolkit to 4.16.1 alphagov/govuk_elements#288 Form validation patterns for conditionally revealing content alphagov/govuk_elements#286 Centre text on full-width buttons alphagov/govuk_elements#289 Lint JS code using StandardJS alphagov/govuk_elements#290 Update govuk_frontend_toolkit to 5.0.0 and govuk_template to 0.19.0 alphagov/govuk_elements#333 Add a select box example alphagov/govuk_elements#303 Add bullet points describing use of disabled buttons alphagov/govuk_elements#304 Add reasoning for native over custom file inputs Clear floats on details elements alphagov/govuk_elements#328 Add a .bold utility class alphagov/govuk_elements#321 Remove external link styles alphagov/govuk_elements#274 Remove rounded corners on form inputs elements and textareas in iOS alphagov/govuk_elements#342 Fix focus outline on form fields in Chrome / Safari alphagov/govuk_elements#346 Updates the contribution guidelines alphagov/govuk_elements#339 Recommend .visually-hidden over .visuallyhidden alphagov/govuk_elements#341 Add snippets for data visualisation examples alphagov/govuk_elements#350 alphagov/govuk_elements#351 Fix the grey left hand border example for Radios and checkboxes alphagov/govuk_elements#349 Fix the spacing underneath the "inline" block label example alphagov/govuk_elements#348 Custom radios / checkboxes alphagov/govuk_elements#296 Fix contrast issues with phase banners. Use $govuk-blue for the phase tag and update the examples alphagov/govuk_elements#364
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Text on native input button/submit inputs is normally centred. When links are dressed as buttons the text is left aligned. This is okay on tablet views and above as buttons are only as wide as they need to be but on mobile views, buttons are full width. Centre the text for full width buttons for consistency.
Before:
After:
