Fix button block link styling from USWDS migration#4886
Conversation
**Why**: Consistency, deduplication
**Why**: Fix block link behavior broken by USWDS migration
**Why** Intended with previous `block` styling, now not applied due to button inline-block override
zachmargolis
left a comment
There was a problem hiding this comment.
LGTM, are any of the patterns you mentioned in the description good to add to our ERB lint?
block[^'"]+usa-button,usa-button[^'"]+block,f\.button([^%]|\n)+block.
Maybe, but I think we can / should include the I might circle back on this to see if there's a follow-up task we could create for these kinds of "known conflicts". |
| <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 usa-button usa-button--unstyled text-decoration-none' %> |
There was a problem hiding this comment.
Heh, the build failure caught an interesting issue, which is that the ">" caret was previously a separate link directing to the wrong URL. This should have been account_reset_request_path.
Related: #4836
Why: Prior to #4836, there were a few instances of links which used the
blockclass to extend the width of the link to occupy the full width of its container. Since the USWDS button applies its owndisplay: inline-blockwhich takes precedence over theblockutility class, this caused these links to shrink unintentionally.Solution:
blockwithusa-button--full-widthas an equivalent effect<BlockLink />React component added for document capture step in LG-4308: Update messaging for "Return to SP" link in document capture #4751.Discovered using full-project search patterns
block[^'"]+usa-button,usa-button[^'"]+block,f\.button([^%]|\n)+block.Screenshots:
Reactivate Account:
IDV Session Errors:
Note that the two links are usually mutually exclusive and not shown at the same time, depending if the user is verifying their identity from an SP or recovering from a password reset.