LG-568 Visual design tweak: address confirmation page#2445
Conversation
| html: { autocomplete: 'off', method: :put, role: 'form', class: 'mt2' }) do |f| | ||
| = f.label :phone, label: t('idv.form.phone'), class: 'bold' | ||
| = f.input :phone, required: true, input_html: { class: 'us-phone' }, label: false, | ||
| = f.input :phone, required: true, input_html: { class: 'us-phone sm-col-8' }, label: false, |
There was a problem hiding this comment.
Is this the correct place to put this class? I didn't understand where the original html was for this input form and maybe it should go there instead.
There was a problem hiding this comment.
That looks right if you want to add that class to the input element. f.input generates an input inside a wrapper div. The input_html option allows you to configure the HTML output for the input. There is also a wrapper_html option you can use to configure the html for the wrapper div.
Ref: https://github.com/plataformatec/simple_form#usage
| - title t('idv.titles.phone') | ||
|
|
||
| h1.h2.my0 = t('idv.titles.session.phone') | ||
| h1.h3.my0 = t('idv.titles.session.phone') |
There was a problem hiding this comment.
I'd rather see a class attached to the h2 suggesting a smaller size that select the heading level based on the visual design. But I'm not sure how much we try to follow good semantics in our HTML.
There was a problem hiding this comment.
I think that it is an h1 and he's attached a class to it that suggests a smaller heading size. The old class list was h2 my0 and now it is h3 my0. The element itself is still an h1.
There was a problem hiding this comment.
Yup. You're right. I got stuck on the class name looking like the element name.
|
Looks like you got stuck on a flickering spec in CI. I've restarted CI and I'll open a PR to fix that spec in a couple minutes. |
3 participants
This updates the visual design of the address verification page to reduce the size of the header and remove a phone number requirement.