Skip to content

Use design system utility classes for IPP location elements#7036

Merged
aduth merged 4 commits intomainfrom
aduth-separator-button-margin
Oct 6, 2022
Merged

Use design system utility classes for IPP location elements#7036
aduth merged 4 commits intomainfrom
aduth-separator-button-margin

Conversation

@aduth
Copy link
Contributor

@aduth aduth commented Sep 27, 2022

🛠 Summary of changes

This pull request removes custom styles which had been implemented for the in-person proofing locations screen. Largely this should be visually identical to how it was previously, with the exception of a minor margin correction for the mobile button placement (based on Figma references).

Rationale:

  • They can be achieved with existing design system utility classes
  • Align class naming for component stylesheets to be consistent with file name
  • Avoid ambiguity between design system classes and IdP-specific ad hoc style classes caused by similar naming
  • Use standard breakpoints ("tablet")
  • Improve performance by reducing CSS stylesheet size

Context:

📜 Testing Plan

  • Confirm that the IPP locations step looks and behaves same as it had

👀 Screenshots

Desktop:

Before: before
After: after

Mobile:

Before: before
After: after

@aduth aduth requested review from a team and tomas-nava September 27, 2022 19:50
@aduth aduth force-pushed the aduth-separator-button-margin branch from 9064bd0 to 50bfac4 Compare September 28, 2022 13:07
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

aduth added 4 commits October 6, 2022 08:43
changelog: Internal, Performance, Remove redundant stylesheet CSS
1. It doesn't have the same effect as wrap-name, which assigned the overflow-wrap style (whereas break-word assigns word-wrap)
2. Unclear what specific scenario it's meant to accommodate, since post office names would not be expected to include long words which couldn't break normally
3. `word-wrap: break` is deprecated and we should try to move away from it
There's a small viewport range between 480-640 which would otherwise show the button at a narrower width, due to default styles of USWDS showing button at full width only up to 480px viewport
@aduth aduth force-pushed the aduth-separator-button-margin branch from 50bfac4 to f3ea9d3 Compare October 6, 2022 12:52
@aduth aduth merged commit 152dd97 into main Oct 6, 2022
@aduth aduth deleted the aduth-separator-button-margin branch October 6, 2022 13:09
jskinne3 pushed a commit that referenced this pull request Oct 12, 2022
* Use design system utility classes for IPP location elements

changelog: Internal, Performance, Remove redundant stylesheet CSS

* Increase margin

* Remove break-word class

1. It doesn't have the same effect as wrap-name, which assigned the overflow-wrap style (whereas break-word assigns word-wrap)
2. Unclear what specific scenario it's meant to accommodate, since post office names would not be expected to include long words which couldn't break normally
3. `word-wrap: break` is deprecated and we should try to move away from it

* Reassign full width for <tablet buttons

There's a small viewport range between 480-640 which would otherwise show the button at a narrower width, due to default styles of USWDS showing button at full width only up to 480px viewport
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants