search

ministryofjustice / moj-design-system-backlog

MOJ Design System Community Backlog
https://moj-design-system.herokuapp.com/
9 stars 3 forks source link

Currency input #9

Open simonwhatley opened 5 years ago

simonwhatley commented 5 years ago

Service: Claim for Crown court defence Phase: Live Department: Legal Aid Agency

Currency notation on form fields

Help users to enter an amount of money in a specified currency.

currency-notation

Why

Anything else

helena-moj commented 5 years ago

Some related discussions on prefixes here: https://github.com/alphagov/govuk-design-system-backlog/issues/134

adamsilver commented 5 years ago

Done by @whatterz

gregtyler commented 4 years ago

We have a custom implementation of this component in my service in OPG, and I was looking at moving across to this version but found a bit of a blocker.

The component works great for prices:

image

But elsewhere in the service we're collecting email domains and the spacing doesn't quite line-up (the value is "julian-solicitors.co.uk"):

image

This is because the prefix has variable width (based on the text inside) but the padding on the text input is always 40px. I think either the prefix needs a max-width or it needs to sit in inline flow, rubbing shoulders with the input.

For what it's worth, I'm expecting to just drop to having a span sitting before the input. The width is flexible and removes the need for any CSS:

image
adamsilver commented 4 years ago

Thanks @gregtyler for raising this. Just to say that the last option you mention might prove a problem because it will increase the total width of that field. I think the overall width of the field shouldn't change—the bigger the prefix, the smaller the input (should it ‘rub shoulders’ and not be absolutely positioned)