feat(menu): implement InstantSearch.css #3181

francoischalifour · 2018-10-05T20:53:51Z

This PR implements the new specs for the Menu widget. It doesn't handle search.

Specs

https://instantsearch-css.netlify.com/widgets/menu/

Stories

https://deploy-preview-3181--algolia-instantsearch.netlify.com/v2/dev-novel/?selectedStory=Menu.default

algobot · 2018-10-05T20:58:05Z

Deploy preview for algolia-instantsearch ready!

Built with commit 5ac9c5f

https://deploy-preview-3181--algolia-instantsearch.netlify.com

Haroenv

mostly good, two questions

Haroenv · 2018-10-08T10:29:26Z

docgen/src/guides/v3-migration.md

+</div>
+```
+
+##### Search and no results


this should be removed, since searchable isn't implemented yet

Haroenv · 2018-10-08T10:29:59Z

src/connectors/menu/connectMenu.js

-    [ showMoreLimit ]
-    [ sortBy = ['name:asc'] ]
+    [ showMoreLimit ],
+    [ sortBy = ['name:asc'] ],


does it not have refined, name:asc?

We usually don't provide the isRefined value to the array for a menu. But we probably should at the end. You can test with the value inside the stories, pick "Small Kitchen Appliances" the value will disappear from the list.

samouss · 2018-10-08T13:12:55Z

src/connectors/menu/connectMenu.js

-    [ showMoreLimit ]
-    [ sortBy = ['name:asc'] ]
+    [ showMoreLimit ],
+    [ sortBy = ['name:asc'] ],


We usually don't provide the isRefined value to the array for a menu. But we probably should at the end. You can test with the value inside the stories, pick "Small Kitchen Appliances" the value will disappear from the list.

samouss · 2018-10-08T13:15:00Z

src/widgets/menu/defaultTemplates.js

+    '<span class="{{cssClasses.label}}">{{label}}</span>' +
+    '<span class="{{cssClasses.count}}">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span>' +
+    '</a>',
+  searchableNoResults: 'No results',


Can be removed since it's not searchable.

samouss · 2018-10-08T13:16:00Z

src/widgets/menu/menu.js

+  [ limit = 10 ],
+  [ showMore = false ],
+  [ showMoreLimit = 10 ],
+  [ cssClasses.{root, noRefinementRoot, searchBox, list, item, selectedItem, link, label, count, noResults, showMore, disabledShowMore} ],


searchBox, noResutls can be removed since it's not searchable.

samouss · 2018-10-08T13:16:08Z

src/widgets/menu/menu.js

- * @property {string|string[]} [body] CSS class to add to the body element.
- * @property {string|string[]} [footer] CSS class to add to the footer element.
+ * @property {string|string[]} [noRefinementRoot] CSS class to add to the root element when no refinements.
+ * @property {string|string[]} [searchBox] CSS class to add to the search box element.


Can be removed since it's not searchable.

samouss · 2018-10-08T13:16:11Z

src/widgets/menu/menu.js

 * @property {string|string[]} [link] CSS class to add to each link (when using the default template).
+ * @property {string|string[]} [label] CSS class to add to each label (when using the default template).
 * @property {string|string[]} [count] CSS class to add to each count element (when using the default template).
+ * @property {string|string[]} [noResults] CSS class to add to the no results element.


Can be removed since it's not searchable.

samouss · 2018-10-08T13:18:15Z

src/widgets/menu/menu.js

+      suit({ modifierName: 'noRefinement' }),
+      userCssClasses.noRefinementRoot
+    ),
+    searchBox: cx(


Can be removed since it's not searchable.

samouss · 2018-10-08T13:18:22Z

src/widgets/menu/menu.js

+    link: cx(suit({ descendantName: 'link' }), userCssClasses.link),
+    label: cx(suit({ descendantName: 'label' }), userCssClasses.label),
+    count: cx(suit({ descendantName: 'count' }), userCssClasses.count),
+    noResults: cx(


Can be removed since it's not searchable.

Haroenv

this looks correct now 👍

<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)

francoischalifour added 7 commits October 5, 2018 11:51

feat(refinement-list): apply templates specs

fb8cd75

docs(migrations): update widget

7299f54

refactor(refinement-list): update default placeholder

d29a60d

test(refinement-list): update snapshot

3cd22b6

feat(refinement-list): update stories

7ae9cd5

feat(menu): implement InstantSearch.css

dd5841f

docs(migrations): update guide

8dcabee

francoischalifour requested a review from a team October 5, 2018 20:53

Haroenv requested changes Oct 8, 2018

View reviewed changes

samouss requested changes Oct 8, 2018

View reviewed changes

francoischalifour added 5 commits October 8, 2018 10:31

feat(menu): apply changes

6d679fe

feat(menu): apply changes

89c379b

docs(menu): remove searchbox

0019c6e

feat(menu): remove transformData

6c73618

test(menu): update snapshots

6d0ed56

Haroenv approved these changes Oct 9, 2018

View reviewed changes

fix: merge conflicts

5ac9c5f

francoischalifour changed the base branch from feat/3.0-refinement-list-templates to feat/3.0 October 9, 2018 17:16

francoischalifour merged commit a274ab7 into feat/3.0 Oct 9, 2018

francoischalifour deleted the feat/3.0-menu-2 branch October 9, 2018 17:36

feat(menu): implement InstantSearch.css #3181

feat(menu): implement InstantSearch.css #3181

Uh oh!

Conversation

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

Uh oh!

Specs

Stories

Uh oh!

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

Uh oh!

Uh oh!

Haroenv left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Haroenv left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

francoischalifour commented Oct 5, 2018 •

edited

Loading

algobot commented Oct 5, 2018 •

edited

Loading