#3400: Revise UI of search bars with labels, create component - [EL]

[rachidatecs]

Ticket

Resolves #3400

Changes

• Move reset button from left to right
• Fix flexbox layout (label is now always 100% wide, avoiding squished inputs on small desktops)
• Componentize the search with label module
• Cleanup some sonditions for the label text on the edit member domains search that can no longer be triggered (the only condition that now applies is has_edit_members_portfolio_permission, which is the same condition in the view permission mixin)
• Fixed the width of the checkbox column
• I did not revise the non-label search bars. It makes sense to do so in a later ticket, when adding labels to those searches

Context for reviewers

Setup

Code Review Verification Steps

As the original developer, I have

Satisfied acceptance criteria and met development standards

• Met the acceptance criteria, or will meet them in a subsequent PR
• Created/modified automated tests
• Update documentation in READMEs and/or onboarding guide

Ensured code standards are met (Original Developer)

• If any updated dependencies on Pipfile, also update dependencies in requirements.txt.
• Interactions with external systems are wrapped in try/except
• Error handling exists for unusual or missing values

Validated user-facing changes (if applicable)

• Tag @dotgov-designers in this PR's Reviewers for design review. If code is not user-facing, delete design reviewer checklist
• Verify new pages have been added to .pa11yci file so that they will be tested with our automated accessibility testing
• Checked keyboard navigability
• Tested general usability, landmarks, page header structure, and links with a screen reader (such as Voiceover or ANDI)

As a code reviewer, I have

Reviewed, tested, and left feedback about the changes

• Pulled this branch locally and tested it
• Verified code meets all checks above. Address any checks that are not satisfied
• Reviewed this code and left comments. Indicate if comments must be addressed before code is merged
• Checked that all code is adequately covered by tests
• Verify migrations are valid and do not conflict with existing migrations

Validated user-facing changes as a developer

Note: Multiple code reviewers can share the checklists above, a second reviewer should not make a duplicate checklist. All checks should be checked before approving, even those labeled N/A.

• New pages have been added to .pa11yci file so that they will be tested with our automated accessibility testing
• Checked keyboard navigability
• Meets all designs and user flows provided by design/product
• Tested general usability, landmarks, page header structure, and links with a screen reader (such as Voiceover or ANDI)
• (Rarely needed) Tested as both an analyst and applicant user

As a designer reviewer, I have

Verified that the changes match the design intention

• Checked that the design translated visually
• Checked behavior. Comment any found issues or broken flows.
• Checked different states (empty, one, some, error)
• Checked for landmarks, page heading structure, and links

Validated user-facing changes as a designer

• Checked keyboard navigability
• Tested general usability, landmarks, page header structure, and links with a screen reader (such as Voiceover or ANDI)
• Tested with multiple browsers (check off which ones were used)
  • Chrome
  • Microsoft Edge
  • FireFox
  • Safari
• (Rarely needed) Tested as both an analyst and applicant user

References

• Code review best practices

Screenshots

[github-actions]

🥳 Successfully deployed to developer sandbox rjm.

[github-actions]

🥳 Successfully deployed to developer sandbox rjm.

[zandercymatics]

Nice work. With the reset button present, it looks a bit funky on mobile view though. Won't block on it, but it'd be good to fix before merging

You may have a better solution, but I was able to fix this on mobile view by: setting a max input width, and by changing the display of the parent div to block. Then on the reset element, I removed the margin left and added it on top instead.

For reference, after I did that, it looked like this:

[zandercymatics]

(Q) Why is there a whitespace here?

[rachidatecs]

USWDS code. My guess is this is a natural margin between the copy and the following image.

[zandercymatics]

Makes sense

[github-actions]

🥳 Successfully deployed to developer sandbox rjm.

[github-actions]

🥳 Successfully deployed to developer sandbox rjm.