Add width classes

[hannalaakso]

This PR

• Adds width classes, corresponding to form-control classes used in Elements but extending their use case
• Makes them into override classes because:
  • They need to be available to input, select and textarea components while overriding their width styles. Helpers do not override component styles
  • As overrides, they are also available to use cases such as setting width of text
• Makes naming of numbers in class names consistent with govuk-o-grid
• Adds examples to /examples/form-alignment (and close an unclosed form tag in the example above)

Trello ticket: https://trello.com/c/jEhFTAqY/458-add-width-form-control-in-elements-classes

Notes:

There is an old comment by Gemma in Elements about updating these form controls but it's not clear what that would have referred to. Just in case it jogs anyone's memory 🙂

[NickColley]

If these change the widths of the components, is this something that can be done with the other utility/helper classes?

[36degrees]

The form-controls file has not been included as part of the commit.

[hannalaakso]

Fixed now.

[36degrees]

The classes feel like they're a lot more generic than just form controls – but I'm not sure what a good name for them would be.

Also, they need to be wrapped in an @include exports… – at the minute I think you'll find those classes will be appearing many many times in the generated CSS.

[NickColley]

I have a feeling that these classes might not need to exist if they were wrapped in something that limits line-length, since that seems to be the purpose of these classes.

This would mean the text and the inputs could share the same method of limiting the width without using a grid. (Would allow the use of max-width: x rather than a media query approach also.)

[alex-ju]

I remember @dashouse iterated the idea of using ex units for setting the width of an input based on expected number of characters. It's worth discussing with him about it.

[hannalaakso]

Thanks @36degrees, I've added a @include exports wrapper.

[hannalaakso]

This PR can now be reviewed.

After various conversations, the classes are now width overrides. I've updated the PR description accordingly.

[36degrees]

👌

[dashouse]

I think my comment got lost in the ether.

Is it an issue that the grid uses "two-thirds" and the width classes use "2-3"?

[hannalaakso]

@dashouse: The naming is now consistent with govuk-o-grid.

[dashouse]

Update on naming looks good

Only concern is one-eighth as it will get very small before going to 100%. I'm not sure it's that usable? Don't mind it being in the code but haven't referenced it in the Design System layout page.

[36degrees]

LGTM!

[hannalaakso]

@dashouse As per our chat just now, I've removed the one-eighth class and created a card to review whether we should make the width classes more customisable for different breakpoints.