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

Remove name-based width logic from date-input component #969

Merged
merged 3 commits into from
Aug 31, 2018

Conversation

kr8n3r
Copy link

@kr8n3r kr8n3r commented Aug 30, 2018

In 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:

{{ 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"
    }
  ]
}) }}

Fixes: #905
Trello ticket: https://trello.com/c/xTcZVm2O/1391-1-remove-name-based-width-logic-from-date-input-component

@kr8n3r kr8n3r changed the title Remove name-based width logic from date input component Remove name-based width logic from date-input component Aug 30, 2018
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-969 August 30, 2018 06:55 Inactive
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-969 August 30, 2018 07:02 Inactive
@kr8n3r kr8n3r added this to the v2.0.0 milestone Aug 30, 2018
@joelanman
Copy link
Contributor

This is a tricky problem. Our pattern for dates is to have short fields for day and month, and then a longer field for year.

I understand and agree with this change, it's just a shame that users have to add classes manually to get the standard component. It would be great if they didn't need to do that.

Copy link
Contributor

@36degrees 36degrees left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@36degrees
Copy link
Contributor

Rebased and merged in @igloosi's absence.

@36degrees 36degrees deleted the remove-name-based-logic-from-date-input branch August 31, 2018 10:11
36degrees added a commit that referenced this pull request Aug 31, 2018
Since the class name is no longer automatically added (as changed in #969), we have to either provide the width class ourselves or omit the `items` attribute in order to get the ‘default’ items array, which includes the classes.

Where possible, I’ve opted for the latter – the only case where this isn’t currently possible is the passport expiry date example in the ‘error summary with messages’ example, where I’ve added the width classes.
@NickColley NickColley mentioned this pull request Sep 10, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants