From 1e1d5c265f5d4fcc311b48ffde5e37267c9dcd60 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Wed, 6 Nov 2019 08:52:55 +0000 Subject: [PATCH] Fix classes on character count when in error state MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The template correctly adds whitespace between classnames when either the `—error` modifier is added or when custom classes are added, but not when both are added. This means for example that if you were passing the custom class `app-character-count--custom-modifier` to the character count component whilst it was in an error state, the resulting class attribute would be `govuk-js-character-count govuk-textarea--errorapp-character-count--custom-modifier` – neither the error styling nor the custom class would be correctly applied. Fixes #1630 --- CHANGELOG.md | 1 + src/govuk/components/character-count/template.njk | 2 +- .../components/character-count/template.test.js | 12 ++++++++++++ 3 files changed, 14 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8d53b19056..db69991158 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -40,6 +40,7 @@ You can now set attributes in the `` element of page template. ### Fixes - [Pull request #1620: Only add underline to back link when href exists ](https://github.com/alphagov/govuk-frontend/pull/1620). - [Pull request #1609: Update hex value for secondary text to improve contrast](https://github.com/alphagov/govuk-frontend/pull/1609) +- [Pull request #1631: Fix classes on character count when in error state](https://github.com/alphagov/govuk-frontend/pull/1631) ## 3.3.0 (Feature release) diff --git a/src/govuk/components/character-count/template.njk b/src/govuk/components/character-count/template.njk index 950bcaf203..229c53a82c 100644 --- a/src/govuk/components/character-count/template.njk +++ b/src/govuk/components/character-count/template.njk @@ -11,7 +11,7 @@ rows: params.rows, value: params.value, formGroup: params.formGroup, - classes: 'govuk-js-character-count ' + (' govuk-textarea--error' if params.errorMessage) + (params.classes if params.classes), + classes: 'govuk-js-character-count' + (' govuk-textarea--error' if params.errorMessage) + (' ' + params.classes if params.classes), label: { html: params.label.html, text: params.label.text, diff --git a/src/govuk/components/character-count/template.test.js b/src/govuk/components/character-count/template.test.js index d7480400db..d4ca73dc3e 100644 --- a/src/govuk/components/character-count/template.test.js +++ b/src/govuk/components/character-count/template.test.js @@ -168,6 +168,18 @@ describe('Character count', () => { const $component = $('.govuk-js-character-count') expect($component.hasClass('govuk-textarea--error')).toBeTruthy() }) + + it('renders with classes', () => { + const $ = render('character-count', { + errorMessage: { + text: 'Error message' + }, + classes: 'app-character-count--custom-modifier' + }) + + const $component = $('.govuk-js-character-count') + expect($component.hasClass('app-character-count--custom-modifier')).toBeTruthy() + }) }) describe('with dependant components', () => {