Publish prefix / suffix variant for text input

[hannalaakso]

What

Publish the prefix / suffix variant for text input contributed by @simonwhatley 🎉

Further detail

Preview
Guidance PR: alphagov/govuk-design-system#1269
Component PR: #1816
Feedback from June 2020 Working Group review: alphagov/govuk-design-system#1269 (comment)

Done when

• Ensure that the variant works on smaller viewports - see comment for details
• Swap span elements for div elements (so that they can contain block level elements if needed)
• Consider adding some more stress cases to Frontend review app
• Add automated tests for the variant

[hannalaakso]

Behaviour on small viewports

We need to make sure that users on smaller (possibly zoomed in) viewports can use the component and the input remains visible.

Current behaviour

This is iPhone XS on iOS 13 with 175% zoom (using the a/A buttons).

Suggested behaviour

We could split the component onto multiple lines on small resolutions, with something like

(but with borders etc. tidied up)

[CharlotteDowns]

Design Suggestions

Flexible across viewports

@hannalaakso and I discussed if it was possible to have a flexible way of expanding the prefix and suffix areas to fit the content that is placed into them.

This may be hard to achieve and maintain across operating systems and browsers.

Prefix integrated into input

We also discussed whether it was possible to include the prefix within the input – seen in a Lloyds bank example.

This again would need user research to determine whether it improves the usability and if it would adhere to the latest WCAG guidelines.

Results of conversation

In conclusion the solution Hannah proposed earlier on this card where she has mocked up a 100% width solution for prefixes, inputs and suffixes seems like the most suitable design.