Pagination changer

[albx]

This pull request significantly enhances the documentation and sample usage of the BitPagination component, introducing and documenting a new page size changer feature (ShowChanger) and updating the PageLinkGenerator API to support more flexible navigation scenarios. The changes clarify SSR (server-side rendering) compatibility, improve accessibility, and provide comprehensive usage examples for the new features.

Key changes include:

New Page Size Changer Feature

• Added documentation and usage examples for the page size changer (ShowChanger), allowing users to select the number of items per page via a dropdown. This includes new parameters such as PageSize, PageSizeOptions, ChangerId, and PageSizeLabelTemplate, as well as guidance on two-way binding and event callbacks for page size changes. [1] [2] [3] [4] [5] [6]

• Updated accessibility and generated HTML/CSS documentation to cover the new dropdown, including keyboard accessibility and custom ID assignment for the changer. [1] [2]

PageLinkGenerator API Improvements

• Changed the PageLinkGenerator parameter to accept a PaginationState object (containing both current page and page size) instead of just the page number, enabling URLs that reflect both pagination and page size. All related documentation, code samples, and parameter tables have been updated accordingly. [1] [2] [3] [4] [5]

SSR and Render Mode Clarifications

• Added clear warnings and notes about render mode requirements: the page size changer (ShowChanger), which uses BitDropdown, only works in interactive render modes and not in static SSR. Documentation now explains the fallback behavior and links to related dropdown documentation. [1] [2] [3]

Sample and Usage Updates

• Updated sample code and usage examples (including in News.razor) to reflect the new PageLinkGenerator signature and to demonstrate two-way binding with page and page size. Added new examples for custom label templates, custom IDs, and SSR-compatible URLs. [1] [2] [3] [4]

Accessibility and Progressive Enhancement

• Improved accessibility documentation for the dropdown changer and clarified how progressive enhancement works with both interactive and SSR modes, including how URLs are generated and how click handling is managed. [1] [2]

These updates make the BitPagination component more flexible, accessible, and easier to integrate in both interactive and SSR Blazor applications.

[Copilot]

Pull request overview

This PR extends BitPagination with an optional page-size changer (ShowChanger) implemented via BitDropdown, and updates the PageLinkGenerator API to accept a richer PaginationState (now including PageSize). It also updates docs, stories, samples, and tests to demonstrate and validate the new behavior, including SSR/interactive render-mode guidance.

Changes:

• Added a page-size changer UI to BitPagination (dropdown-based) plus related parameters (PageSize*, Changer*, PageSizeLabelTemplate).
• Updated PaginationState and changed PageLinkGenerator from Func<int, string> to Func<PaginationState, string>.
• Updated documentation, stories, samples, and tests to reflect the new API and feature set (including interactive-vs-SSR notes).

Reviewed changes

Copilot reviewed 17 out of 17 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
tests/BitBlazor.Test/Components/Pagination/BitPaginationTest.Rendering.razor	Updates rendering expectations and adds markup tests for the new changer UI.
tests/BitBlazor.Test/Components/Pagination/BitPaginationTest.Behaviors.cs	Updates PageLinkGenerator signature usage and adds behavior tests for page-size changing + changer accessibility/id stability.
tests/BitBlazor.Test/Components/Dropdown/BitDropdownTest.Behaviors.cs	Adds a behavior test asserting the dropdown closes when an item is clicked.
stories/BitBlazor.Stories/Components/Stories/Components/BitPagination.stories.razor	Adds Storybook args and stories demonstrating page-size changer usage.
src/BitBlazor/Components/Pagination/PaginationState.cs	Extends PaginationState to include PageSize.
src/BitBlazor/Components/Pagination/BitPagination.razor.cs	Implements new changer parameters/state and updates URL generation to use PaginationState.
src/BitBlazor/Components/Pagination/BitPagination.razor	Renders the new page-size changer dropdown UI when enabled.
src/BitBlazor/Components/Dropdown/BitDropdownItem.razor.cs	Closes the dropdown after an item click (used by pagination changer).
src/BitBlazor/Components/Dropdown/BitDropdown.razor.cs	Adds/organizes closing behavior and clarifies interactive render-mode requirements.
samples/BitBlazor.Sample/BitBlazor.Sample/Services/PraticheService.cs	Adds pageSize support to the sample data service.
samples/BitBlazor.Sample/BitBlazor.Sample/Services/NewsService.cs	Adds pageSize support to the sample data service.
samples/BitBlazor.Sample/BitBlazor.Sample/Services/IPraticheService.cs	Updates interface to accept pageSize.
samples/BitBlazor.Sample/BitBlazor.Sample/Services/INewsService.cs	Updates interface to accept pageSize.
samples/BitBlazor.Sample/BitBlazor.Sample/Components/Pages/Pratiche.razor	Demonstrates ShowChanger usage and reload behavior on page-size changes.
samples/BitBlazor.Sample/BitBlazor.Sample/Components/Pages/News.razor	Updates to new PageLinkGenerator signature and interactive binding pattern.
docs/components/pagination.md	Documents the new changer feature and updated PageLinkGenerator/SSR guidance.
docs/components/dropdown.md	Documents interactive render-mode requirement, including indirect usage via pagination changer.

Suppressed comments (1)

src/BitBlazor/Components/Pagination/BitPagination.razor:42

• When Disabled is true, the page-size dropdown items should also be disabled; otherwise the page size can still change via keyboard/mouse even though the pagination is disabled.

                    <BitDropdownItem Active="@(state.PageSize == pageSize)" Href="@GetPageSizeHref(pageSize)" OnClick="@(() => ClickPageSizeItemAsync(pageSize))">
                        <span>@RenderPageSizeLabel(pageSize)</span>
                    </BitDropdownItem>

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.