Add width param to input
Closed this issue · 3 comments
Similar to #1150, at the moment, date-input passes a CSS class to input when it wants to change the width:
govuk-frontend/src/components/date-input/date-input.yaml
Lines 125 to 126 in e70f59d
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.
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)