Mark selection buttons with a class that matches their input #317
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
In govuk_elements we’d like to differentiate between selection buttons that contain a radio and those that contain a checkbox. This initialises selection buttons with a namespaced class that we can bind to.
8 tasks
|
Looks good to me 👍 |
|
Thanks @robinwhittleton 👍 |
robinwhittleton
pushed a commit
that referenced
this pull request
Sep 1, 2016
Merged
gemmaleigh
added a commit
to alphagov/govuk-prototype-kit
that referenced
this pull request
Sep 5, 2016
https://raw.githubusercontent.com/alphagov/govuk_frontend_toolkit/master /CHANGELOG.md # 4.18.0 - Add GOVUK.ShowHideContent JavaScript to support showing and hiding content, toggled by radio buttons and checkboxes ([PR #315](alphagov/govuk_frontend_toolkit#315)). # 4.17.0 - SelectionButtons will add a class to the label with the type of the child input ([PR #317](alphagov/govuk_frontend_toolkit#317))
gemmaleigh
added a commit
to alphagov/govuk_accessibility_sandbox
that referenced
this pull request
Sep 6, 2016
https://github.com/alphagov/govuk_frontend_toolkit/blob/master/CHANGELOG .md # 4.18.0 - Add GOVUK.ShowHideContent JavaScript to support showing and hiding content, toggled by radio buttons and checkboxes ([PR #315](alphagov/govuk_frontend_toolkit#315)). # 4.17.0 - SelectionButtons will add a class to the label with the type of the child input ([PR #317](alphagov/govuk_frontend_toolkit#317)) # 4.16.1 - Fix anchor-buttons.js to trigger a native click event, also rename to shimLinksWithButtonRole.js to explain what it does - Add tests for shimLinksWithButtonRole ([PR #310](alphagov/govuk_frontend_toolkit#310)) # 4.16.0 - Add Department for International Trade organisation ([PR #308](alphagov/govuk_frontend_toolkit#308)) # 4.15.0 - Add support for Google Analytics fieldsObject ([PR #298](alphagov/govuk_frontend_toolkit#298)) - anchor-buttons.js: normalise keyboard behaviour between buttons and links with a button role ([PR #297](alphagov/govuk_frontend_toolkit#297)) # 4.14.1 - Fix tabular number sizing in Firefox ([PR #301](alphagov/govuk_frontend_toolkit#301)) # 4.14.0 - Allow use of multiple GA customDimensionIndex. See [this section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/ docs/javascript.md#using-google-custom-dimensions-with-your-own-statisti cal-model) of the documentation for more information. - Configurable duration (in days) for AB Test cookie. See [this section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/ docs/javascript.md#multivariate-test-framework) of the documentation for more information. - Allow base scripts to run within a module loader. See [this PR](alphagov/govuk_frontend_toolkit#290) for more information. # 4.13.0 - Make headings block-level by default (PR #200). If you are styling elements you want to be inline with heading includes, you’ll need to explicitly make them inline in your CSS. # 4.12.0 - Increase button padding to match padding from GOV.UK elements (PR #275). If you have UI which depends on the padding set by the button mixin in the frontend toolkit and this is not overridden by button padding set by GOV.UK elements, this change will affect it. # 4.11.0 - Remove the GDS-Logo font-face definition (PR #272) - Move the @Viewport statements to govuk_template (PR #272). If you upgrade to this version of govuk_frontend_toolkit and you’re also using govuk_template you’ll need to upgrade that to at least 0.17.2 to maintain compatibility with desktop IE10 in snap mode. # 4.10.0 - Allow New Transport font stack to be overridden by apps using `$toolkit-font-stack` and `$toolkit-font-stack-tabular` (PR #230) # 4.9.1 - Fix phase banner alignment (PR #266) # 4.9.0 - Add websafe organisation colours - Split colours into two files with backwards-compatible colours.scss replacement # 4.8.2 - Add GOV.UK lint to lint scss files (PR #260) - Remove reference to old colour palette (PR #256) - Fix link to GOV.UK elements - tabular data # 4.8.1 - Update DEFRA brand colour to new green (PR #249) # 4.8.0 - Pass cohort name to analytics when using multivariate test (PR #251) # 4.7.0 - Add 'mailto' tracking to GOV.UK Analytics (PR #244) # 4.6.1 - Use the Sass variable $light-blue for link active and hover colours (PR #242)
gemmaleigh
added a commit
to alphagov/service-manual-frontend
that referenced
this pull request
Oct 7, 2016
https://github.com/alphagov/govuk_frontend_toolkit/blob/master/CHANGELOG .md # 4.18.3 - For smaller screens (<768px) ensure that the GOVUK.StickAtTopWhenScrolling JS "unsticks" the element which was previously "stuck" (by removing both the class which sets fixed positioning and the shim). ([PR #329](alphagov/govuk_frontend_toolkit#329)) # 4.18.2 - Remove unnecessary print font fallback that causes regression downstream ([PR #328](alphagov/govuk_frontend_toolkit#328)) - Update tooling to use npm script rather than grunt-shell ([PR #327](alphagov/govuk_frontend_toolkit#327)) # 4.18.1 - Fix error in IE - remove trailing comma from shimLinksWithButtonRole JavaScript ([PR #323](alphagov/govuk_frontend_toolkit#323)). # 4.18.0 - Add GOVUK.ShowHideContent JavaScript to support showing and hiding content, toggled by radio buttons and checkboxes ([PR #315](alphagov/govuk_frontend_toolkit#315)). # 4.17.0 - SelectionButtons will add a class to the label with the type of the child input ([PR #317](alphagov/govuk_frontend_toolkit#317)) # 4.16.1 - Fix anchor-buttons.js to trigger a native click event, also rename to shimLinksWithButtonRole.js to explain what it does - Add tests for shimLinksWithButtonRole ([PR #310](alphagov/govuk_frontend_toolkit#310)) # 4.16.0 - Add Department for International Trade organisation ([PR #308](alphagov/govuk_frontend_toolkit#308)) # 4.15.0 - Add support for Google Analytics fieldsObject ([PR #298](alphagov/govuk_frontend_toolkit#298)) - anchor-buttons.js: normalise keyboard behaviour between buttons and links with a button role ([PR #297](alphagov/govuk_frontend_toolkit#297)) # 4.14.1 - Fix tabular number sizing in Firefox ([PR #301](alphagov/govuk_frontend_toolkit#301)) # 4.14.0 - Allow use of multiple GA customDimensionIndex. See [this section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/ docs/javascript.md#using-google-custom-dimensions-with-your-own-statisti cal-model) of the documentation for more information. - Configurable duration (in days) for AB Test cookie. See [this section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/ docs/javascript.md#multivariate-test-framework) of the documentation for more information. - Allow base scripts to run within a module loader. See [this PR](alphagov/govuk_frontend_toolkit#290) for more information. # 4.13.0 - Make headings block-level by default (PR #200). If you are styling elements you want to be inline with heading includes, you’ll need to explicitly make them inline in your CSS. # 4.12.0 - Increase button padding to match padding from GOV.UK elements (PR #275). If you have UI which depends on the padding set by the button mixin in the frontend toolkit and this is not overridden by button padding set by GOV.UK elements, this change will affect it. # 4.11.0 - Remove the GDS-Logo font-face definition (PR #272) - Move the @Viewport statements to govuk_template (PR #272). If you upgrade to this version of govuk_frontend_toolkit and you’re also using govuk_template you’ll need to upgrade that to at least 0.17.2 to maintain compatibility with desktop IE10 in snap mode.
gemmaleigh
added a commit
to alphagov/service-manual-frontend
that referenced
this pull request
Oct 8, 2016
https://github.com/alphagov/govuk_frontend_toolkit/blob/master/CHANGELOG .md 4.18.3 - For smaller screens (<768px) ensure that the GOVUK.StickAtTopWhenScrolling JS "unsticks" the element which was previously "stuck" (by removing both the class which sets fixed positioning and the shim). ([PR 329](alphagov/govuk_frontend_toolkit#329)) 4.18.2 - Remove unnecessary print font fallback that causes regression downstream ([PR 328](alphagov/govuk_frontend_toolkit#328)) - Update tooling to use npm script rather than grunt-shell ([PR 327](alphagov/govuk_frontend_toolkit#327)) 4.18.1 - Fix error in IE - remove trailing comma from shimLinksWithButtonRole JavaScript ([PR 323](alphagov/govuk_frontend_toolkit#323)). 4.18.0 - Add GOVUK.ShowHideContent JavaScript to support showing and hiding content, toggled by radio buttons and checkboxes ([PR 315](alphagov/govuk_frontend_toolkit#315)). 4.17.0 - SelectionButtons will add a class to the label with the type of the child input ([PR 317](alphagov/govuk_frontend_toolkit#317)) 4.16.1 - Fix anchor-buttons.js to trigger a native click event, also rename to shimLinksWithButtonRole.js to explain what it does - Add tests for shimLinksWithButtonRole ([PR 310](alphagov/govuk_frontend_toolkit#310)) 4.16.0 - Add Department for International Trade organisation ([PR 308](alphagov/govuk_frontend_toolkit#308)) 4.15.0 - Add support for Google Analytics fieldsObject ([PR 298](alphagov/govuk_frontend_toolkit#298)) - anchor-buttons.js: normalise keyboard behaviour between buttons and links with a button role ([PR 297](alphagov/govuk_frontend_toolkit#297)) 4.14.1 - Fix tabular number sizing in Firefox ([PR 301](alphagov/govuk_frontend_toolkit#301)) 4.14.0 - Allow use of multiple GA customDimensionIndex. See [this section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/ docs/javascript.md#using-google-custom-dimensions-with-your-own-statisti cal-model) of the documentation for more information. - Configurable duration (in days) for AB Test cookie. See [this section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/ docs/javascript.md#multivariate-test-framework) of the documentation for more information. - Allow base scripts to run within a module loader. See [this PR](alphagov/govuk_frontend_toolkit#290) for more information. 4.13.0 - Make headings block-level by default (PR #200). If you are styling elements you want to be inline with heading includes, you’ll need to explicitly make them inline in your CSS. 4.12.0 - Increase button padding to match padding from GOV.UK elements (PR 275). If you have UI which depends on the padding set by the button mixin in the frontend toolkit and this is not overridden by button padding set by GOV.UK elements, this change will affect it. 4.11.0 - Remove the GDS-Logo font-face definition (PR #272) - Move the @Viewport statements to govuk_template (PR #272). If you upgrade to this version of govuk_frontend_toolkit and you’re also using govuk_template you’ll need to upgrade that to at least 0.17.2 to maintain compatibility with desktop IE10 in snap mode.
gemmaleigh
added a commit
to alphagov/service-manual-frontend
that referenced
this pull request
Oct 8, 2016
https://github.com/alphagov/govuk_frontend_toolkit/blob/master/CHANGELOG .md 4.18.3 - For smaller screens (<768px) ensure that the GOVUK.StickAtTopWhenScrolling JS "unsticks" the element which was previously "stuck" (by removing both the class which sets fixed positioning and the shim). ([PR 329](alphagov/govuk_frontend_toolkit#329)) 4.18.2 - Remove unnecessary print font fallback that causes regression downstream ([PR 328](alphagov/govuk_frontend_toolkit#328)) - Update tooling to use npm script rather than grunt-shell ([PR 327](alphagov/govuk_frontend_toolkit#327)) 4.18.1 - Fix error in IE - remove trailing comma from shimLinksWithButtonRole JavaScript ([PR 323](alphagov/govuk_frontend_toolkit#323)). 4.18.0 - Add GOVUK.ShowHideContent JavaScript to support showing and hiding content, toggled by radio buttons and checkboxes ([PR 315](alphagov/govuk_frontend_toolkit#315)). 4.17.0 - SelectionButtons will add a class to the label with the type of the child input ([PR 317](alphagov/govuk_frontend_toolkit#317)) 4.16.1 - Fix anchor-buttons.js to trigger a native click event, also rename to shimLinksWithButtonRole.js to explain what it does - Add tests for shimLinksWithButtonRole ([PR 310](alphagov/govuk_frontend_toolkit#310)) 4.16.0 - Add Department for International Trade organisation ([PR 308](alphagov/govuk_frontend_toolkit#308)) 4.15.0 - Add support for Google Analytics fieldsObject ([PR 298](alphagov/govuk_frontend_toolkit#298)) - anchor-buttons.js: normalise keyboard behaviour between buttons and links with a button role ([PR 297](alphagov/govuk_frontend_toolkit#297)) 4.14.1 - Fix tabular number sizing in Firefox ([PR 301](alphagov/govuk_frontend_toolkit#301)) 4.14.0 - Allow use of multiple GA customDimensionIndex. See [this section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/ docs/javascript.md#using-google-custom-dimensions-with-your-own-statisti cal-model) of the documentation for more information. - Configurable duration (in days) for AB Test cookie. See [this section](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/ docs/javascript.md#multivariate-test-framework) of the documentation for more information. - Allow base scripts to run within a module loader. See [this PR](alphagov/govuk_frontend_toolkit#290) for more information. 4.13.0 - Make headings block-level by default (PR #200). If you are styling elements you want to be inline with heading includes, you’ll need to explicitly make them inline in your CSS. 4.12.0 - Increase button padding to match padding from GOV.UK elements (PR 275). If you have UI which depends on the padding set by the button mixin in the frontend toolkit and this is not overridden by button padding set by GOV.UK elements, this change will affect it. 4.11.0 - Remove the GDS-Logo font-face definition (PR #272) - Move the @Viewport statements to govuk_template (PR #272). If you upgrade to this version of govuk_frontend_toolkit and you’re also using govuk_template you’ll need to upgrade that to at least 0.17.2 to maintain compatibility with desktop IE10 in snap mode.
robinwhittleton
pushed a commit
to alphagov/govuk_elements
that referenced
this pull request
Nov 25, 2016
When building the new radios / checkboxes we didn’t want it to be a breaking change that would require a code audit, so we changed the JS (in alphagov/govuk_frontend_toolkit#317) to automatically add them. We should, however, have put this solution through a perf test. On a slower connection or bigger page there’s a noticeable delay before the inputs appear. While the JS will automatically add the classes if needed, there shouldn’t be any problem with developers manually updating their markup to include them. This would mitigate the performance problem. This updates our markup recommendations to include those classes.
robinwhittleton
pushed a commit
to alphagov/govuk_elements
that referenced
this pull request
Nov 25, 2016
When building the new radios / checkboxes we didn’t want it to be a breaking change that would require a code audit, so we changed the JS (in alphagov/govuk_frontend_toolkit#317) to automatically add them. We should, however, have put this solution through a perf test. On a slower connection or bigger page there’s a noticeable delay before the inputs appear. While the JS will automatically add the classes if needed, there shouldn’t be any problem with developers manually updating their markup to include them. This would mitigate the performance problem. This updates our markup recommendations to include those classes.
robinwhittleton
pushed a commit
to alphagov/govuk_elements
that referenced
this pull request
Nov 28, 2016
When building the new radios / checkboxes we didn’t want it to be a breaking change that would require a code audit, so we changed the JS (in alphagov/govuk_frontend_toolkit#317) to automatically add them. We should, however, have put this solution through a perf test. On a slower connection or bigger page there’s a noticeable delay before the inputs appear. While the JS will automatically add the classes if needed, there shouldn’t be any problem with developers manually updating their markup to include them. This would mitigate the performance problem. This updates our markup recommendations to include those classes.
Guntrisoft
added a commit
to guidance-guarantee-programme/pension_guidance
that referenced
this pull request
Dec 2, 2016
- Removed phase-banner scss file as no longer needed Full list of changes: SelectionButtons will add a class to the label with the type of the child input alphagov/govuk_frontend_toolkit#317 Add GOVUK.ShowHideContent JavaScript to support showing and hiding content, toggled by radio buttons and checkboxes alphagov/govuk_frontend_toolkit#315 Fix error in IE - remove trailing comma from shimLinksWithButtonRole JavaScript alphagov/govuk_frontend_toolkit#323 Remove unnecessary print font fallback that causes regression downstream alphagov/govuk_frontend_toolkit#328 Update tooling to use npm script rather than grunt-shell alphagov/govuk_frontend_toolkit#327 For smaller screens (<768px) ensure that the GOVUK.StickAtTopWhenScrolling JS "unsticks" the element which was previously "stuck" (by removing both the class which sets fixed positioning and the shim). alphagov/govuk_frontend_toolkit#329 Lint codebase using standard alphagov/govuk_frontend_toolkit#334 Add semicolons at the start of IIFE's alphagov/govuk_frontend_toolkit#339 Removal of external link styles and icons, if you are using the external-link-* mixins you will need to remove them from your codebase alphagov/govuk_frontend_toolkit#293 Correct spelling of the 'accordion' icon, you will need to check for the incorrect spelling 'accordian' and update if you are using this icon alphagov/govuk_frontend_toolkit#345 Amend GOVUK.StickAtTopWhenScrolling to resize the sticky element and shim when the .js-sticky-resize class is set alphagov/govuk_frontend_toolkit#343 Allow custom options in GOVUK.analytics.trackPageview alphagov/govuk_frontend_toolkit#332 Fix role="button" click shim alphagov/govuk_frontend_toolkit#347 Make font variables lowercase alphagov/govuk_frontend_toolkit#348 Update selection button documentation alphagov/govuk_frontend_toolkit#350 Change colour used in phase tags to govuk-blue alphagov/govuk_frontend_toolkit#353
Guntrisoft
added a commit
to guidance-guarantee-programme/pension_guidance
that referenced
this pull request
Dec 2, 2016
- Removed phase-banner scss file as no longer needed Full list of changes: SelectionButtons will add a class to the label with the type of the child input alphagov/govuk_frontend_toolkit#317 Add GOVUK.ShowHideContent JavaScript to support showing and hiding content, toggled by radio buttons and checkboxes alphagov/govuk_frontend_toolkit#315 Fix error in IE - remove trailing comma from shimLinksWithButtonRole JavaScript alphagov/govuk_frontend_toolkit#323 Remove unnecessary print font fallback that causes regression downstream alphagov/govuk_frontend_toolkit#328 Update tooling to use npm script rather than grunt-shell alphagov/govuk_frontend_toolkit#327 For smaller screens (<768px) ensure that the GOVUK.StickAtTopWhenScrolling JS "unsticks" the element which was previously "stuck" (by removing both the class which sets fixed positioning and the shim). alphagov/govuk_frontend_toolkit#329 Lint codebase using standard alphagov/govuk_frontend_toolkit#334 Add semicolons at the start of IIFE's alphagov/govuk_frontend_toolkit#339 Removal of external link styles and icons, if you are using the external-link-* mixins you will need to remove them from your codebase alphagov/govuk_frontend_toolkit#293 Correct spelling of the 'accordion' icon, you will need to check for the incorrect spelling 'accordian' and update if you are using this icon alphagov/govuk_frontend_toolkit#345 Amend GOVUK.StickAtTopWhenScrolling to resize the sticky element and shim when the .js-sticky-resize class is set alphagov/govuk_frontend_toolkit#343 Allow custom options in GOVUK.analytics.trackPageview alphagov/govuk_frontend_toolkit#332 Fix role="button" click shim alphagov/govuk_frontend_toolkit#347 Make font variables lowercase alphagov/govuk_frontend_toolkit#348 Update selection button documentation alphagov/govuk_frontend_toolkit#350 Change colour used in phase tags to govuk-blue alphagov/govuk_frontend_toolkit#353
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.
In govuk_elements we’d like to differentiate between selection buttons that contain a radio and those that contain a checkbox. This initialises selection buttons with a namespaced class that we can bind to.