Prevent wrapping of individual date inputs

[colinrotherham]

Date inputs should group together as if they're a single field.

This fix keeps them together using white-space: nowrap, and removes the stray right margin from the year (reducing component width to 200px).

Fixes @andysellick's issue on #1250

[colinrotherham]

Sorry just spotted :last-of-type is IE9+ so moved margin to the left of siblings instead:

.govuk-date-input__item + .govuk-date-input__item {
  margin-left: govuk-spacing(4);
}

[colinrotherham]

Rebased with master

[hannalaakso]

Thanks @colinrotherham 🙂 It looks like this will prevent the wrapping of the items even if they don't fit in the container. Here, the date input is inside one of three .govuk-grid-column-one-third and overflows the container on smaller screens.

I wonder if the fix by GOV.UK Publishing to #1250 might work for us. It doesn't prevent wrapping but it looks a bit neater.

[colinrotherham]

Hi @hannalaakso yeah that was intentional. Just like the other fixed-width inputs I thought it shouldn't wrap.

Same if we added the --width-20 modifier.

If it's supposed to wrap then I'm mistaken! Sorry.

I'll amend this pull request to support wrapping with the appropriate vertical spacing.

Thanks

[hannalaakso]

Thanks @colinrotherham. We can try to get some design clarification to make sure I'm not making wrong assumptions here 😄

@dashouse Would you have any thoughts on how this this should be behave from a design perspective?

[dashouse]

Thanks for raising this (as always). Sorry to be a blocker, but I don't believe we have a solid decision on how we want the component to behave in this scenario.

The solution to the original issue on GOV.UK will be to "make it fit" in that instance using a few techniques that were discussed in the comment thread. This is because we have some knowns about that layout, for example the minimum width of the filter column.

As global change to this component I think we need to make a few decisions based on unknowns...for example, should we stack inputs, reduce space between inputs, change the input size, consider mobile breakpoint design vs limited width container design, should we be using flexbox for this...etc

For now it's probably best to close this PR, make sure this is properly recorded as an issue and potentially add some options.