feat(refinement-list): implement InstantSearch.css to searchbox #3263

francoischalifour · 2018-11-13T10:40:28Z

This implements InstantSearch.css for the refinementList searchbox.

At some point we should refactor the searchbox widget to use a single searchbox.

Specs

https://instantsearch-css.netlify.com/widgets/refinement-list/

Stories

https://deploy-preview-3263--instantsearchjs.netlify.com/v2/dev-novel/?selectedStory=RefinementList.with%20search%20inside%20items

algobot · 2018-11-13T10:43:40Z

Deploy preview for instantsearchjs ready!

Built with commit 064b141

https://deploy-preview-3263--instantsearchjs.netlify.com

Haroenv · 2018-11-13T10:52:03Z

src/components/SearchBox/Searchbox.js

+              <path d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z" />
+            </svg>
+          </button>
+          <span className={cssClasses.loadingIndicator} hidden>


should it always be hidden?

For now yes, there's no way to get this information from the refinement list.

We can remove it, or leave it as is waiting for the searchbox refactor.

ah I understand, can be left as-is then for now :)

I've checked the wrong option.

samouss

The reset button should not always be hidden, but only when the query is empty.

francoischalifour · 2018-11-14T09:26:52Z

I added the reset behavior, @samouss. I can't get to test it correctly with Enzyme though. I'd need to set the input to something to assert that hidden becomes true. They don't seem to have a proper API to fill an input.

samouss · 2018-11-14T10:04:25Z

@francoischalifour since the input is uncontrolled the only way to test it is to directly access the input and set a value on it. Indeed they don't have an a proper API to do it but you can probably get a reference to the node and set the value directly on it.

<a name=3.0.0-beta.0></a> # [3.0.0-beta.0](v2.10.3...v3.0.0-beta.0) (2018-12-10) ### Bug Fixes * **api:** remove transformData ([#3241](#3241)) ([5232936](5232936)) * **breadcrumb:** fix story with transformed label ([5a39312](5a39312)) * **breadcrumb:** rename item's name to label ([#3273](#3273)) ([0189cb4](0189cb4)) * **breadcrumb:** rename noRefinement to noRefinementRoot ([#3272](#3272)) ([21a5c61](21a5c61)) * **community:** fix search config ([#3142](#3142)) ([2b41982](2b41982)) * **connectRangeSlider:** remove deprecated connector ([#3189](#3189)) ([096ebeb](096ebeb)) * **current-refinements:** remove alphabetic sorting ([#3249](#3249)) ([9914f87](9914f87)), closes [/github.com/algolia/instantsearch.js/blob/011d47909894837f2c2da5088bc81803135d201b/src/lib/utils.js#L249](https://github.com//github.com/algolia/instantsearch.js/blob/011d47909894837f2c2da5088bc81803135d201b/src/lib/utils.js/issues/L249) * **getRefinements:** provide attributeName for type: query ([6006fe1](6006fe1)), closes [#3205](#3205) * **highlight:** avoid to ignore highlightedTagName ([#3323](#3323)) ([9871829](9871829)) * **highlight:** HighLight -> Highlight ([#3324](#3324)) ([5b4600d](5b4600d)) * **hits:** transform items after escaping ([#3251](#3251)) ([c46b82a](c46b82a)), closes [#3250](#3250) * **infiniteHits:** move option to templates ([#3300](#3300)) ([1828d66](1828d66)) * **InfiniteHits:** set the correct class for the last page ([#3232](#3232)) ([f604835](f604835)) * **lint:** remove unused import ([a9ec14c](a9ec14c)) * **pagination:** rename to ([#3275](#3275)) ([336945b](336945b)) * **range-input:** fix button classname ([#3234](#3234)) ([56695e1](56695e1)), closes [algolia/instantsearch-specs#92](algolia/instantsearch-specs#92) * **range-input:** remove templates ([#3128](#3128)) ([94a1ce5](94a1ce5)) * **rangeInput:** convert labels to templates ([#3312](#3312)) ([cdf91e8](cdf91e8)) * **rangeSlider:** fix CSS classes ([#3316](#3316)) ([56a5255](56a5255)) * **refinement-list:** remove in story ([0bf8db1](0bf8db1)) * **routing:** enforce RoutingManager is the last widget ([#3149](#3149)) ([1e86b2e](1e86b2e)), closes [#3148](#3148) * **searchbox:** fix and templates ([#3313](#3313)) ([4e13122](4e13122)) * **tests:** add react-test-renderer ([176494b](176494b)) * **toggleRefinement:** provide to templates ([#3303](#3303)) ([f515b62](f515b62)) ### Features * **3.0:** remove named exports on widgets ([#3129](#3129)) ([e718ea3](e718ea3)) * **breadcrumb:** implement InstantSearch.css ([#3115](#3115)) ([84d9f18](84d9f18)) * **clearRefinements:** implement InstantSearch.css ([#3308](#3308)) ([d98ecaf](d98ecaf)), closes [#3299](#3299) * **clearRefinements:** implement is.css ([#3114](#3114)) ([11cdc14](11cdc14)) * **current-refinements:** implement InstantSearch.css ([#3190](#3190)) ([a70917d](a70917d)) * **GeoSearch:** implement InstantSearch.css ([#3138](#3138)) ([1867d30](1867d30)) * **hierarchical-menu:** implement InstantSearch.css ([#3182](#3182)) ([be0890d](be0890d)) * **hierarchical-menu:** implement show more feature ([#3151](#3151)) ([f54fccd](f54fccd)) * **hierarchicalMenu:** merge showMore templates ([#3318](#3318)) ([0059251](0059251)) * **highlight:** export highlight function ([#3137](#3137)) ([d4b6fb1](d4b6fb1)) * **highlight:** implement InstantSearch.css ([#3132](#3132)) ([260a0b8](260a0b8)) * **hits:** implement InstantSearch.css ([#3096](#3096)) ([b3cc413](b3cc413)) * **hits-per-page:** implement InstantSearch.css ([#3125](#3125)) ([49e7096](49e7096)) * **menu:** implement InstantSearch.css ([#3181](#3181)) ([a274ab7](a274ab7)) * **menuSelect:** implement is.css ([#3109](#3109)) ([43e654a](43e654a)) * **numeric-menu:** implement InstantSearch.css ([#3162](#3162)) ([f5358f4](f5358f4)) * **numericSelector:** remove widget ([#3183](#3183)) ([e9063c0](e9063c0)) * **pagination:** implement InstantSearch.css ([#3119](#3119)) ([f3c3343](f3c3343)) * **panel:** add Panel widget ([#3253](#3253)) ([82e19fc](82e19fc)) * **poweredBy:** implement InstantSearch.css ([#3164](#3164)) ([bcc18a0](bcc18a0)) * **poweredBy:** update logo ([#3256](#3256)) ([838abec](838abec)) * **price-ranges:** implement InstantSearch.css ([#3124](#3124)) ([335339b](335339b)) * **range-input:** implement InstantSearch.css ([#3098](#3098)) ([ee6bc7e](ee6bc7e)) * **range-slider:** implement InstantSearch.css ([#3126](#3126)) ([b9b8d31](b9b8d31)) * **rating-menu:** implement InstantSearch.css ([#3161](#3161)) ([d039e11](d039e11)) * **ratingMenu:** merge labels and templates ([#3317](#3317)) ([505a2e7](505a2e7)) * **refinement-list:** implement InstantSearch.css ([#3152](#3152)) ([11c5580](11c5580)) * **refinement-list:** implement InstantSearch.css (2) ([#3179](#3179)) ([0365641](0365641)) * **refinement-list:** implement InstantSearch.css to searchbox ([#3263](#3263)) ([ad905c7](ad905c7)) * **search-client:** use search client ([#3133](#3133)) ([8e70a3e](8e70a3e)) * **searchbox:** implement InstantSearch.css ([#3127](#3127)) ([c68c1fe](c68c1fe)) * **snippet:** implement InstantSearch.css ([#3134](#3134)) ([fa56657](fa56657)) * **sort-by:** implement InstantSearch.css ([#3120](#3120)) ([5f21723](5f21723)) * **sortBy:** rename item to ([#3230](#3230)) ([9e24a68](9e24a68)) * **stats:** implement InstantSearch.css ([#3097](#3097)) ([63a688e](63a688e)) * **stories:** add default CurrentRefinements story ([#3252](#3252)) ([45a8fd5](45a8fd5)) * **suit:** Default component names to empty object ([0b26356](0b26356)) * **suit-helper:** provide a helper to create suit css classnames ([f142496](f142496)) * **toggleRefinement:** implement InstantSearch.css ([#3135](#3135)) ([d67a437](d67a437)) * compress templates ([#3176](#3176)) ([54f2f77](54f2f77)), closes [#3095](#3095) * **widgets:** use warn utils ([#3175](#3175)) ([3164b06](3164b06))

<a name=3.0.0-beta.1></a> # [3.0.0-beta.1](v2.10.3...v3.0.0-beta.1) (2018-12-14) ### Bug Fixes * **api:** remove transformData ([#3241](#3241)) ([5232936](5232936)) * **breadcrumb:** fix story with transformed label ([5a39312](5a39312)) * **breadcrumb:** rename item's name to label ([#3273](#3273)) ([0189cb4](0189cb4)) * **breadcrumb:** rename noRefinement to noRefinementRoot ([#3272](#3272)) ([21a5c61](21a5c61)) * **community:** fix search config ([#3142](#3142)) ([2b41982](2b41982)) * **configure:** make lifecycle functions optional ([#3339](#3339)) ([2b88cfa](2b88cfa)) * **connectRangeSlider:** remove deprecated connector ([#3189](#3189)) ([096ebeb](096ebeb)) * **current-refinements:** remove alphabetic sorting ([#3249](#3249)) ([9914f87](9914f87)), closes [/github.com/algolia/instantsearch.js/blob/011d47909894837f2c2da5088bc81803135d201b/src/lib/utils.js#L249](https://github.com//github.com/algolia/instantsearch.js/blob/011d47909894837f2c2da5088bc81803135d201b/src/lib/utils.js/issues/L249) * **getRefinements:** provide attributeName for type: query ([6006fe1](6006fe1)), closes [#3205](#3205) * **highlight:** avoid to ignore highlightedTagName ([#3323](#3323)) ([9871829](9871829)) * **highlight:** HighLight -> Highlight ([#3324](#3324)) ([5b4600d](5b4600d)) * **hits:** transform items after escaping ([#3251](#3251)) ([c46b82a](c46b82a)), closes [#3250](#3250) * **infiniteHits:** move option to templates ([#3300](#3300)) ([1828d66](1828d66)) * **InfiniteHits:** set the correct class for the last page ([#3232](#3232)) ([f604835](f604835)) * **lint:** remove unused import ([a9ec14c](a9ec14c)) * **pagination:** rename to ([#3275](#3275)) ([336945b](336945b)) * **poweredBy:** export connectPoweredBy connector ([#3331](#3331)) ([7d48c46](7d48c46)) * **poweredBy:** fix CSS classes ([#3332](#3332)) ([abc9b82](abc9b82)) * **range-input:** fix button classname ([#3234](#3234)) ([56695e1](56695e1)), closes [algolia/instantsearch-specs#92](algolia/instantsearch-specs#92) * **range-input:** remove templates ([#3128](#3128)) ([94a1ce5](94a1ce5)) * **rangeInput:** convert labels to templates ([#3312](#3312)) ([cdf91e8](cdf91e8)) * **rangeSlider:** fix CSS classes ([#3316](#3316)) ([56a5255](56a5255)) * **refinement-list:** remove in story ([0bf8db1](0bf8db1)) * **routing:** enforce RoutingManager is the last widget ([#3149](#3149)) ([1e86b2e](1e86b2e)), closes [#3148](#3148) * **searchbox:** fix and templates ([#3313](#3313)) ([4e13122](4e13122)) * **tests:** add react-test-renderer ([176494b](176494b)) * **toggleRefinement:** provide to templates ([#3303](#3303)) ([f515b62](f515b62)) ### Features * **3.0:** remove named exports on widgets ([#3129](#3129)) ([e718ea3](e718ea3)) * **breadcrumb:** implement InstantSearch.css ([#3115](#3115)) ([84d9f18](84d9f18)) * **bundle:** update bundle strategy ([#3260](#3260)) ([a7dab81](a7dab81)) * **clearRefinements:** implement InstantSearch.css ([#3308](#3308)) ([d98ecaf](d98ecaf)), closes [#3299](#3299) * **clearRefinements:** implement is.css ([#3114](#3114)) ([11cdc14](11cdc14)) * **current-refinements:** implement InstantSearch.css ([#3190](#3190)) ([a70917d](a70917d)) * **GeoSearch:** implement InstantSearch.css ([#3138](#3138)) ([1867d30](1867d30)) * **hierarchical-menu:** implement InstantSearch.css ([#3182](#3182)) ([be0890d](be0890d)) * **hierarchical-menu:** implement show more feature ([#3151](#3151)) ([f54fccd](f54fccd)) * **hierarchicalMenu:** merge showMore templates ([#3318](#3318)) ([0059251](0059251)) * **highlight:** export highlight function ([#3137](#3137)) ([d4b6fb1](d4b6fb1)) * **highlight:** implement InstantSearch.css ([#3132](#3132)) ([260a0b8](260a0b8)) * **hits:** implement InstantSearch.css ([#3096](#3096)) ([b3cc413](b3cc413)) * **hits-per-page:** implement InstantSearch.css ([#3125](#3125)) ([49e7096](49e7096)) * **infiniteHits:** rename showMore template to showMoreText ([#3330](#3330)) ([babad39](babad39)) * **menu:** implement InstantSearch.css ([#3181](#3181)) ([a274ab7](a274ab7)) * **menu:** merge showMore templates ([#3328](#3328)) ([73a450b](73a450b)) * **menuSelect:** implement is.css ([#3109](#3109)) ([43e654a](43e654a)) * **numeric-menu:** implement InstantSearch.css ([#3162](#3162)) ([f5358f4](f5358f4)) * **numericSelector:** remove widget ([#3183](#3183)) ([e9063c0](e9063c0)) * **pagination:** implement InstantSearch.css ([#3119](#3119)) ([f3c3343](f3c3343)) * **pagination:** rename labels to templates ([#3333](#3333)) ([9f24098](9f24098)) * **panel:** add Panel widget ([#3253](#3253)) ([82e19fc](82e19fc)) * **poweredBy:** disable setting URL from widget ([#3334](#3334)) ([a5ff6af](a5ff6af)) * **poweredBy:** implement InstantSearch.css ([#3164](#3164)) ([bcc18a0](bcc18a0)) * **poweredBy:** update logo ([#3256](#3256)) ([838abec](838abec)) * **price-ranges:** implement InstantSearch.css ([#3124](#3124)) ([335339b](335339b)) * **range-input:** implement InstantSearch.css ([#3098](#3098)) ([ee6bc7e](ee6bc7e)) * **range-slider:** implement InstantSearch.css ([#3126](#3126)) ([b9b8d31](b9b8d31)) * **rating-menu:** implement InstantSearch.css ([#3161](#3161)) ([d039e11](d039e11)) * **ratingMenu:** merge labels and templates ([#3317](#3317)) ([505a2e7](505a2e7)) * **refinement-list:** implement InstantSearch.css ([#3152](#3152)) ([11c5580](11c5580)) * **refinement-list:** implement InstantSearch.css (2) ([#3179](#3179)) ([0365641](0365641)) * **refinement-list:** implement InstantSearch.css to searchbox ([#3263](#3263)) ([ad905c7](ad905c7)) * **refinementList:** merge showMore templates ([#3329](#3329)) ([9b6a9c4](9b6a9c4)) * **search-client:** use search client ([#3133](#3133)) ([8e70a3e](8e70a3e)) * **searchbox:** implement InstantSearch.css ([#3127](#3127)) ([c68c1fe](c68c1fe)) * **snippet:** implement InstantSearch.css ([#3134](#3134)) ([fa56657](fa56657)) * **sort-by:** implement InstantSearch.css ([#3120](#3120)) ([5f21723](5f21723)) * **sortBy:** rename item to ([#3230](#3230)) ([9e24a68](9e24a68)) * **stats:** implement InstantSearch.css ([#3097](#3097)) ([63a688e](63a688e)) * **stories:** add default CurrentRefinements story ([#3252](#3252)) ([45a8fd5](45a8fd5)) * **suit:** Default component names to empty object ([0b26356](0b26356)) * **suit-helper:** provide a helper to create suit css classnames ([f142496](f142496)) * **toggleRefinement:** implement InstantSearch.css ([#3135](#3135)) ([d67a437](d67a437)) * **widgets:** use warn utils ([#3175](#3175)) ([3164b06](3164b06)) * compress templates ([#3176](#3176)) ([54f2f77](54f2f77)), closes [#3095](#3095)

feat(refinement-list): implement InstantSearch.css to searchbox

ce74b3f

francoischalifour requested a review from a team November 13, 2018 10:40

Haroenv reviewed Nov 13, 2018

View reviewed changes

francoischalifour changed the base branch from feat/3.0 to v3 November 13, 2018 12:53

samouss requested changes Nov 13, 2018

View reviewed changes

fix(refinement-list): show reset button if query

064b141

samouss approved these changes Nov 15, 2018

View reviewed changes

francoischalifour merged commit ad905c7 into v3 Nov 15, 2018

francoischalifour deleted the feat/3.0-rl-searchbox branch November 15, 2018 10:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(refinement-list): implement InstantSearch.css to searchbox #3263

feat(refinement-list): implement InstantSearch.css to searchbox #3263

Uh oh!

francoischalifour commented Nov 13, 2018 •

edited

Loading

Uh oh!

algobot commented Nov 13, 2018 •

edited

Loading

Uh oh!

Haroenv Nov 13, 2018

Uh oh!

francoischalifour Nov 13, 2018

Uh oh!

Haroenv Nov 13, 2018

Uh oh!

samouss left a comment

Uh oh!

francoischalifour commented Nov 14, 2018

Uh oh!

samouss commented Nov 14, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

feat(refinement-list): implement InstantSearch.css to searchbox #3263

feat(refinement-list): implement InstantSearch.css to searchbox #3263

Uh oh!

Conversation

francoischalifour commented Nov 13, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Specs

Stories

Uh oh!

algobot commented Nov 13, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Haroenv Nov 13, 2018

Choose a reason for hiding this comment

Uh oh!

francoischalifour Nov 13, 2018

Choose a reason for hiding this comment

Uh oh!

Haroenv Nov 13, 2018

Choose a reason for hiding this comment

Uh oh!

samouss left a comment

Choose a reason for hiding this comment

Uh oh!

francoischalifour commented Nov 14, 2018

Uh oh!

samouss commented Nov 14, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

francoischalifour commented Nov 13, 2018 •

edited

Loading

algobot commented Nov 13, 2018 •

edited

Loading