Remove name-based width logic from date-input component

CHANGELOG.md

@@ -26,6 +26,51 @@
 
   ([PR #968](https://github.com/alphagov/govuk-frontend/pull/968))
 
+- Remove name-based width logic from date-input component
+
+  In [1.1 release](https://github.com/alphagov/govuk-frontend/pull/857/files#diff-e94394b2ac1d4f73991af98e4fa34fa3L32)
+  we removed styling which made the year field 4 characters wide, but was
+  coupled to the field's name.
+
+  However, to avoid making this a breaking release, we added logic to
+  automatically add the width classes based on the name.
+
+  We are now removing this behaviour. Instead, users need pass explicit classes
+  for each field in the `items` object for the desired width of the input field.
+
+  If you are using the Nunjucks macro, you need to provide a width class for
+  each item, for example:
+
+  ```
+  {{ govukDateInput({
+    "id": "dob",
+    "name": "dob",
+    "fieldset": {
+      "legend": {
+        "text": "What is your date of birth?"
+      }
+    },
+    "items": [
+      {
+        "name": "day",
+        "classes": "govuk-input--width-2"
+      },
+      {
+        "name": "month",
+        "classes": "govuk-input--width-2"
+      },
+      {
+        "name": "year",
+        "classes": "govuk-input--width-4"
+      }
+    ]
+  }) }}
+  ```
+
+  If you are using plain HTML, you need to manualy add a width-based class, such
+  as  `govuk-input--width-2` or `govuk-input--width-4` to the input fields.
+
+  ([PR #969](https://github.com/alphagov/govuk-frontend/pull/969))
 
 🆕 New features:
 

src/components/date-input/template.njk

@@ -53,34 +53,14 @@
     {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
     {%- if params.id %} id="{{ params.id }}"{% endif %}>
     {% for item in dateInputItems %}
-
-    {# 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({
         label: {
           text: item.label if item.label else item.name | capitalize,
           classes: "govuk-date-input__label"
         },
         id: item.id if item.id else (params.id + "-" + item.name),
-        classes: "govuk-date-input__input " + inputWidthClass + (item.classes if item.classes),
+        classes: "govuk-date-input__input " + (item.classes if item.classes),
         name: (params.name + "-" + item.name) if params.name else item.name,
         value: item.value,
         type: "number",

src/components/date-input/template.test.js

@@ -448,122 +448,4 @@ describe('Date input', () => {
     expect($monthInput.hasClass('undefined')).toBeFalsy()
     expect($yearInput.hasClass('undefined')).toBeFalsy()
   })
-
-  // 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('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: [
-          {
-            '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-')
-      )
-    })
-  })
 })