Design: Add feature to add prefix or suffix label to input component.

[adorayi]

Given the input component is to be used in a context that requires a prefix or suffix, such as cost with currency, or measurements
When a designer or developer wishes to add a prefix or suffix
Then they have an option to do so in design and in code

[adorayi]

cds-snc/gcds-components#502

Describe the feature request.
We would like to be able to put explanatory text directly before or after an input or select within gcds components.

Describe the use case.
Enter the last three digits of your SIN:
XXX-XXX-[ ]

image

Describe the preferred solution.
We think this would be best implemented by exposing slots for before-elements or after-elements. Another idea might be exposing an interior template that could be modified by developers.

Describe all alternatives.
We can place the explanatory text after the entire gcds-input, but our designers won't like this as much.
We can put the gcds-input inside a wrapper with display:inline-block and put the explanatory text to the right side, but if there is an error message then the width of the gcds-input and its label, etc will be restricted. This wouldn't work at all for explanatory text to the left.
We can create separate components for label and error, but then we have to manually manage the DOM representing the error, as well as the error state on the input/select.