Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Add button to clear value from search fields #22202

Merged
merged 15 commits into from
Jun 22, 2022
Merged

feat: Add button to clear value from search fields #22202

merged 15 commits into from
Jun 22, 2022

Conversation

mike-plummer
Copy link
Contributor

User facing changelog

  • Adds new button to clear search field when filtering specs
  • Fix styling issue if a very long search value is input on the Specs List page

Additional details

Refactoring the Input component to rely on flexbox for layout of prefix/suffix, was previously using absolute positioning. This caused issues with the filter field in SpecsList- the search value would underlap the suffix section because it had a dynamic width based on the number of specs

Steps to test

  1. Open project into E2E or CT mode
  2. On Specs List view, type a value into the search field. Note that a new "X" button appears on the right side immediately left of the result count section
  3. Click the "X" button. Observe field is cleared, spec list resets, and "X" button hides
  4. Verify that new "X" button is navigable by keyboard and has appropriate aria-label
  5. Input a very long value into the field, observe that the value scrolls rather than underlaps result count section
  6. Navigate into a spec, open inline spec search
  7. Type a value into the search field, observe new "X" button appears on right side
  8. Click "X" button. Observe field is cleared, spec list resets, and "X" button hides
  9. Verify that new "X" button is navigable by keyboard and has appropriate aria-label
  10. Verify other usages of the Input component still style appropriately. Examples:
  • Project filter field in global mode
  • Filename field in "New Spec" modal

How has the user experience changed?

clear-btn.mov

PR Tasks

  • Have tests been added/updated?
  • Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
  • Has a PR for user-facing changes been opened in cypress-documentation?
  • [na] Have API changes been updated in the type definitions?

@cypress-bot
Copy link
Contributor

cypress-bot bot commented Jun 8, 2022

Thanks for taking the time to open a PR!

@cypress
Copy link

cypress bot commented Jun 8, 2022 •
edited
Loading


Test summary

4874 • 0 • 61 • 0 • Flakiness 2

Run details
Project cypress
Status Passed
Commit e409f62
Started Jun 22, 2022 11:27 PM
Ended Jun 22, 2022 11:41 PM
Duration 13:59 💡
OS Linux Debian - 10.11
Browser Firefox 98

View run in Cypress Dashboard ➡️

Flakiness

commands/actions/click.cy.js 1 Flakiness
1 ... > scroll-behavior > can scroll to and click elements in html with scroll-behavior: smooth
e2e/origin/commands/assertions.cy.ts 1 Flakiness
1 cy.origin assertions > #consoleProps > .should() and .and()

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

@mike-plummer mike-plummer marked this pull request as ready for review June 8, 2022 20:41
@mike-plummer mike-plummer self-assigned this Jun 8, 2022
@jennifer-shehane
Copy link
Member

@mike-plummer Have you looked through the percy snapshots? (Do you have access?) Is this flake or has something changed in the css that's affecting the icons/text on many of the other components?

@mike-plummer
Copy link
Contributor Author

@mike-plummer Have you looked through the percy snapshots? (Do you have access?) Is this flake or has something changed in the css that's affecting the icons/text on many of the other components?

@jennifer-shehane Good catch! About half looks like the normal flake, but my changes have shifted the prefix/suffix section of the input just a pixel or two more than Percy likes. I'll look at getting those shifted back

@rachelruderman
Copy link
Contributor

@mike-plummer so sorry for the late review! It's been an eventful sprint on firewatch 🔥 😅 I'll try to get to this today!

ZachJW34
ZachJW34 approved these changes Jun 17, 2022
View reviewed changes
Copy link
Contributor

@ZachJW34 ZachJW34 left a comment

Choose a reason for hiding this comment

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

Works and look great!

marktnoonan
marktnoonan approved these changes Jun 22, 2022
View reviewed changes
Copy link
Contributor

@marktnoonan marktnoonan left a comment

Choose a reason for hiding this comment

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

Love the description and steps to test including accessibility!

rachelruderman
rachelruderman approved these changes Jun 22, 2022
View reviewed changes
Copy link
Contributor

@rachelruderman rachelruderman left a comment

Choose a reason for hiding this comment

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

Nice job!

@mike-plummer mike-plummer merged commit b678b14 into develop Jun 22, 2022
@mike-plummer mike-plummer deleted the 21686-search-bar-clear-btn branch June 22, 2022 23:42
@cypress-bot cypress-bot bot mentioned this pull request Jun 22, 2022
Closed
tgriesser added a commit that referenced this pull request Jun 24, 2022
@tgriesser
Merge branch 'muaz/CLOUD-577-spec-list-display-latest-runs' into tgri…
7f042c4 
…esser/CLOUD-577-spec-list-display-latest-runs-batching

* muaz/CLOUD-577-spec-list-display-latest-runs:
  fix: Update "Request Access" button state after requesting access (ACI) (#22499)
  feat: Support "Queued" latest run status (#22497)
  fix: remove ctx.cloud.reset in tests, handle infinite loop in stale results (#22483)
  chore: add reporter webpack to gulp watch script (#22386)
  fix: Increase timeout for npm-webpack-dev-server tests (#22489)
  fix: Time out unmatched prerequests in proxy to avoid leaking memory (#22462)
  fix: Sort results in findCrossOriginLogs test helper to deterministic (#22481)
  fix: memory leak caused by storing base64 encoded files recieved by CDP `Network.requestWillBeSent` (#22460)
  fix: Improve cross-origin cookie handling (#22320)
  feat: Add button to clear value from search fields (#22202)
  chore: Add test to verify settings panels are collapsed by default (#22382)
  fix: process_profiler follow up work for v10 (#22363)
  chore: Update Chrome (stable) to 103.0.5060.53 (#22441)
  refactor: use design system windicss config (#21503)
  chore: update readme logo (#22433)
  chore: Update Chrome (beta) to 103.0.5060.53 (#22351)
  chore: updating version (#22432)
  Trigger Build
@lmiller1990 lmiller1990 mentioned this pull request Dec 19, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@marktnoonan marktnoonan

@ZachJW34 ZachJW34

@rachelruderman rachelruderman

Assignees

@mike-plummer mike-plummer

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Search Bar Clear Button
5 participants
@mike-plummer @jennifer-shehane @rachelruderman @marktnoonan @ZachJW34