Use design sytem colors for password strength meter#9811
Merged
Conversation
changelog: User-Facing Improvements, Password Strength, Use consistent colors for password strength feedback
zachmargolis
approved these changes
Dec 20, 2023
| .pw-average { | ||
| .pw-bar:nth-child(-n + 2) { | ||
| background-color: $average; | ||
| .pw-weak &:nth-child(-n + 1) { |
Contributor
There was a problem hiding this comment.
looks like pw-weak , etc are defined in packs/pw-strength.js, should we update that to use the expanded password-strength__weak style or just leave it?
Contributor
Author
There was a problem hiding this comment.
Yep, I've got a lot more planned here for follow-on pull requests, and this is one of them. The problem I've had with password strength is that every time I've tried to touch it in the past, I end up doing a major overhaul, so I'm trying to do this a little more incrementally this time 😅
jmdembe
approved these changes
Dec 20, 2023
Contributor
Author
|
Related Slack thread for UX feedback: https://gsa-tts.slack.com/archives/C05R6BLVAQG/p1703086772393729 |
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🛠 Summary of changes
Refactors password strength styling, with the only user-facing visual effect being that it adopts standard design system colors for password feedback.
Originally this started as a continuation of the work in #9799 to eliminate the few remaining usages of
clearfix. Incrementally, this also works toward a broader refactor of the password strength implementation toward frontend conventions (ViewComponent, TypeScript, BEM CSS class naming, per-component stylesheet).📜 Testing Plan
Verify no regression in the behavior of password feedback being shown:
👀 Screenshots