diff --git a/app/assets/stylesheets/components/_btn.scss b/app/assets/stylesheets/components/_btn.scss index 1dc3931c09a..0269f43684a 100644 --- a/app/assets/stylesheets/components/_btn.scss +++ b/app/assets/stylesheets/components/_btn.scss @@ -35,6 +35,13 @@ } } +.usa-button:not([class*='margin-']) { + // Temporary: To be backported to design system. Margins should be applied at the button element, + // or at the very least (a) we don't want the margins to offset full-width buttons on mobile, and + // (b) the default margin would not be large enough on its own. + margin-right: 0; +} + .usa-button.usa-button--unstyled:visited { // Temporary: Links in the IdP do not currently conform to the design system and instead retain // their color even if visited. Part of the work of LG-3877 should be to remove these styles, and @@ -53,6 +60,11 @@ } .usa-button--unstyled { + // Temporary: To be backported to design system. Unstyled buttons should inherit the appearance + // of a link. + display: inline; + width: auto; + &:hover, &:active { // Temporary: These styles should be ported upstream to the design system, optionally as part of diff --git a/app/assets/stylesheets/components/_spinner-button.scss b/app/assets/stylesheets/components/_spinner-button.scss index cad1be060b1..91d45fb2375 100644 --- a/app/assets/stylesheets/components/_spinner-button.scss +++ b/app/assets/stylesheets/components/_spinner-button.scss @@ -19,7 +19,9 @@ } .spinner-button { - display: inline-block; + @include at-media('mobile-lg') { + display: inline-block; + } } .spinner-button--spinner-active { diff --git a/app/javascript/packages/document-capture/components/acuant-capture.jsx b/app/javascript/packages/document-capture/components/acuant-capture.jsx index 8e728e8e3f3..b961e578781 100644 --- a/app/javascript/packages/document-capture/components/acuant-capture.jsx +++ b/app/javascript/packages/document-capture/components/acuant-capture.jsx @@ -396,6 +396,7 @@ function AcuantCapture(
{isMobile && ( + + + ), })}
diff --git a/app/javascript/packages/document-capture/components/button.jsx b/app/javascript/packages/document-capture/components/button.jsx index eecf762c001..26f11c6359a 100644 --- a/app/javascript/packages/document-capture/components/button.jsx +++ b/app/javascript/packages/document-capture/components/button.jsx @@ -9,6 +9,8 @@ * @prop {(ReactMouseEvent)=>void=} onClick Click handler. * @prop {ReactNode=} children Element children. * @prop {boolean=} isBig Whether button should be styled as big button. + * @prop {boolean=} isFlexibleWidth Whether button should be styled as flexible width, such that it + * shrinks to its minimum width instead of occupying full-width on mobile viewports. * @prop {boolean=} isWide Whether button should be styled as primary button. * @prop {boolean=} isOutline Whether button should be styled as secondary button. * @prop {boolean=} isDisabled Whether button is disabled. @@ -25,6 +27,7 @@ function Button({ onClick, children, isBig, + isFlexibleWidth, isWide, isOutline, isDisabled, @@ -35,6 +38,7 @@ function Button({ const classes = [ 'usa-button', isBig && 'usa-button--big', + isFlexibleWidth && 'usa-button--flexible-width', isWide && 'usa-button--wide', isOutline && 'usa-button--outline', isUnstyled && 'usa-button--unstyled', diff --git a/app/views/account_reset/pending/cancel.html.erb b/app/views/account_reset/pending/cancel.html.erb index e50bc5e14c0..5b6491af33a 100644 --- a/app/views/account_reset/pending/cancel.html.erb +++ b/app/views/account_reset/pending/cancel.html.erb @@ -3,5 +3,5 @@ <%= link_to( t('links.continue_sign_in'), user_two_factor_authentication_path, - class: 'usa-button usa-button--big', + class: 'usa-button usa-button--wide usa-button--big', ) %> diff --git a/app/views/account_reset/pending/confirm.html.erb b/app/views/account_reset/pending/confirm.html.erb index 471861dfd0f..e0fa77014f5 100644 --- a/app/views/account_reset/pending/confirm.html.erb +++ b/app/views/account_reset/pending/confirm.html.erb @@ -3,12 +3,7 @@ <%= button_to( t('forms.buttons.continue'), account_reset_pending_cancel_path, - class: 'usa-button usa-button--big margin-right-6', - form_class: 'display-inline', + class: 'usa-button usa-button--wide usa-button--big margin-bottom-2', ) %> -<%= link_to( - t('links.go_back'), - account_reset_pending_path, - class: '', -) %> +<%= link_to(t('links.go_back'), account_reset_pending_path) %> diff --git a/app/views/account_reset/pending/show.html.erb b/app/views/account_reset/pending/show.html.erb index df2d0590848..f116b4f28cf 100644 --- a/app/views/account_reset/pending/show.html.erb +++ b/app/views/account_reset/pending/show.html.erb @@ -10,5 +10,5 @@ <%= link_to( t('account_reset.pending.cancel_request'), account_reset_pending_confirm_path, - class: 'usa-button usa-button--big', + class: 'usa-button usa-button--wide usa-button--big', ) %> diff --git a/app/views/account_reset/request/show.html.erb b/app/views/account_reset/request/show.html.erb index c3f78c5c11a..dcd4788b0a7 100644 --- a/app/views/account_reset/request/show.html.erb +++ b/app/views/account_reset/request/show.html.erb @@ -23,7 +23,7 @@ t('users.personal_key.print'), '#', data: { print: true }, - class: 'usa-button usa-button--outline margin-left-2 display-inline-block ico ico-print', + class: 'usa-button usa-button--outline margin-top-2 ico ico-print', ) %>
diff --git a/app/views/accounts/_webauthn.html.erb b/app/views/accounts/_webauthn.html.erb index 2cd64b59d57..0af4b34bbd0 100644 --- a/app/views/accounts/_webauthn.html.erb +++ b/app/views/accounts/_webauthn.html.erb @@ -22,9 +22,7 @@
<%= link_to( t('account.index.webauthn_delete'), - webauthn_setup_delete_path(id: cfg.id), - method: :get, - class: 'usa-button usa-button--unstyled' + webauthn_setup_delete_path(id: cfg.id) ) %>
<% end %> diff --git a/app/views/accounts/actions/_manage_personal_key.html.erb b/app/views/accounts/actions/_manage_personal_key.html.erb index e4f593bcc06..5c44b7f9bd8 100644 --- a/app/views/accounts/actions/_manage_personal_key.html.erb +++ b/app/views/accounts/actions/_manage_personal_key.html.erb @@ -1,8 +1,8 @@ <%= button_to( create_new_personal_key_url, method: :post, - class: 'usa-button usa-button--unstyled margin-left-1', - form_class: 'inline-block', + class: 'usa-button usa-button--unstyled', + form_class: 'inline-block padding-left-1', ) do %> <%= t('account.items.personal_key') %> diff --git a/app/views/devise/passwords/new.html.erb b/app/views/devise/passwords/new.html.erb index eeeb01388e1..800812bc16a 100644 --- a/app/views/devise/passwords/new.html.erb +++ b/app/views/devise/passwords/new.html.erb @@ -20,7 +20,7 @@ aria: { invalid: false, describedby: 'email-description' } } %> <%= f.input :request_id, as: :hidden, input_html: { value: request_id } %> <%= render 'shared/recaptcha' %> - <%= f.button :submit, t('forms.buttons.continue'), class: 'usa-button--big margin-top-2' %> + <%= f.button :submit, t('forms.buttons.continue'), class: 'usa-button--big usa-button--wide margin-top-2' %> <% end %>
diff --git a/app/views/event_disavowal/new.html.erb b/app/views/event_disavowal/new.html.erb index 989852ee8af..95fbc3360ea 100644 --- a/app/views/event_disavowal/new.html.erb +++ b/app/views/event_disavowal/new.html.erb @@ -14,7 +14,7 @@ <%= f.input :password, label: t('forms.passwords.edit.labels.password'), required: true, input_html: { aria: { invalid: false }, class: 'password-toggle' } %> <%= render 'devise/shared/password_strength', forbidden_passwords: @forbidden_passwords %> - <%= f.button :submit, t('forms.passwords.edit.buttons.submit'), class: 'usa-button--big margin-bottom-4' %> + <%= f.button :submit, t('forms.passwords.edit.buttons.submit'), class: 'usa-button--big usa-button--wide margin-bottom-4' %> <% end %> <%= render 'shared/password_accordion' %> diff --git a/app/views/idv/review/new.html.erb b/app/views/idv/review/new.html.erb index f8ca00cc578..f05b477a949 100644 --- a/app/views/idv/review/new.html.erb +++ b/app/views/idv/review/new.html.erb @@ -17,8 +17,7 @@ input_html: { aria: { invalid: false }, class: 'password-toggle' } %>
<%= t('idv.forgot_password.link_html', - link: link_to(t('idv.forgot_password.link_text'), idv_forgot_password_url, - class: 'usa-button usa-button--unstyled margin-left-1', form_class: 'inline-block')) %> + link: link_to(t('idv.forgot_password.link_text'), idv_forgot_password_url, class: 'margin-left-1')) %>
<%= accordion('review-verified-info', t('idv.messages.review.intro')) do %> diff --git a/app/views/saml_idp/shared/saml_post_binding.html.erb b/app/views/saml_idp/shared/saml_post_binding.html.erb index c5bda9ee097..bab22429906 100644 --- a/app/views/saml_idp/shared/saml_post_binding.html.erb +++ b/app/views/saml_idp/shared/saml_post_binding.html.erb @@ -24,7 +24,7 @@ <% if params.key?(:RelayState) %> <%= hidden_field_tag('RelayState', params[:RelayState]) %> <% end %> - <%= submit_tag t('forms.buttons.submit.default'), class: 'usa-button usa-button--big' %> + <%= submit_tag t('forms.buttons.submit.default'), class: 'usa-button usa-button--wide usa-button--big' %> <% end %>
diff --git a/app/views/sign_up/email_resend/new.html.erb b/app/views/sign_up/email_resend/new.html.erb index ec58ae0eeb4..0f6f456388e 100644 --- a/app/views/sign_up/email_resend/new.html.erb +++ b/app/views/sign_up/email_resend/new.html.erb @@ -8,5 +8,5 @@ html: { autocomplete: 'off', method: :post, role: 'form' }) do |f| %> <%= f.input :email, required: true, input_html: { aria: { invalid: false } } %> <%= f.input :request_id, as: :hidden %> - <%= f.button :submit, t('forms.buttons.resend_confirmation'), class: 'usa-button--big margin-top-2 margin-bottom-1' %> + <%= f.button :submit, t('forms.buttons.resend_confirmation'), class: 'usa-button--big usa-button--wide margin-top-2 margin-bottom-1' %> <% end %> diff --git a/app/views/two_factor_authentication/backup_code_verification/show.html.erb b/app/views/two_factor_authentication/backup_code_verification/show.html.erb index dcf68b0c4c3..c72a7450328 100644 --- a/app/views/two_factor_authentication/backup_code_verification/show.html.erb +++ b/app/views/two_factor_authentication/backup_code_verification/show.html.erb @@ -11,7 +11,7 @@ <%= validated_form_for(@backup_code_form, url: login_two_factor_backup_code_path, html: { autocomplete: 'off', method: :post, role: 'form' }) do |f| %> <%= render 'partials/backup_code/entry_fields', f: f, attribute_name: :backup_code %> - <%= f.button :submit, t('forms.buttons.submit.default'), class: 'usa-button--big' %> + <%= f.button :submit, t('forms.buttons.submit.default'), class: 'usa-button--big usa-button--wide' %> <% end %> <%= render 'shared/fallback_links', presenter: @presenter %> diff --git a/app/views/two_factor_authentication/options/index.html.erb b/app/views/two_factor_authentication/options/index.html.erb index 9e02708d48c..5d69d6ecec2 100644 --- a/app/views/two_factor_authentication/options/index.html.erb +++ b/app/views/two_factor_authentication/options/index.html.erb @@ -39,7 +39,7 @@ - <%= f.button :submit, t('forms.buttons.continue'), class: 'usa-button--big' %> + <%= f.button :submit, t('forms.buttons.continue'), class: 'usa-button--big usa-button--wide' %> <% end %>
diff --git a/app/views/two_factor_authentication/personal_key_verification/show.html.erb b/app/views/two_factor_authentication/personal_key_verification/show.html.erb index d2cba5473e5..7052358dbb3 100644 --- a/app/views/two_factor_authentication/personal_key_verification/show.html.erb +++ b/app/views/two_factor_authentication/personal_key_verification/show.html.erb @@ -11,7 +11,7 @@ <%= validated_form_for(@personal_key_form, url: login_two_factor_personal_key_path, html: { autocomplete: 'off', method: :post, role: 'form' }) do |f| %> <%= render 'partials/personal_key/entry_fields', f: f, attribute_name: :personal_key %> - <%= f.button :submit, t('forms.buttons.submit.default'), class: 'usa-button--big' %> + <%= f.button :submit, t('forms.buttons.submit.default'), class: 'usa-button--big usa-button--wide' %> <% end %> <%= render 'shared/fallback_links', presenter: @presenter %> diff --git a/app/views/two_factor_authentication/piv_cac_verification/show.html.erb b/app/views/two_factor_authentication/piv_cac_verification/show.html.erb index 87fe137b0bc..ec0c17c360e 100644 --- a/app/views/two_factor_authentication/piv_cac_verification/show.html.erb +++ b/app/views/two_factor_authentication/piv_cac_verification/show.html.erb @@ -11,7 +11,7 @@ <%= render 'shared/spinner-button' do %> <%= link_to @presenter.piv_cac_capture_text, @presenter.piv_cac_service_link, - class: 'usa-button usa-button--big' %> + class: 'usa-button usa-button--big usa-button--wide' %> <% end %> <%= render 'shared/fallback_links', presenter: @presenter %> <%= render 'shared/cancel', link: @presenter.cancel_link %> diff --git a/app/views/two_factor_authentication/totp_verification/show.html.erb b/app/views/two_factor_authentication/totp_verification/show.html.erb index cb1905dbf50..8bb063a95f7 100644 --- a/app/views/two_factor_authentication/totp_verification/show.html.erb +++ b/app/views/two_factor_authentication/totp_verification/show.html.erb @@ -27,7 +27,7 @@ t('forms.messages.remember_device'), class: 'blue margin-right-2' %> - <%= submit_tag 'Submit', class: 'usa-button usa-button--big' %> + <%= submit_tag 'Submit', class: 'usa-button usa-button--wide usa-button--big' %> <% end %> <%= render 'shared/fallback_links', presenter: @presenter %> diff --git a/app/views/users/backup_code_setup/create.html.erb b/app/views/users/backup_code_setup/create.html.erb index fd7d40f13ee..6fc21179ee7 100644 --- a/app/views/users/backup_code_setup/create.html.erb +++ b/app/views/users/backup_code_setup/create.html.erb @@ -44,19 +44,15 @@ <% end %> <%= link_to t('forms.backup_code.print'), '#', data: { print: true }, - class: 'usa-button usa-button--outline margin-left-2 ico ico-print' -%> + class: 'usa-button usa-button--outline margin-top-2 mobile-lg:margin-top-0 mobile-lg:margin-left-2 ico ico-print' -%> <%= link_to t('links.copy'), '#', - class: 'usa-button usa-button--outline margin-left-2 clipboard ico ico-copy', + class: 'usa-button usa-button--outline margin-top-2 mobile-lg:margin-top-0 mobile-lg:margin-left-2 clipboard ico ico-copy', data: { "clipboard-text": @codes.join(' ') } -%> <%= form_tag(backup_code_continue_path, method: :patch, role: 'form') do %> -
-
- <%= button_tag t('forms.buttons.continue'), type: 'submit', class: 'usa-button usa-button--big usa-button--wide' %> -
-
+ <%= button_tag t('forms.buttons.continue'), type: 'submit', class: 'usa-button usa-button--big usa-button--wide' %> <% end %> <%= javascript_packs_tag_once 'clipboard' %> diff --git a/app/views/users/emails/verify.html.erb b/app/views/users/emails/verify.html.erb index 5167b2b4541..0a3c1730905 100644 --- a/app/views/users/emails/verify.html.erb +++ b/app/views/users/emails/verify.html.erb @@ -23,7 +23,7 @@ <%= t('notices.signed_up_and_confirmed.no_email_sent_explanation_start') %> -<%= button_to(t('links.resend'), add_email_resend_path, method: :post, class: 'usa-button usa-button--unstyled margin-left-1', form_class: 'inline-block') %> +<%= button_to(t('links.resend'), add_email_resend_path, method: :post, class: 'usa-button usa-button--unstyled', form_class: 'inline-block padding-left-1') %>

<% link = link_to(t('notices.use_diff_email.link'), add_email_path) %>

diff --git a/app/views/users/forget_all_browsers/show.html.erb b/app/views/users/forget_all_browsers/show.html.erb index 86cc5414c67..359a0809220 100644 --- a/app/views/users/forget_all_browsers/show.html.erb +++ b/app/views/users/forget_all_browsers/show.html.erb @@ -8,7 +8,7 @@ <%= t('account.forget_all_browsers.longer_description') %>

-<%= button_to(t('forms.buttons.confirm'), forget_all_browsers_path, method: 'delete', class: 'usa-button usa-button--big margin-top-4') %> +<%= button_to(t('forms.buttons.confirm'), forget_all_browsers_path, method: 'delete', class: 'usa-button usa-button--wide usa-button--big margin-top-4') %>
diff --git a/app/views/users/passwords/edit.html.erb b/app/views/users/passwords/edit.html.erb index 84c4113ce13..b95fce2283e 100644 --- a/app/views/users/passwords/edit.html.erb +++ b/app/views/users/passwords/edit.html.erb @@ -14,7 +14,7 @@ <%= f.input :password, label: t('forms.passwords.edit.labels.password'), required: true, input_html: { aria: { invalid: false, describedby: 'password-description' }, class: 'password-toggle' } %> <%= render 'devise/shared/password_strength', forbidden_passwords: @forbidden_passwords %> - <%= f.button :submit, t('forms.buttons.submit.update'), class: 'usa-button--big margin-top-2 margin-bottom-4' %> + <%= f.button :submit, t('forms.buttons.submit.update'), class: 'usa-button--big usa-button--wide margin-top-2 margin-bottom-4' %> <% end %> <%= render 'shared/password_accordion' %> diff --git a/app/views/users/piv_cac_authentication_setup/new.html.erb b/app/views/users/piv_cac_authentication_setup/new.html.erb index a99e5c2943a..4c46c5c2437 100644 --- a/app/views/users/piv_cac_authentication_setup/new.html.erb +++ b/app/views/users/piv_cac_authentication_setup/new.html.erb @@ -44,7 +44,7 @@
<%= t('instructions.mfa.piv_cac.step_3_info_html') %>
- +
diff --git a/app/views/users/piv_cac_login/new.html.erb b/app/views/users/piv_cac_login/new.html.erb index a9d0ed5cb8d..b156d8628af 100644 --- a/app/views/users/piv_cac_login/new.html.erb +++ b/app/views/users/piv_cac_login/new.html.erb @@ -11,7 +11,7 @@ <%= render 'shared/spinner-button' do %> <%= link_to @presenter.piv_cac_capture_text, @presenter.piv_cac_service_link, - class: 'usa-button usa-button--big' %> + class: 'usa-button usa-button--wide usa-button--big' %> <% end %> <%= render 'shared/cancel', link: new_user_session_url %> diff --git a/app/views/users/piv_cac_setup_from_sign_in/prompt.html.erb b/app/views/users/piv_cac_setup_from_sign_in/prompt.html.erb index e0f584babe2..c576671d2be 100644 --- a/app/views/users/piv_cac_setup_from_sign_in/prompt.html.erb +++ b/app/views/users/piv_cac_setup_from_sign_in/prompt.html.erb @@ -20,12 +20,13 @@ class: 'block col-12 field monospace', size: 16, maxlength: 20, 'aria-labelledby': 'totp-label' %>
- <%= submit_tag t('forms.piv_cac_setup.submit'), class: 'usa-button usa-button--big margin-right-1' %> -
- <%= link_to t('forms.piv_cac_setup.no_thanks'), new_user_session_url, - class: 'usa-button usa-button--big usa-button--outline' %> -
-
+ <%= submit_tag t('forms.piv_cac_setup.submit'), class: 'usa-button usa-button--wide usa-button--big' %> +
+
+ <%= link_to t('forms.piv_cac_setup.no_thanks'), + new_user_session_url, + class: 'usa-button usa-button--wide usa-button--big usa-button--outline' %> +
<% end %> diff --git a/app/views/users/service_provider_inactive/index.html.erb b/app/views/users/service_provider_inactive/index.html.erb index d7f63e3d13d..4921fc642a6 100644 --- a/app/views/users/service_provider_inactive/index.html.erb +++ b/app/views/users/service_provider_inactive/index.html.erb @@ -18,6 +18,6 @@ link_to( t('service_providers.errors.inactive.button_text'), root_path, - class: 'usa-button usa-button--big margin-top-3' + class: 'usa-button usa-button--wide usa-button--big margin-top-3' ) %> diff --git a/app/views/users/service_provider_revoke/show.html.erb b/app/views/users/service_provider_revoke/show.html.erb index f91b5b6fa8a..a585ac0630e 100644 --- a/app/views/users/service_provider_revoke/show.html.erb +++ b/app/views/users/service_provider_revoke/show.html.erb @@ -13,7 +13,7 @@ t('forms.buttons.continue'), service_provider_revoke_url(@service_provider.id), method: 'delete', - class: 'usa-button usa-button--big margin-top-4') %> + class: 'usa-button usa-button--wide usa-button--big margin-top-4') %>
diff --git a/app/views/users/totp_setup/confirm_delete.html.erb b/app/views/users/totp_setup/confirm_delete.html.erb index 325c613318f..57708e267d9 100644 --- a/app/views/users/totp_setup/confirm_delete.html.erb +++ b/app/views/users/totp_setup/confirm_delete.html.erb @@ -17,4 +17,4 @@ <%= form_tag(disable_totp_path(id: params[:id]), method: :delete, role: 'form') do %> <%= button_tag t('account.index.totp_confirm_delete'), type: 'submit', class: 'usa-button usa-button--big usa-button--wide margin-bottom-2' %> <% end %> -<%= link_to t('links.cancel'), account_path, class: 'usa-button usa-button--big usa-button--wide usa-button-outline' %> +<%= link_to t('links.cancel'), account_path, class: 'usa-button usa-button--big usa-button--wide usa-button--outline' %> diff --git a/app/views/users/verify_account/index.html.erb b/app/views/users/verify_account/index.html.erb index 9bd2a128a7c..b06ff8872cb 100644 --- a/app/views/users/verify_account/index.html.erb +++ b/app/views/users/verify_account/index.html.erb @@ -8,11 +8,24 @@

<%= validated_form_for(@verify_account_form, url: verify_account_path, html: { autocomplete: 'off', method: :post, role: 'form' }) do |f| %> - <%= f.input :otp, required: true, input_html: { aria: { invalid: false } }, - label: t('forms.verify_profile.name'), wrapper_html: { class: 'margin-bottom-4' }, wrapper: :inline_form do %> - <%= f.input_field :otp, as: :inline, autofocus: true, type: 'text', maxlength: '10', value: @code %> - <%= f.button :submit, t('forms.verify_profile.submit'), class: 'usa-button--big' %> - <% end %> +
+
+ <%= f.input :otp, + type: 'text', + maxlength: 10, + required: true, + autofocus: true, + input_html: { + aria: { invalid: false }, + value: @code, + }, + label: t('forms.verify_profile.name'), + class: 'margin-bottom-5' %> + <%= f.button :submit, + t('forms.verify_profile.submit'), + class: 'usa-button--big usa-button--full-width' %> +
+
<% end %> <% if FeatureManagement.enable_gpo_verification? && !@mail_spammed %> diff --git a/app/views/users/verify_personal_key/new.html.erb b/app/views/users/verify_personal_key/new.html.erb index 0a27d0bda1f..33c87bccb31 100644 --- a/app/views/users/verify_personal_key/new.html.erb +++ b/app/views/users/verify_personal_key/new.html.erb @@ -20,7 +20,7 @@
<%= t('forms.personal_key.alternative') %> <%= button_to(t('links.reverify'), reactivate_account_path, method: :put, - class: 'usa-button usa-button--unstyled margin-left-1', form_class: 'inline-block') %> + class: 'usa-button usa-button--unstyled', form_class: 'inline-block padding-left-1') %>
<%= render 'shared/cancel', link: account_path %> diff --git a/config/initializers/simple_form.rb b/config/initializers/simple_form.rb index 0647ca319a2..38bfcd1f898 100644 --- a/config/initializers/simple_form.rb +++ b/config/initializers/simple_form.rb @@ -28,19 +28,6 @@ b.use :error, wrap_with: { tag: 'div', class: 'mt-tiny h6 red error-message' } end - config.wrappers :inline_form, tag: 'div' do |b| - b.use :label, class: 'bold block' - b.wrapper tag: 'div', class: 'col-12 clearfix' do |ba| - ba.use :input - end - - b.wrapper tag: 'div' do |bb| - bb.use :error, wrap_with: { tag: 'span', class: 'mt-tiny h6 red error-message' } - end - - b.optional :maxlength - end - config.default_wrapper = :vertical_form end # rubocop:enable Metrics/BlockLength diff --git a/spec/javascripts/packages/document-capture/components/button-spec.jsx b/spec/javascripts/packages/document-capture/components/button-spec.jsx index c6f279a68e3..9a17e33e329 100644 --- a/spec/javascripts/packages/document-capture/components/button-spec.jsx +++ b/spec/javascripts/packages/document-capture/components/button-spec.jsx @@ -14,6 +14,7 @@ describe('document-capture/components/button', () => { expect(button.type).to.equal('button'); expect(button.classList.contains('usa-button')).to.be.true(); expect(button.classList.contains('usa-button--big')).to.be.false(); + expect(button.classList.contains('usa-button--flexible-width')).to.be.false(); expect(button.classList.contains('usa-button--wide')).to.be.false(); expect(button.classList.contains('usa-button--outline')).to.be.false(); expect(button.classList.contains('usa-button--unstyled')).to.be.false(); @@ -40,6 +41,14 @@ describe('document-capture/components/button', () => { expect(button.classList.contains('usa-button--big')).to.be.true(); }); + it('renders as flexible width', () => { + const { getByText } = render(); + + const button = getByText('Click me'); + + expect(button.classList.contains('usa-button--flexible-width')).to.be.true(); + }); + it('renders as wide', () => { const { getByText } = render();