Skip to content

Remove custom camera icon implementation#6218

Merged
aduth merged 3 commits intomainfrom
aduth-rm-custom-camera-icon
Apr 20, 2022
Merged

Remove custom camera icon implementation#6218
aduth merged 3 commits intomainfrom
aduth-rm-custom-camera-icon

Conversation

@aduth
Copy link
Contributor

@aduth aduth commented Apr 19, 2022

Refactoring follow-up to #6212 (comment)

Why: As a simplification, since we can use it directly from the design system.

Testing Instructions:

  1. Have both the IdP and an instance of a local sample app running
  2. Start at http://localhost:9292
  3. Under "Options" in the top-right, select "IAL 2 (strict)"
  4. Click "Sign in"
  5. Complete proofing flow up to document capture
  6. Upload photos of document
  7. Click "Continue"
  8. Grant access to your camera
  9. Observe camera icon appears same as before

image

aduth added 3 commits April 19, 2022 08:31
**Why**: As a simplification, since we can use it directly from the design system.
**Why**: Per inline comment, because it's standalone icon
changelog: Upcoming Features, Identity Verification, Add personal key step screen
@aduth aduth requested a review from nprimak April 19, 2022 12:36
Comment on lines +161 to +164
.usa-button:not(.usa-button--unstyled) > &.usa-icon:first-child {
// Unset icon placement where assumed to be adjacent to text, since the selfie capture button
// uses a standalone icon.
margin: 0;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

For reference:

// Upstream: https://github.com/uswds/uswds/pull/4493
.usa-icon {
.usa-button > &:first-child {
// Note: This diverges from the upstream pull request in a couple ways:
// 1. There should not be any margins offsetting to account for line height, since Login.gov
// Design System normalizes button line height to 1.
// 2. Float is replaced by `vertical-align`, since otherwise it will have the effect of having
// the icon appear to the far edge of the button, rather than next to the text.
vertical-align: bottom;
margin-right: 0.25rem;
}
.usa-button:not(.usa-button--unstyled) > &:first-child {
margin-left: -1 * $icon-min-padding;
margin-right: #{0.5rem - px-to-rem($icon-min-padding)};
}
}

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 aduth merged commit 65b1183 into main Apr 20, 2022
@aduth aduth deleted the aduth-rm-custom-camera-icon branch April 20, 2022 12:31
@jmdembe jmdembe mentioned this pull request Apr 26, 2022
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.

2 participants