Expose Slider perPage prop in Shelf

[juliomoreira]

Former Issue: #126

Is your feature request related to a problem? Please describe.
We would like to have more flexibility on setting shelf items per page and it's breakpoints;

Describe the solution you'd like
We would like to specify a perPage prop in the Shelf that would pass-through to the underlying Slider component;

Describe alternatives you've considered
I believe currently we can only achieve that by extending the shelf entirely;

Additional context
Sometimes we need 2 or more items on mobile devices;

[lbebber]

We intend on adding that functionality, but are a bit wary of simply exposing the perPage prop just now because we are not 100% sure of the API yet, and changing it later would be a breaking change.

But we will think it through and try to add something like it soon.

[lbebber]

Open to suggestions by the way.

One thing I have in mind is to support both just a number (e.g. itemsPerPage: 4) which would be set to smaller values automatically depending on the screen size, or an object with device breakpoints (e.g.: itemsPerPage: {phone: 2, tablet: 4, desktop: 5})

This allows more consistent rendering between SSR and CSR than using specific screen sizes, as the SSRenderer doesn't know the user screen size, only the class of device.

[victorhmp]

Hi @juliomoreira !

We've recently (this Friday) released v1.23.0 (vtex-apps/shelf#168) of the Shelf component that addresses this issue.

Actually, our Shelf already had support for an itemsPerPage prop (that was just not documented, our bad). But that would only set an upper-bound for the number of displayed items, that said, you could only control the maximum number of items displayed, with 5 being the maximum.

Our non-breaking solution to give you more control over how many items are displayed at a time was to add a new prop to the Shelf (and the Slider) component: minItemsPerPage, which is a Number and is part of the productList props. That way you can control how many items are shown in the smallest and in the biggest screen size, with the component adjusting itself when in intermediate sizes. For example, if you want to always display 2 items on mobile, you just need to pass minItemsPerPage: 2.

[victorhmp]

We're also working on one more new prop for the Shelf component that will allow you to control in whether or not you want to hide the pagination dots shown below the shelf's content and I think it goes well with the minItemsPerPage feature.