Fix ‘backwards compatibility’ for the date input.

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)
 

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
             </label>
 
-            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2" id="dob-day" name="dob-day" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="number" pattern="[0-9]*">
           </div>
         </div>
 
@@ -45,7 +45,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des
               Month
             </label>
 
-            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2" id="dob-month" name="dob-month" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="number" pattern="[0-9]*">
           </div>
         </div>
 
@@ -55,7 +55,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des
               Year
             </label>
 
-            <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--width-4" id="dob-year" name="dob-year" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="number" pattern="[0-9]*">
           </div>
         </div>
 
@@ -124,7 +124,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des
               Day
             </label>
 
-            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2 govuk-input--error" id="dob-errors-day" name="day" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-errors-day" name="day" type="number" pattern="[0-9]*">
           </div>
         </div>
 
@@ -134,7 +134,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des
               Month
             </label>
 
-            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2 govuk-input--error" id="dob-errors-month" name="month" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-errors-month" name="month" type="number" pattern="[0-9]*">
           </div>
         </div>
 
@@ -144,7 +144,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des
               Year
             </label>
 
-            <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--width-4 govuk-input--error" id="dob-errors-year" name="year" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="dob-errors-year" name="year" type="number" pattern="[0-9]*">
           </div>
         </div>
 
@@ -215,7 +215,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des
               Day
             </label>
 
-            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2 govuk-input--error" id="dob-day-error-day" name="dob-day-error-day" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-day-error-day" name="dob-day-error-day" type="number" pattern="[0-9]*">
           </div>
         </div>
 
@@ -225,7 +225,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des
               Month
             </label>
 
-            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2" id="dob-day-error-month" name="dob-day-error-month" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day-error-month" name="dob-day-error-month" type="number" pattern="[0-9]*">
           </div>
         </div>
 
@@ -235,7 +235,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des
               Year
             </label>
 
-            <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--width-4" id="dob-day-error-year" name="dob-day-error-year" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-day-error-year" name="dob-day-error-year" type="number" pattern="[0-9]*">
           </div>
         </div>
 
@@ -307,7 +307,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des
               Day
             </label>
 
-            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2" id="dob-month-error-day" name="dob-month-error-day" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month-error-day" name="dob-month-error-day" type="number" pattern="[0-9]*">
           </div>
         </div>
 
@@ -317,7 +317,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des
               Month
             </label>
 
-            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2 govuk-input--error" id="dob-month-error-month" name="dob-month-error-month" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-month-error-month" name="dob-month-error-month" type="number" pattern="[0-9]*">
           </div>
         </div>
 
@@ -327,7 +327,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des
               Year
             </label>
 
-            <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--width-4" id="dob-month-error-year" name="dob-month-error-year" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-month-error-year" name="dob-month-error-year" type="number" pattern="[0-9]*">
           </div>
         </div>
 
@@ -399,7 +399,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des
               Day
             </label>
 
-            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2" id="dob-year-error-day" name="dob-year-error-day" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-year-error-day" name="dob-year-error-day" type="number" pattern="[0-9]*">
           </div>
         </div>
 
@@ -409,7 +409,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des
               Month
             </label>
 
-            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2" id="dob-year-error-month" name="dob-year-error-month" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-year-error-month" name="dob-year-error-month" type="number" pattern="[0-9]*">
           </div>
         </div>
 
@@ -419,7 +419,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des
               Year
             </label>
 
-            <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--width-4 govuk-input--error" id="dob-year-error-year" name="dob-year-error-year" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="dob-year-error-year" name="dob-year-error-year" type="number" pattern="[0-9]*">
           </div>
         </div>
 
@@ -487,7 +487,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des
               Day
             </label>
 
-            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2" id="dob-day" name="dob-day" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="number" pattern="[0-9]*">
           </div>
         </div>
 
@@ -497,7 +497,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des
               Month
             </label>
 
-            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2" id="dob-month" name="dob-month" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="number" pattern="[0-9]*">
           </div>
         </div>
 
@@ -507,7 +507,7 @@ Find out when to use the date input component in your service in the [GOV.UK Des
               Year
             </label>
 
-            <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--width-4" id="dob-year" name="dob-year" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="number" pattern="[0-9]*">
           </div>
         </div>
 

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 %}
 
     <div class="govuk-date-input__item">
       {{ govukInput({

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-')
+      )
+    })
+  })
 })