Skip to content
This repository has been archived by the owner on Jun 12, 2024. It is now read-only.

[search] add "collapse" option #130

Closed
wants to merge 13 commits into from
Closed

[search] add "collapse" option #130

wants to merge 13 commits into from

Conversation

katydecorah
Copy link
Contributor

@katydecorah katydecorah commented May 15, 2019

If collapse={true} then the search component will collapse into a button:

image

When the button is clicked/focused, the input will expand. The input will overlap anything to its left so that it will fit in the space without breaking the layout:

image

Once the user clicks way from the opened input, it will collapse again.

On smaller screens/mobile, the collapse option disables to reveal the full input:

image

QA

Responsive

  • Check on mobile-size viewport.
  • Check on tablet-size viewport.
  • Check on laptop-size viewport.
  • Check on big-monitor-size viewport.

Cross-browser

  • Check in Chrome.
  • Check in Firefox.
  • Check in Safari.
  • Check in Edge.
  • Check in IE11.
  • Check in mobile Safari.
  • Check in Android's Chrome.

Review

⏲ No rush

@katydecorah katydecorah marked this pull request as ready for review May 16, 2019 20:21
@katydecorah
Copy link
Contributor Author

@colleenmcginnis No rush on this review since we likely won't roll side-wide search out until after next week

@colleenmcginnis
Copy link
Contributor

@katydecorah the code looks great! The search bar popping over the tab text was not sitting right with me so I started playing around with another approach (which def would need to be refined) in #133. Let me know what you think!

@katydecorah
Copy link
Contributor Author

closes in favor of #133

@katydecorah katydecorah deleted the search-collapse branch November 10, 2020 14:38
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants