From 8d6fc3e847758cebb50569d3d04f7573beaf73db Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Mon, 16 Jul 2018 16:07:43 +0100 Subject: [PATCH 1/4] =?UTF-8?q?Fix=20=E2=80=98backwards=20compatibility?= =?UTF-8?q?=E2=80=99=20for=20the=20date=20input.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The previous implementation meant that if your input _does not_ have the name ‘year’ it would always get the class ‘govuk-input--width-2`. Because this class is defined last [1] – after every other width class – this makes it impossible to make any field that does not have the name ‘year’ use any other width than 2 characters. This commit addresses this by: - not adding a width class if any other width class is present within the `item.classes` (it’s relatively a naive check for the string ‘govuk-input--width-‘ but it should do the job) - only adding appropriate classes if the input has the name ‘day’, ‘month’ or ‘year’ It also adds tests for this behaviour. Fixes #907 [1]: https://github.com/alphagov/govuk-frontend/blob/8f2fe567865729716fa4a04b0c6eeb5860da7441/src/components/input/_input.scss#L71-L73 --- src/components/date-input/template.njk | 20 ++++- src/components/date-input/template.test.js | 99 ++++++++++++++++++++++ 2 files changed, 117 insertions(+), 2 deletions(-) diff --git a/src/components/date-input/template.njk b/src/components/date-input/template.njk index 4024847a36..7af9e4609d 100644 --- a/src/components/date-input/template.njk +++ b/src/components/date-input/template.njk @@ -54,8 +54,24 @@ {%- if params.id %} id="{{ params.id }}"{% endif %}> {% for item in dateInputItems %} - {# @todo Remove this definition and any mentions of it on the next breaking release #} - {% set inputWidthClass = 'govuk-input--width-4 ' if item.name == 'year' else 'govuk-input--width-2 ' %} + {# Maintain backwards compatibility by automatically adding input width + classes based on the input name: + + - If there is a width class set on this item, do nothing. + - Otherwise, if the input's name is 'year', add a 4 char width class + - Otherwise, if the input's name is 'month' or 'day', add a 2 char width class + - Otherwise, do nothing. + + @todo Remove this behaviour in the next breaking release: + https://github.com/alphagov/govuk-frontend/issues/905 #} + {% set inputWidthClass = '' %} + {% if not item.classes or not 'govuk-input--width-' in item.classes %} + {% if item.name == 'year' %} + {% set inputWidthClass = 'govuk-input--width-4 ' %} + {% elseif item.name == 'month' or item.name == 'day' %} + {% set inputWidthClass = 'govuk-input--width-2 ' %} + {% endif %} + {% endif %}
{{ govukInput({ diff --git a/src/components/date-input/template.test.js b/src/components/date-input/template.test.js index 0a5d278472..82f6bac57a 100644 --- a/src/components/date-input/template.test.js +++ b/src/components/date-input/template.test.js @@ -361,4 +361,103 @@ describe('Date input', () => { expect(htmlWithClassName($, '.govuk-fieldset')).toMatchSnapshot() }) + + // https://github.com/alphagov/govuk-frontend/issues/905 + describe('to maintain backwards compatibility', () => { + it('automatically sets width for the day input if no width class provided', () => { + const $ = render('date-input', { + items: [ + { + 'name': 'day', + 'classes': 'not-a-width-class' + }, + { + 'name': 'month' + }, + { + 'name': 'year' + } + ] + }) + + const $dayInput = $('[name="day"]') + expect($dayInput.hasClass('govuk-input--width-2')).toBeTruthy() + }) + + it('automatically sets width for the month input if no width class provided', () => { + const $ = render('date-input', { + items: [ + { + 'name': 'day' + }, + { + 'name': 'month', + 'classes': 'not-a-width-class' + }, + { + 'name': 'year' + } + ] + }) + + const $monthInput = $('[name="month"]') + expect($monthInput.hasClass('govuk-input--width-2')).toBeTruthy() + }) + + it('automatically sets width for the year input if no width class provided', () => { + const $ = render('date-input', { + items: [ + { + 'name': 'day' + }, + { + 'name': 'month' + }, + { + 'name': 'year', + 'classes': 'not-a-width-class' + } + ] + }) + + const $yearInput = $('[name="year"]') + expect($yearInput.hasClass('govuk-input--width-4')).toBeTruthy() + }) + + it('does not add classes if a width class is provided', () => { + const $ = render('date-input', { + items: [ + { + 'name': 'day' + }, + { + 'name': 'month' + }, + { + 'name': 'year', + 'classes': 'govuk-input--width-10' + } + ] + }) + + const $yearInput = $('[name="year"]') + expect($yearInput.hasClass('govuk-input--width-4')).not.toBeTruthy() + }) + + it('does not add classes for fields with different names', () => { + const $ = render('date-input', { + items: [ + { + 'name': 'foo', + 'classes': 'a-class' + } + ] + }) + + const $fooInput = $('[name="foo"]') + expect($fooInput.attr('class')).not.toEqual( + expect.stringContaining('govuk-input--width-') + ) + }) + }) }) From 191f8f825ef0ea0d29b80864a6c04663c4bb788d Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Mon, 16 Jul 2018 16:21:59 +0100 Subject: [PATCH 2/4] Update READMEs --- src/components/date-input/README.md | 36 ++++++++++++++--------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/date-input/README.md b/src/components/date-input/README.md index d6a341bfc5..3a907421c4 100644 --- a/src/components/date-input/README.md +++ b/src/components/date-input/README.md @@ -35,7 +35,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des Day - +
@@ -45,7 +45,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des Month - + @@ -55,7 +55,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des Year - + @@ -124,7 +124,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des Day - + @@ -134,7 +134,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des Month - + @@ -144,7 +144,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des Year - + @@ -215,7 +215,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des Day - + @@ -225,7 +225,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des Month - + @@ -235,7 +235,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des Year - + @@ -307,7 +307,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des Day - + @@ -317,7 +317,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des Month - + @@ -327,7 +327,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des Year - + @@ -399,7 +399,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des Day - + @@ -409,7 +409,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des Month - + @@ -419,7 +419,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des Year - + @@ -487,7 +487,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des Day - + @@ -497,7 +497,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des Month - + @@ -507,7 +507,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des Year - + From 2ea133f9b026ffafad5ee72acf9119fa0c52f54f Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 17 Jul 2018 11:44:13 +0100 Subject: [PATCH 3/4] Document fix in changelog --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index bcd317c73c..91328a88ac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -38,6 +38,9 @@ visible state of the component. ([PR #912])(https://github.com/alphagov/govuk-frontend/pull/912) +- Fixes an issue where it's not possible to make any field that does not have + the name ‘year’ use any other width than 2 characters + ([PR #908])(https://github.com/alphagov/govuk-frontend/pull/908) ## 1.1.0 (feature release) From 4b724a181c749f53257d89143537bd9211ca4cbd Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 17 Jul 2018 11:51:45 +0100 Subject: [PATCH 4/4] Add explicit test for no classes --- src/components/date-input/template.test.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/components/date-input/template.test.js b/src/components/date-input/template.test.js index 82f6bac57a..e2e63138fa 100644 --- a/src/components/date-input/template.test.js +++ b/src/components/date-input/template.test.js @@ -424,6 +424,25 @@ describe('Date input', () => { expect($yearInput.hasClass('govuk-input--width-4')).toBeTruthy() }) + it('automatically sets width for an input if no classes provided', () => { + const $ = render('date-input', { + items: [ + { + 'name': 'day' + }, + { + 'name': 'month' + }, + { + 'name': 'year' + } + ] + }) + + const $dayInput = $('[name="day"]') + expect($dayInput.hasClass('govuk-input--width-2')).toBeTruthy() + }) + it('does not add classes if a width class is provided', () => { const $ = render('date-input', { items: [