-
Notifications
You must be signed in to change notification settings - Fork 516
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.
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
fix(searchBox): add reusable SearchBox component #3489
Conversation
ec689ee
to
6ae0ff5
Compare
Deploy preview for instantsearchjs ready! Built with commit ec689ee |
Deploy preview for instantsearchjs ready! Built with commit 684cde8 |
6ae0ff5
to
f2f903b
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🙌 left some comments on parts I'm not sure about
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
074877c
to
45194f6
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, all use cases I know of work.
Still a few snapshots with objects in __html
, apart from that ✅
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
as discussed, let's change the searchbox slots in refinementList to be prefixed with searchable
45194f6
to
53dfb30
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I didn't check the full test suite, there is too many thing to look at.
53dfb30
to
8b92fa1
Compare
Would love to know when this gets merged -- have a customer waiting on it :) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
two small questions, otherwise ✅
The `unmount` function wasn't updated correctly since we moved the component to Preact. This is a remaining of #3489.
### 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 #
## [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))
This creates a reusable
SearchBox
React component and removes the imperative JavaScript logic that we had.Benefits
SearchBox
component in thesearchBox
widgetSearchBox
component in therefinementList
SFFV 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:
searchAsYouType
istrue
(default value).searchAsYouType
isfalse
.onHistoryChange
was removedThis is an old API that we decided to not document on the v3
searchBox
documentation. This use case is handled by React.Templates
The
searchBox
widget passes 3 templates to theSearchBox
component:reset
submit
loadingIndicator
When using the
SearchBox
component in the SFFV ofRefinementList
, the templates are name as follows:item
showMoreText
searchableNoResults
searchableReset
searchableSubmit
searchableLoadingIndicator
Implications
templates
documentation inrefinementList
cssClasses
documentation inrefinementList
Stories