Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

LG-3865: Update BassCSS link buttons to USWDS #4825

Merged
merged 6 commits into from
Mar 24, 2021
Merged

LG-3865: Update BassCSS link buttons to USWDS #4825

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8360b51
Upgrade to identity-style-guide 5.0.3
aduth Mar 23, 2021
dc29a19
LG-3865: Update BassCSS link buttons to USWDS
aduth Mar 23, 2021
248929b
Revert hover color to default link color
aduth Mar 23, 2021
4869d3a
Update selector for back link test
aduth Mar 24, 2021
c043f16
Preserve link color for visited, unstyled buttons
aduth Mar 24, 2021
926a63b
Apply inherited font smoothing to hover, active unstyled buttons
aduth Mar 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions app/assets/stylesheets/components/_btn.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,3 +111,30 @@
text-decoration: none;
}
}

.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
// instead allow both unstyled buttons and links inherit the default design system visited color.
// Alternatively, consider removing unstyled button classes from links, since the intention of an
// unstyled button is to take the visual appearance of a link.
color: $link-color;
}

.usa-button.usa-button--unstyled:hover,
.usa-button.usa-button--hover.usa-button--unstyled {
// Temporary: Links in the IdP do not currently conform to the design system and instead retain
// their color while hovered. Part of the work of LG-3877 should be to remove these styles, and
// instead allow both unstyled buttons and links inherit the default design system hover color.
color: $link-color;
}

.usa-button--unstyled {
&:hover,
&:active {
// Temporary: These styles should be ported upstream to the design system, optionally as part of
// future reconciliation effort with uswds/uswds#4077.
-moz-osx-font-smoothing: inherit;
-webkit-font-smoothing: inherit;
}
}
Comment on lines +132 to +140
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is becoming a bit of an embarrassing game of whack-a-mole, since this was already tried to be fixed across two separate patch releases in 18F/identity-design-system#201 and 18F/identity-design-system#202 🤦

The problem now is that the first set of changes in 18F/identity-design-system#201 reset font smoothing for hover and active states, but notably only for the explicit --hover and --active class modifiers that USWDS doesn't handle (uswds/uswds#4077). The native :hover and :active states are inherited from USWDS, which applies its opinionated font smoothing (source), and takes precedent over the base styles that were addressed in 18F/identity-design-system#202.

For future follow-up:

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For future follow-up:

See: #206

2 changes: 1 addition & 1 deletion app/presenters/backup_code_create_presenter.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,6 @@ def continue_bttn_title
end

def continue_bttn_class
'btn btn-link'
'usa-button usa-button--unstyled'
end
end
2 changes: 1 addition & 1 deletion app/views/account_reset/delete_account/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,5 @@
t('account_reset.request.yes_continue'),
account_reset_delete_account_path,
method: :delete,
class: 'btn btn-link'
class: 'usa-button usa-button--unstyled'
) %>
2 changes: 1 addition & 1 deletion app/views/account_reset/request/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
<%= button_to(
t('account_reset.request.yes_continue'),
account_reset_request_path,
class: 'btn btn-link',
class: 'usa-button usa-button--unstyled',
) %>

<br/>
Expand Down
2 changes: 1 addition & 1 deletion app/views/accounts/_webauthn.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
t('account.index.webauthn_delete'),
webauthn_setup_delete_path(id: cfg.id),
method: :get,
class: 'btn btn-link'
class: 'usa-button usa-button--unstyled'
) %>
</div>
<% end %>
Expand Down
2 changes: 1 addition & 1 deletion app/views/accounts/actions/_manage_personal_key.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<%= button_to(
create_new_personal_key_url,
method: :post,
class: 'btn btn-link margin-left-1',
class: 'usa-button usa-button--unstyled margin-left-1',
form_class: 'inline-block',
) do %>
<span class='usa-sr-only'>
Expand Down
2 changes: 1 addition & 1 deletion app/views/idv/cac/_start_over_or_cancel.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<br>
<%= button_to(t('doc_auth.buttons.start_over'), idv_cac_step_path(:reset), method: :put,
class: 'btn btn-link', form_class: 'inline-block') %>
class: 'usa-button usa-button--unstyled', form_class: 'inline-block') %>
<%= render 'shared/cancel', link: idv_cancel_path %>
4 changes: 2 additions & 2 deletions app/views/idv/cac/verify.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
<hr/>
<div class="right">
<%= button_to(t('in_person_proofing.buttons.change_address'),
idv_cac_step_path(step: :redo_enter_info), method: :put, class: 'btn btn-link') %>
idv_cac_step_path(step: :redo_enter_info), method: :put, class: 'usa-button usa-button--unstyled') %>
</div>
<div>
<%= "#{t('in_person_proofing.forms.address1')}: #{flow_session[:pii_from_doc][:address1]}" %>
Expand All @@ -39,7 +39,7 @@
<hr/>
<div class="right">
<%= button_to(t('in_person_proofing.buttons.change_ssn'),
idv_cac_step_path(step: :redo_enter_info), method: :put, class: 'btn btn-link') %>
idv_cac_step_path(step: :redo_enter_info), method: :put, class: 'usa-button usa-button--unstyled') %>
</div>
<div>
<%= "#{t('in_person_proofing.forms.dob')}: #{flow_session[:pii_from_doc][:dob]}" %>
Expand Down
2 changes: 1 addition & 1 deletion app/views/idv/doc_auth/_back.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ classes << local_assigns[:class] if local_assigns[:class]
text,
path,
method: :put,
class: [*classes, 'btn btn-link']
class: [*classes, 'usa-button usa-button--unstyled']
) %>
<% else %>
<%= link_to(text, path, class: classes) %>
Expand Down
2 changes: 1 addition & 1 deletion app/views/idv/doc_auth/_start_over.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@
t('doc_auth.buttons.start_over'),
idv_doc_auth_step_path(step: :reset),
method: :put,
class: 'btn btn-link',
class: 'usa-button usa-button--unstyled',
form_class: 'inline-block margin-top-4'
) %>
2 changes: 1 addition & 1 deletion app/views/idv/doc_auth/upload.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@
method: 'PUT',
html: { autocomplete: 'off', role: 'form', class: 'inline' }
) do %>
<button type='submit' class='btn-link'>
<button type="submit" class="usa-button usa-button--unstyled">
<%= t('doc_auth.info.upload_computer_link') %>
</button>
<% end %>
Expand Down
2 changes: 1 addition & 1 deletion app/views/idv/doc_auth/verify.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
t('doc_auth.buttons.change_ssn'),
idv_doc_auth_step_path(step: :redo_ssn),
method: :put,
class: 'btn btn-link',
class: 'usa-button usa-button--unstyled',
) %>
</div>
<%= t('doc_auth.forms.ssn') %>
Expand Down
2 changes: 1 addition & 1 deletion app/views/idv/in_person/_start_over_or_cancel.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<br>
<%= button_to(t('doc_auth.buttons.start_over'), idv_in_person_step_path(:reset), method: :put,
class: 'btn btn-link', form_class: 'inline-block') %>
class: 'usa-button usa-button--unstyled', form_class: 'inline-block') %>
<%= render 'shared/cancel', link: idv_cancel_path %>
2 changes: 1 addition & 1 deletion app/views/idv/in_person/encrypt.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<div class="right-align margin-top-neg-2 margin-bottom-6">
<%= t('idv.forgot_password.link_html',
link: link_to(t('idv.forgot_password.link_text'), idv_forgot_password_url,
class: 'btn btn-link margin-left-1', form_class: 'inline-block')) %>
class: 'usa-button usa-button--unstyled margin-left-1', form_class: 'inline-block')) %>
</div>

<%= f.button :submit, t('forms.buttons.continue'), class: 'btn btn-primary btn-wide sm-col-6 col-12' %>
Expand Down
2 changes: 1 addition & 1 deletion app/views/idv/in_person/verify.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@

<div class="right">
<%= button_to(t('in_person_proofing.buttons.change_ssn'),
idv_doc_auth_step_path(step: :redo_ssn), method: :put, class: 'btn btn-link') %>
idv_doc_auth_step_path(step: :redo_ssn), method: :put, class: 'usa-button usa-button--unstyled') %>
</div>
<%= t('in_person_proofing.forms.ssn') %>: 111-11-1111
<div class="margin-top-6">
Expand Down
2 changes: 1 addition & 1 deletion app/views/idv/otp_verification/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

<%= button_to(t('links.two_factor_authentication.get_another_code'), idv_resend_otp_path,
method: :post,
class: 'btn btn-link btn-border ico ico-refresh text-decoration-none',
class: 'usa-button usa-button--unstyled btn-border ico ico-refresh text-decoration-none',
form_class: 'inline-block') %>

<p class="margin-top-6">
Expand Down
2 changes: 1 addition & 1 deletion app/views/idv/review/new.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<div class="right-align margin-top-neg-2 margin-bottom-6">
<%= t('idv.forgot_password.link_html',
link: link_to(t('idv.forgot_password.link_text'), idv_forgot_password_url,
class: 'btn btn-link margin-left-1', form_class: 'inline-block')) %>
class: 'usa-button usa-button--unstyled margin-left-1', form_class: 'inline-block')) %>

</div>
<%= accordion('review-verified-info', t('idv.messages.review.intro')) do %>
Expand Down
4 changes: 2 additions & 2 deletions app/views/idv/shared/_back_to_sp_link.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
<div class="margin-bottom-2 margin-top-2">
<div class="right">
<%= link_to image_tag(asset_url('carat-right.svg'), size: '10'),
return_to_sp_failure_to_proof_path, class: 'bold block btn-link text-decoration-none' %>
return_to_sp_failure_to_proof_path, class: 'bold block usa-button usa-button--unstyled text-decoration-none' %>
</div>
<%= link_to t('idv.failure.help.get_help_html', sp_name: decorated_session.sp_name),
return_to_sp_failure_to_proof_path, class: 'block btn-link text-decoration-none' %>
return_to_sp_failure_to_proof_path, class: 'block usa-button usa-button--unstyled text-decoration-none' %>
</div>
<hr/>
<% end %>
2 changes: 1 addition & 1 deletion app/views/idv/shared/_document_capture.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@
<% if session['idv/capture_doc'] %>
<div class='margin-top-2 padding-top-1 border-top'>
<%= button_to(cancel_link_text, idv_capture_doc_step_url(step: :cancel), method: :put,
class: 'btn btn-link') %>
class: 'usa-button usa-button--unstyled') %>
</div>
<% else %>
<%= render 'shared/cancel', link: idv_cancel_path %>
Expand Down
2 changes: 1 addition & 1 deletion app/views/idv/shared/_reset_your_account.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="margin-bottom-2 margin-top-2">
<div class="right">
<%= link_to image_tag(asset_url('carat-right.svg'), size: '10'),
return_to_sp_failure_to_proof_path, class: 'bold block btn-link text-decoration-none' %>
return_to_sp_failure_to_proof_path, class: 'bold block usa-button usa-button--unstyled text-decoration-none' %>
</div>
<%= link_to t('two_factor_authentication.account_reset.reset_your_account'),
account_reset_request_path %>
Expand Down
2 changes: 1 addition & 1 deletion app/views/shared/_cancel.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class='margin-top-2 padding-top-1 border-top'>
<% if user_signing_up? %>
<%= link_to cancel_link_text, sign_up_cancel_path, method: :get, class: 'btn btn-link' %>
<%= link_to cancel_link_text, sign_up_cancel_path, method: :get, class: 'usa-button usa-button--unstyled' %>
<% else %>
<%= link_to cancel_link_text, link || return_to_sp_cancel_path %>
<% end %>
Expand Down
2 changes: 1 addition & 1 deletion app/views/two_factor_authentication/otp_verification/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
otp_delivery_preference: @presenter.otp_delivery_preference,
resend: true
}),
class: 'btn btn-link btn-border ico ico-refresh text-decoration-none flex-no-shrink margin-right-205',
class: 'usa-button usa-button--unstyled btn-border ico ico-refresh text-decoration-none flex-no-shrink margin-right-205',
form_class: 'inline-block') %>

<span class="text-no-wrap flex-no-shrink flex flex-row flex-align-center">
Expand Down
2 changes: 1 addition & 1 deletion app/views/users/emails/verify.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
</div>

<%= t('notices.signed_up_and_confirmed.no_email_sent_explanation_start') %>
<%= button_to(t('links.resend'), add_email_resend_path, method: :post, class: 'btn btn-link margin-left-1', form_class: 'inline-block') %>
<%= button_to(t('links.resend'), add_email_resend_path, method: :post, class: 'usa-button usa-button--unstyled margin-left-1', form_class: 'inline-block') %>

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

Expand Down
2 changes: 1 addition & 1 deletion app/views/users/verify_account/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<%= link_to t('idv.messages.usps.resend'), idv_usps_path, class: 'block margin-bottom-2' %>
<% end %>

<%= button_to t('idv.messages.clear_and_start_over'), idv_session_path, method: :delete, class: 'btn btn-link' %>
<%= button_to t('idv.messages.clear_and_start_over'), idv_session_path, method: :delete, class: 'usa-button usa-button--unstyled' %>

<div class="margin-top-2 padding-top-1 border-top">
<%= link_to t('idv.buttons.cancel'), account_path %>
Expand Down
2 changes: 1 addition & 1 deletion app/views/users/verify_personal_key/new.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<div class="margin-top-2">
<%= t('forms.personal_key.alternative') %>
<%= button_to(t('links.reverify'), reactivate_account_path, method: :put,
class: 'btn btn-link margin-left-1', form_class: 'inline-block') %>
class: 'usa-button usa-button--unstyled margin-left-1', form_class: 'inline-block') %>
</div>

<%= render 'shared/cancel', link: account_path %>
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
"clipboard": "^2.0.6",
"domready": "^1.0.8",
"focus-trap": "^6.2.3",
"identity-style-guide": "^5.0.1",
"identity-style-guide": "^5.0.3",
"intl-tel-input": "^17.0.8",
"libphonenumber-js": "^1.9.6",
"postcss-clean": "^1.1.0",
Expand Down
2 changes: 1 addition & 1 deletion spec/presenters/backup_code_create_presenter_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@

describe '#continue_bttn_class' do
it 'displays as a link to continue' do
expect(presenter.continue_bttn_class).to eq 'btn btn-link'
expect(presenter.continue_bttn_class).to eq 'usa-button usa-button--unstyled'
end
end
end
4 changes: 1 addition & 3 deletions spec/views/idv/doc_auth/_back.html.erb_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,7 @@
it 'renders' do
expect(subject).to have_selector("form[action='#{idv_doc_auth_step_path(step: 'redo_ssn')}']")
expect(subject).to have_selector('input[name="_method"][value="put"]', visible: false)
expect(subject).to have_selector(
".btn[type='submit'][value='#{'‹ ' + t('forms.buttons.back')}']",
)
expect(subject).to have_selector("[type='submit'][value='#{'‹ ' + t('forms.buttons.back')}']")
end

it_behaves_like 'back link with class'
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4834,10 +4834,10 @@ icss-utils@^4.0.0, icss-utils@^4.1.1:
dependencies:
postcss "^7.0.14"

identity-style-guide@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/identity-style-guide/-/identity-style-guide-5.0.1.tgz#ada95337b503ed8ef46091696ba8a44a6061f0ac"
integrity sha512-eailVodxMJCw51dFFUXOwqNvvKgCHnZt6xXYn+9Cizx2YrbzFcOkGu/OIiOGes/jBINnq4upxyUZStkv9IhVFw==
identity-style-guide@^5.0.3:
version "5.0.3"
resolved "https://registry.yarnpkg.com/identity-style-guide/-/identity-style-guide-5.0.3.tgz#2cc1391683a729749a8606dcc6a2bf69b58f7e45"
integrity sha512-OSoYQ+2yCE6zERwjSzkvp9XR/aEAvQzzPUQGCUnGskroa2O/FSM9p38w0YO0zH5+GGZUZqMWKYzeph96r01j2g==
dependencies:
uswds "^2.9.0"

Expand Down