diff --git a/CHANGELOG.md b/CHANGELOG.md index 16eaff6c9d..36b1b4beed 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ We've made fixes to GOV.UK Frontend in the following pull requests: - [#4906: Update the icon in the warning text component to match the defined text colour and background colour, rather than always being white on black](https://github.com/alphagov/govuk-frontend/pull/4906) - [#4919: Use canvas colour for cookie banner over hardcoded grey](https://github.com/alphagov/govuk-frontend/pull/4919) +- [#4899: Remove indents from conditional reveals in radios and checkboxes](https://github.com/alphagov/govuk-frontend/pull/4899) ## GOV.UK Frontend v5.3.0 (Feature release) diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml index 22d28a31aa..c85fa1c401 100644 --- a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml +++ b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml @@ -955,3 +955,16 @@ examples: - value: blue text: Blue values: [red, green] + - name: textarea in conditional + hidden: true + options: + name: conditional + items: + - value: other + text: Other + conditional: + html: | + + diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/template.njk b/packages/govuk-frontend/src/govuk/components/checkboxes/template.njk index ee73c72f1c..9493b6d730 100644 --- a/packages/govuk-frontend/src/govuk/components/checkboxes/template.njk +++ b/packages/govuk-frontend/src/govuk/components/checkboxes/template.njk @@ -59,7 +59,7 @@ {% if item.conditional.html %}
- {{ item.conditional.html | safe | trim | indent(6) }} + {{ item.conditional.html | safe | trim }}
{% endif %} {% endif %} diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/template.test.js b/packages/govuk-frontend/src/govuk/components/checkboxes/template.test.js index be1c601e1d..77fc39242c 100644 --- a/packages/govuk-frontend/src/govuk/components/checkboxes/template.test.js +++ b/packages/govuk-frontend/src/govuk/components/checkboxes/template.test.js @@ -353,6 +353,15 @@ describe('Checkboxes', () => { const $input = $('.govuk-checkboxes__input').first() expect($input.attr('data-aria-controls')).toBeFalsy() }) + + // Indentation in nunjucks can mutate the value of textareas, since + // textarea value is defined between the html tags + it('does not add space to the input value of textareas inside conditionals', () => { + const $ = render('checkboxes', examples['textarea in conditional']) + + const $textarea = $('#conditional-textarea') + expect($textarea.text()).toBe('test\n') + }) }) describe('when they include an error message', () => { diff --git a/packages/govuk-frontend/src/govuk/components/radios/radios.yaml b/packages/govuk-frontend/src/govuk/components/radios/radios.yaml index 6c270ef9d9..25a00f0d49 100644 --- a/packages/govuk-frontend/src/govuk/components/radios/radios.yaml +++ b/packages/govuk-frontend/src/govuk/components/radios/radios.yaml @@ -944,3 +944,16 @@ examples: - value: blue text: Blue value: green + - name: textarea in conditional + hidden: true + options: + name: conditional + items: + - value: other + text: Other + conditional: + html: | + + diff --git a/packages/govuk-frontend/src/govuk/components/radios/template.njk b/packages/govuk-frontend/src/govuk/components/radios/template.njk index c8ed88bbc4..80d9723b74 100644 --- a/packages/govuk-frontend/src/govuk/components/radios/template.njk +++ b/packages/govuk-frontend/src/govuk/components/radios/template.njk @@ -52,7 +52,7 @@ {% if item.conditional.html %}
- {{ item.conditional.html | safe | trim | indent(6) }} + {{ item.conditional.html | safe | trim }}
{% endif %} {% endif %} diff --git a/packages/govuk-frontend/src/govuk/components/radios/template.test.js b/packages/govuk-frontend/src/govuk/components/radios/template.test.js index 4308bb2d8e..71a527cf08 100644 --- a/packages/govuk-frontend/src/govuk/components/radios/template.test.js +++ b/packages/govuk-frontend/src/govuk/components/radios/template.test.js @@ -262,6 +262,15 @@ describe('Radios', () => { const $input = $('.govuk-radios__input').first() expect($input.attr('data-aria-controls')).toBeFalsy() }) + + // Indentation in nunjucks can mutate the value of textareas, since + // textarea value is defined between the html tags + it('does not add space to the input value of textareas inside conditionals', () => { + const $ = render('radios', examples['textarea in conditional']) + + const $textarea = $('#conditional-textarea') + expect($textarea.text()).toBe('test\n') + }) }) it('render divider', () => {