Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add width param to input #1151

Closed
penx opened this issue Jan 21, 2019 · 3 comments
Closed

Add width param to input #1151

penx opened this issue Jan 21, 2019 · 3 comments
Labels
feature request User requests a new feature

Comments

@penx
Copy link

penx commented Jan 21, 2019

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.

@penx penx changed the title Add width prop to error Add width prop to input Jan 21, 2019
@penx penx changed the title Add width prop to input Add width param to input Jan 21, 2019
@hannalaakso hannalaakso added awaiting triage Needs triaging by team feature request User requests a new feature labels Jan 21, 2019
@kellylee-gds kellylee-gds added Priority: Low and removed awaiting triage Needs triaging by team labels Jan 23, 2019
@hannalaakso
Copy link
Member

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.

@aliuk2012
Copy link
Contributor

Closing this as it is part of #460

@penx
Copy link
Author

penx commented Dec 1, 2021

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request User requests a new feature
Projects
None yet
Development

No branches or pull requests

4 participants