search

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.18k stars 325 forks source link

Add an icon next to an input using the govukInput macro #924

Closed dashouse closed 9 months ago

dashouse commented 6 years ago

I was trying to replicate this design with the Input macro:

screen shot 2018-07-23 at 12 49 09

In the end I did this with HTML like this

<div class="govuk-form-group">
  <label class="govuk-label govuk-label--s" for="cvv">
    Card security code
  </label>
  <span id="cvv-hint" class="govuk-hint">
    The last 3 digits on the back of the card
  </span>
  <input class="govuk-input govuk-input--width-4 govuk-!-display-inline-block" id="cvv" name="post-code" type="text">
  <span class="govuk-!-display-inline-block" style="vertical-align: middle; height: 40px;">
    <img alt="image of the back of a bank card" src="https://png.icons8.com/ios/1600/bank-card-back-side.png" style="height: 40px;">
  </span>
</div>

My expectation was that I would be able to import the label, hint, error and input components separately, add in an additional image and wrap it in govuk-form-group - This works, however I was unable to remove the second govuk-form-group that comes with the govukInput macro.

kr8n3r commented 6 years ago

if we added caller to the input, the macro would look like that:

{% call govukInput({
    label: {
      text: 'Card security code',
      classes: 'govuk-label--s'
    },
    hint: {
      text: 'The last 3 digits on the back of the card'
    },
    classes: 'govuk-input--width-4 govuk-!-display-inline-block',
    id: 'cvv'
  }) %}
   <span class="govuk-!-display-inline-block" style="vertical-align: middle; height: 40px;">
    <img alt="image of the back of a bank card" src="https://png.icons8.com/ios/1600/bank-card-back-side.png" style="height: 40px;">
  </span>
{% endcall %}

not sure this is much better than using plain html

Position of the caller depends where the custom content is in relation to the defined output. So in this case you can't magically prepend the image left of the input

NickColley commented 6 years ago

I guess one pseudo code could be:

{% call fieldset() %}
    {{ label() }}
    {{ hint() }}
    {{ input() }}
    <span class="govuk-!-display-inline-block" style="vertical-align: middle; height: 40px;">
        <img alt="image of the back of a bank card" src="https://png.icons8.com/ios/1600/bank-card-back-side.png" style="height: 40px;">
    </span>
{% endcall %}

Of course this would depend on the components being less coupled

kr8n3r commented 6 years ago

yeah that's the alternative. then the question is what is the default output of say {{ input() }} ? if it's just the input and they would need to manually supply the id of it to the label's for attribute, then we're not doing much to help them build stuff over plain html.

sure, no need to specify classes.

colinrotherham commented 9 months ago

I'm going to close this one since we merged support for custom before/after content today 🎉