fix(searchBox): add reusable SearchBox component #3489
Merged
Conversation
This file contains 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
francoischalifour
force-pushed
the
fix/searchbox-react
branch
from
ec689ee
to
6ae0ff5
Compare
|
Deploy preview for instantsearchjs ready! Built with commit ec689ee |
|
Deploy preview for instantsearchjs ready! Built with commit 684cde8 |
francoischalifour
force-pushed
the
fix/searchbox-react
branch
from
6ae0ff5
to
f2f903b
Compare
Haroenv
reviewed
Feb 7, 2019
src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap
Show resolved
Hide resolved
src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap
Outdated
Show resolved
Hide resolved
src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap
Outdated
Show resolved
Hide resolved
src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap
Outdated
Show resolved
Hide resolved
francoischalifour
force-pushed
the
fix/searchbox-react
branch
2 times, most recently
from
074877c
to
45194f6
Compare
Haroenv
reviewed
Feb 13, 2019
Haroenv
previously requested changes
Feb 13, 2019
francoischalifour
force-pushed
the
fix/searchbox-react
branch
from
45194f6
to
53dfb30
Compare
Closed
samouss
reviewed
Feb 14, 2019
francoischalifour
force-pushed
the
fix/searchbox-react
branch
from
53dfb30
to
8b92fa1
Compare
|
Would love to know when this gets merged -- have a customer waiting on it :) |
Haroenv
reviewed
Feb 19, 2019
Haroenv
approved these changes
Feb 19, 2019
francoischalifour
added a commit
that referenced
this pull request
Mar 1, 2019
The `unmount` function wasn't updated correctly since we moved the component to Preact. This is a remaining of #3489.
francoischalifour
added a commit
that referenced
this pull request
Mar 14, 2019
### Bug Fixes * **instantsearch:** update usage errors ([#3543](#3543)) ([a2a800b](a2a800b)) * **searchBox:** add reusable SearchBox component ([#3489](#3489)) ([c073a9a](c073a9a)) ### Features * **panel:** implement collapsed feature ([#3575](#3575)) ([e84b02b](e84b02b)) # Please enter the commit message for your changes. Lines starting # with '#' will be kept; you may remove them yourself if you want to. # An empty message aborts the commit. # # Date: Thu Mar 14 13:53:06 2019 +0100 # # On branch master # Your branch is ahead of 'origin/master' by 54 commits. # (use "git push" to publish your local commits) # # Changes to be committed: # modified: CHANGELOG.md # modified: package.json # modified: src/lib/version.js #
francoischalifour
added a commit
that referenced
this pull request
Mar 18, 2019
## [3.2.1](v3.1.0...v3.2.1) (2019-03-18) ### Bug Fixes * **connectToggleRefinement:** keep user provided, but falsy values ([#3526](#3526)) ([958a151](958a151)) * **instantsearch:** update usage errors ([#3543](#3543)) ([a2a800b](a2a800b)) * **panel:** append panel body as a child element ([#3561](#3561)) ([3de59a3](3de59a3)) * **poweredBy:** remove TypeScript extension in import ([#3530](#3530)) ([99ecc0b](99ecc0b)), closes [#3528](#3528) * **release:** update doctoc script ([e07c654](e07c654)) * **searchbox:** unmount component on dispose ([#3563](#3563)) ([c3f0435](c3f0435)) * **searchBox:** add reusable SearchBox component ([#3489](#3489)) ([c073a9a](c073a9a)) ### Features * **panel:** implement collapsed feature ([#3575](#3575)) ([e84b02b](e84b02b))
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This creates a reusable
SearchBoxReact component and removes the imperative JavaScript logic that we had.Benefits
SearchBoxcomponent in thesearchBoxwidgetSearchBoxcomponent in therefinementListSFFV searchbox. This allows to customize the templates and to style the SFFV searchbox (fixes Missing indication on how to style the searchForFacetValues searchbar #2052)Implementation
Different modes
The component exists both in controlled and uncontrolled modes:
searchAsYouTypeistrue(default value).searchAsYouTypeisfalse.onHistoryChangewas removedThis is an old API that we decided to not document on the v3
searchBoxdocumentation. This use case is handled by React.Templates
The
searchBoxwidget passes 3 templates to theSearchBoxcomponent:resetsubmitloadingIndicatorWhen using the
SearchBoxcomponent in the SFFV ofRefinementList, the templates are name as follows:itemshowMoreTextsearchableNoResultssearchableResetsearchableSubmitsearchableLoadingIndicatorImplications
templatesdocumentation inrefinementListcssClassesdocumentation inrefinementListStories