feat(refinementList): show more count

[mikedavis77]

Summary

Currently the 'show more' button doesn't provide any information about how many more facet values are available when clicking the 'show more' button.

This behaviour has been asked for several times by customers and raised on this Stackoverflow issue.

Result

Based upon the POC that I did for this Stackoverflow issue using a custom refinementList connector, I have applied this to the standard refinementList, HierarchicalMenu and Menu connectors. This adds an additional param that is passed to the showMoreText template function so that it can be used within the templating of these buttons.

While this began with the refinementList, this has expanded to also update the hierarchicalMenu and menu widgets as these use the same showMore component.

Examples of how this can be used is:

  // refinementList widget.
  instantsearch.widgets.refinementList({
    container: '#brand',
    attribute: 'brand',
    limit: 5,
    showMoreLimit: 30,
    showMore: true,
    templates: {
      showMoreText({isShowingMore, showMoreCount}) {
        return isShowingMore
          ? `Show top 5 items`
          : `Show ${showMoreCount} more`;
      },
    },
  }),
  // hierarchicalMenu widget.
  instantsearch.widgets.hierarchicalMenu({
    container: '#categories',
    attributes: [
      'hierarchicalCategories.lvl0',
      'hierarchicalCategories.lvl1',
      'hierarchicalCategories.lvl2',
      'hierarchicalCategories.lvl3',
    ],
    showMore: true,
    limit: 3,
    showMoreLimit: 14,
    templates: {
      showMoreText({isShowingMore, showMoreCount}) {
        return isShowingMore
          ? `Show top 3 items`
          : `Show ${showMoreCount} more`;
      },
    },
  }),
  // menu widget.
  instantsearch.widgets.menu({
    container: '#categoriesMenu',
    attribute: 'categories',
    showMore: true,
    limit: 4,
    showMoreLimit: 5,
    templates: {
      showMoreText({isShowingMore, showMoreCount}) {
        return isShowingMore
          ? `Show top 4 items`
          : `Show ${showMoreCount} more`;
      },
    },
  }),

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 825f8be:

Sandbox	Source
InstantSearch.js	Configuration
react-instantsearch-app	Configuration
example-react-instantsearch-hooks-default-theme	Configuration
example-vue-instantsearch-default-theme	Configuration

[dhayab]

This is really great!

I have a few small nitpicky suggestions, otherwise my main remarks are following.

This could have Vue support quite easily now that you have the connectors set up for InstantSearch.js. Could we put that in here?

We could move some of the testing into our common test suite to have less testing code and better consistency. I can take care of this in a stacked PR.

[mikedavis77]

This is really great!

I have a few small nitpicky suggestions, otherwise my main remarks are following.

This could have Vue support quite easily now that you have the connectors set up for InstantSearch.js. Could we put that in here?

We could move some of the testing into our common test suite to have less testing code and better consistency. I can take care of this in a stacked PR.

Thanks, I realised that I had missed the Vue support he other day so I have started looking at this

[Haroenv]

I wonder if the number given to the template shouldn't be showMoreTotalCount, as that's the number of items that will be visible. Not "show x more items", but "10 items / 13 items". You can still easily calculate "total - current" to get the difference. What do you think?

[Haroenv]

there should probably be a test where showMoreCount isn't 0