Fix buttons widths from BassCSS to USWDS migration

[aduth]

See: #4836

Why:

• Design system buttons appear as full-width at small viewport widths, which was not the case previously with BassCSS buttons. While many buttons in the IdP are intended to occupy full-width on mobile, there are some which are expected to collapse to their minimum width. This was accounted for as part of LG-4226 / LG-4226: Add explicit flexible width button modifier identity-design-system#197, but wasn't incorporated into the work of LG-3865: Remove BassCSS Module: Btn #4836.
• As part of this effort, there's a desire to improve consistency of how widths are applied to standard form button templates. @anniehirshman-gsa and myself had gone through each screen to verify the intended appearance and make changes as appropriate.

Status:

• Track down if there are other instances where we need flexible-width buttons
• Confirm whether there are other issues with unstyled links applying full-width by default (arguably, unstyled buttons should not ever be applying a width, but this is the default inherited from USWDS).
  • Currently in document capture, this is a problem resolved by applying width-auto utility class to the unstyled button. This was changed to render unstyled buttons as display: inline; by default.
• Confirm whether there are other issues with unstyled links overriding margin and padding conflicting with utility classes.
  • Currently in document capture, this is a problem resolved by using a wrapping element to apply padding Edit: Updated all instances of unstyled buttons applying margin by applying an equivalent padding to its parent container element instead.

Screenshot:

Before	After

[aduth]

Track down if there are other instances where we need flexible-width buttons

Method:

1. Checkout commit prior to merge commit of LG-3865: Remove BassCSS Module: Btn #4836: git checkout c69fc80~1
2. Project-wide search for BassCSS button classes
   • ag --ignore-dir={node_modules,vendor} "['"]btn "
   • ag --ignore-dir={node_modules,vendor} " f\.button([^%]|\s)+class: '"
3. Eliminate where classes also contain some width-modifying class (e.g. btn-wide, col-, block)

Candidates:

• identity-idp/app/views/saml_idp/shared/saml_post_binding.html.erb

  Line 27 in d6446cf

  <%= submit_tag t('forms.buttons.submit.default'), class: 'btn btn-primary' %>

• identity-idp/app/views/account_reset/pending/confirm.html.erb

  Line 6 in d6446cf

  class: 'btn usa-button usa-button--primary margin-right-6 no-grow',

• identity-idp/app/views/users/piv_cac_login/new.html.erb

  Line 14 in d6446cf

  class: 'btn btn-primary' %>

• identity-idp/app/views/users/forget_all_browsers/show.html.erb

  Line 11 in d6446cf

  <%= button_to(t('forms.buttons.confirm'), forget_all_browsers_path, method: 'delete', class: 'btn btn-primary margin-top-4') %>

• identity-idp/app/views/users/service_provider_inactive/index.html.erb

  Line 21 in d6446cf

  class: 'btn btn-primary margin-top-3'

• identity-idp/app/views/users/backup_code_setup/confirm_delete.html.erb

  Line 23 in d6446cf

  class: 'btn padding-2 rounded-lg border border-blue blue center' %>

• identity-idp/app/views/users/backup_code_setup/create.html.erb

  Lines 42 to 50 in d6446cf

  	<%= link_to t('forms.backup_code.download'), backup_code_download_path,
  	class: 'text-decoration-none ico btn-border ico-download' %>
  	<% end %>
  	<%= link_to t('forms.backup_code.print'), '#',
  	data: { print: true },
  	class: 'ico ico-print btn-border margin-left-2 text-decoration-none' -%>
  	<%= link_to t('links.copy'), '#',
  	class: 'text-decoration-none margin-left-2 clipboard btn-border ico ico-copy',
  	data: { "clipboard-text": @codes.join(' ') } -%>

• identity-idp/app/views/account_reset/request/show.html.erb

  Line 26 in d6446cf

  class: 'margin-left-2 btn-border display-inline-block ico ico-print text-decoration-none',

• identity-idp/app/views/users/backup_code_setup/edit.html.erb

  Line 23 in d6446cf

  class: 'btn padding-2 rounded-lg border border-blue blue center' %>

• identity-idp/app/views/users/piv_cac_authentication_setup/new.html.erb

  Line 47 in d6446cf

  <input type="submit" name="commit" value="<%= t('forms.piv_cac_setup.submit') %>" class="btn btn-primary" data-disable-with="Add PIV/CAC card" />

• identity-idp/app/views/users/piv_cac_setup_from_sign_in/prompt.html.erb

  Line 23 in d6446cf

  <%= submit_tag t('forms.piv_cac_setup.submit'), class: 'btn btn-primary margin-right-1' %>

• identity-idp/app/views/users/piv_cac_setup/confirm_delete.html.erb

  Line 20 in d6446cf

  <%= link_to t('links.cancel'), account_path, class: 'btn padding-2 rounded-lg border border-blue blue center' %>

  • † piv_cac_delete_desktop, piv_cac_delete_mobile

• identity-idp/app/views/users/service_provider_revoke/show.html.erb

  Line 16 in d6446cf

  class: 'btn btn-primary margin-top-4') %>

• identity-idp/app/views/users/totp_setup/confirm_delete.html.erb

  Line 20 in d6446cf

  <%= link_to t('links.cancel'), account_path, class: 'btn padding-2 rounded-lg border border-blue blue center' %>

• identity-idp/app/views/two_factor_authentication/piv_cac_verification/show.html.erb

  Line 14 in d6446cf

  class: 'btn btn-primary' %>

  • † piv_cac_desktop_after, piv_cac_desktop_before, piv_cac_mobile_after, piv_cac_mobile_before

• identity-idp/app/views/two_factor_authentication/totp_verification/show.html.erb

  Line 30 in d6446cf

  <%= submit_tag 'Submit', class: 'btn btn-primary text-top' %>

• identity-idp/app/views/two_factor_authentication/backup_code_verification/show.html.erb

  Line 14 in d6446cf

  <%= f.button :submit, t('forms.buttons.submit.default'), class: 'btn btn-primary' %>

  • † backup_code_desktop_after, backup_code_desktop_before, backup_code_mobile_after, backup_code_mobile_before

• identity-idp/app/views/two_factor_authentication/personal_key_verification/show.html.erb

  Line 14 in d6446cf

  <%= f.button :submit, t('forms.buttons.submit.default'), class: 'btn btn-primary' %>

  • † personal_key_desktop_after, personal_key_desktop_before, personal_key_mobile_after, personal_key_mobile_before

• identity-idp/app/views/users/passwords/edit.html.erb

  Line 17 in d6446cf

  <%= f.button :submit, t('forms.buttons.submit.update'), class: 'margin-top-2 margin-bottom-4' %>

  • † password_edit_mobile_before, password_edit_desktop_after, password_edit_desktop_before, password_edit_mobile_after

• identity-idp/app/views/devise/passwords/new.html.erb

  Line 23 in d6446cf

  <%= f.button :submit, t('forms.buttons.continue'), class: 'margin-top-2' %>

  • † forgot_password_desktop_after, forgot_password_desktop_before, forgot_password_mobile_after, forgot_password_mobile_before

• identity-idp/app/views/event_disavowal/new.html.erb

  Line 17 in d6446cf

  <%= f.button :submit, t('forms.passwords.edit.buttons.submit'), class: 'margin-bottom-4' %>

  • † event_disavow_mobile_after, event_disavow_mobile_before, event_disavow_desktop_after, event_disavow_desktop_before

• identity-idp/app/views/sign_up/email_resend/new.html.erb

  Line 11 in d6446cf

  <%= f.button :submit, t('forms.buttons.resend_confirmation'), class: 'margin-top-2 margin-bottom-1' %>

  • † email_resend_desktop_after, email_resend_desktop_before, email_resend_mobile_after, email_resend_mobile_before

• identity-idp/app/views/two_factor_authentication/options/index.html.erb

  Line 42 in d6446cf

  <%= f.button :submit, t('forms.buttons.continue') %>

• identity-idp/app/views/users/verify_account/index.html.erb

  Line 14 in d6446cf

  <%= f.button :submit, t('forms.verify_profile.submit') %>

  • † verify_account_desktop_after, verify_account_desktop_before, verify_account_mobile_after, verify_account_mobile_before

For most all of these, it's questionable whether the buttons should collapse to a flexible width on mobile. All the same, I'll check each of them.

[aduth]

Confirm whether there are other issues with unstyled links applying full-width by default (arguably, unstyled buttons should not ever be applying a width, but this is the default inherited from USWDS).

Confirm whether there are other issues with unstyled links overriding margin and padding conflicting with utility classes.

There were very few btn-link buttons before. Edit: This isn't accurate, since many buttons had been converted prior as of #4825. However, the changes to make unstyled buttons inline here should avoid the issue described in the original description where USWDS unstyled buttons would be block-width.

ag --ignore-dir={node_modules,vendor} "btn-link"

Candidates:

identity-idp/app/views/forgot_password/show.html.erb

Line 32 in d6446cf

<%= f.button :submit, t('links.resend'), class: 'btn-link ml-tiny' %></p>

identity-idp/app/views/sign_up/emails/show.html.erb

Line 33 in d6446cf

<%= f.button :submit, t('links.resend'), class: 'btn-link ml-tiny' %></p>

[mitchellhenke]

👍🏼 👍🏼 👍🏼

[anniehirshman-gsa]

Thank you SO much for this! Everything looks great 👍