alphagov/govuk-frontend

Add width param to input

Closed this issue · 3 comments

penx commented

Similar to #1150, at the moment, date-input passes a CSS class to input when it wants to change the width:

classes: "govuk-date-input__input " + (item.classes if item.classes),

name: day
classes: govuk-input--width-2 govuk-input--error

This implies that the user of the date-input has inferred knowledge of the inner workings (CSS class name) of input.

I propose that an 'width' param is added to input, that can be an integer within a given set, for the same reasons as #1150.

e.g. in input/template.njk:

before:

  <input class="govuk-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"

after:

  <input class="govuk-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-input--error{% endif %} {%- if params.width %} govuk-input--width-{{ params.width }}{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"

And changing the date-input examples as follows:

before:

        name: day
        classes: govuk-input--width-2 govuk-input--error

after:

        name: day
        classes: govuk-input--width-2
        width: 2

This may seem like a trivial issue for users of the nunjucks templates - but when working on ports (e.g. using CSSinJS or CSS modules) it is useful for one component/template to not have to have knowledge of the inner workings of another.

We triaged this with the team and decided that if we were going to do this, the same changes should be done across the board on all our macros and the change should be documented. The effort assigned reflects this.

Closing this as it is part of #460

penx commented

Can this be reopened as it doesn't seem to have been addressed in #460?

(as per my comment, for this to be resolved, the fixtures should not contain CSS classes)