appbaseio / reactivesearch

Search UI components for React and Vue
https://opensource.appbase.io/reactivesearch
Apache License 2.0
4.9k stars 466 forks source link

Feature Request: Add an "active" class to active/current page links on the pagination component #264

Closed davidklebanoff closed 6 years ago

davidklebanoff commented 6 years ago

Issue Type: Enhancement

Description: It would be nice if on the pagination portion of the a results component, when a page is selected an "active" class is added to the HTML element, allowing greater customization through an application's css rules.

Example of current system:

In the below example, the user is currently on page 2. You can see that React has changed the link's class from css-1vy3jc0 to css-r1uvgb, which styles the background color of the link to the theme's primaryColor, but since there is no "active" class added, it can't be overridden/customized via the application's css.

<ResultCard
    ...
    innerClass={{
        pagination: 'pagination'
    }}
/>
<div class="css-11s5mbb pagination">
    <a class="css-1vy3jc0 css-19ogrg70">Prev</a>
    <a class="css-1vy3jc0 css-19ogrg70">1</a>
    <a class="css-r1uvgb css-19ogrg70">2</a>
    <a class="css-1vy3jc0 css-19ogrg70">3</a>
    <a class="css-1vy3jc0 css-19ogrg70">4</a>
    <a class="css-1vy3jc0 css-19ogrg70">5</a>
    <a class="css-1vy3jc0 css-19ogrg70">Next</a>
</div>

Reactivesearch version: 2.2.1

Also note, the ToggleButton component adds an "active" class to selected buttons, so this change would make the pagination consistent with that.

divyanshu013 commented 6 years ago

This will be added in next release (v2.3.0). Thanks for contributing 👍