Skip to content

Fix button block link styling from USWDS migration#4886

Merged
aduth merged 5 commits intomainfrom
aduth-fix-block-button
Apr 7, 2021
Merged

Fix button block link styling from USWDS migration#4886
aduth merged 5 commits intomainfrom
aduth-fix-block-button

Conversation

@aduth
Copy link
Contributor

@aduth aduth commented Apr 7, 2021

Related: #4836

Why: Prior to #4836, there were a few instances of links which used the block class to extend the width of the link to occupy the full width of its container. Since the USWDS button applies its own display: inline-block which takes precedence over the block utility class, this caused these links to shrink unintentionally.

Solution:

Discovered using full-project search patterns block[^'"]+usa-button, usa-button[^'"]+block, f\.button([^%]|\n)+block.

Screenshots:

Reactivate Account:

Before After
Screen Shot 2021-04-07 at 10 36 43 AM Screen Shot 2021-04-07 at 10 36 27 AM

IDV Session Errors:

Before After
Screen Shot 2021-04-07 at 10 35 16 AM Screen Shot 2021-04-07 at 10 24 43 AM

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.

aduth added 3 commits April 7, 2021 10:28
**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
@aduth aduth requested a review from anniehirshman-gsa April 7, 2021 14:39
Copy link
Contributor

@zachmargolis zachmargolis left a comment

Choose a reason for hiding this comment

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

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.

@aduth
Copy link
Contributor Author

aduth commented Apr 7, 2021

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 block class as deprecated when we come to removing those BassCSS stylesheets. I also don't know that I'd consider these "deprecated" in the traditional sense, as opposed to a conflict between classes. At some point I'm thinking we could consider removing .erb_lint.yml altogether, or at least the deprecated rules.

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' %>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

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.

@aduth aduth merged commit d5090ba into main Apr 7, 2021
@aduth aduth deleted the aduth-fix-block-button branch April 7, 2021 20:37
Copy link
Contributor

@anniehirshman-gsa anniehirshman-gsa left a comment

Choose a reason for hiding this comment

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

FWIW LGTM! 👍

@aduth aduth mentioned this pull request Oct 31, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants