-
Notifications
You must be signed in to change notification settings - Fork 344
Description
At the moment, date-input passes a CSS class to input when it wants to mark a field as having an error:
classes: "govuk-date-input__input " + (item.classes if item.classes), |
govuk-frontend/src/components/date-input/date-input.yaml
Lines 125 to 126 in e70f59d
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 'error' param is added to input so that, when using the input template, the user (be it an application using the input template or another component) doesn't need to have inferred knowledge of the class names. The classes param would still exist so this approach would also still work, but the preferred approach would be to use the error param.
This would mean adding an error param to input as follows:
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 | params.error %} govuk-input--error{% 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
error: true
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.