Pagination: Graduate to 1.0 Release

[caradong]

Pagination component is added into experiment in this pr #7100 and there are some more work before this control can graduate from experiment package.

Component Details

Imports

Exports/ Component Breakdown

Intended Package

OUFR

Code mockup/example

Code Sample

CodePens
ComboBox Example
Individual Buttons Example

Types

Name	Type	Default Value	Description
className	string		Optional class name to be added to the root

Design Assets

Component Ownership

Fabric Team

Deadlines

Todos

• investigate crossover with pivot control (break up into primitive control and composed)
• support styling before/after current page
• public interface for next/prev/first/last
• customization links
• unit tests and visual parity tests
• put standard examples up top
• verify design
• convert to slots
• For the button display mode, remove the flashing effect of default button component
• Make combo box the default option and reorder the examples accordingly
• Investigate the styles of Combox and update the component to use subComponentStyles
• go through this design spec Feature Proposal: PagerControl  microsoft-ui-xaml#60 to make sure the designs are aligned

Steps

• Themable (Component.base/Component.styles)
• Unit tests
• Visual tests
• Documentation and examples
• Keyboard Accessible
• High Constrast Support
• RTL Support
• Design Review
• API review
• Public Preview
• Ready for Publishing

[KevinTCoughlin]

Note: Adding some ideas for future iterations of the Pagination control.

One behavior that this control may want to support is the ability to navigate pagination numbers using the ARROW keys. To support this, I think it would require wrapping them in a FocusZone. Currently you can only navigate via TAB which is enough to meet accessibility standards. But I instinctively tried to use LEFT/RIGHT.

[KevinTCoughlin]

The control's types may also want to inherit from React.AllHTMLAttributes or some such to better support native props without requiring us to explicitly add things such as ariaLabel, className, etc.

[Vitalius1]

In this recording you can see a flashing of the selected page in the middle. If this is a part of the default button visual effect, we might wanna look into giving it a smoother fadeout of some sort (perhaps a CSS transition). @betrue-final-final what do you think on that? Should we smooth out the flashing of the background or remove it completely?

[micahgodbolt]

Very interesting opportunity to coordinate with the XAML team who is creating their own pagination control.

microsoft/microsoft-ui-xaml#60

Spoke with them today about making sure we're working off the same designs and driving for feature/variant parity, as well as interface consistency.

[betrue-final-final]

There are a few things wrong with the recording @Vitalius1.

1. The flashing is disturbing. We should remove it.
2. Using just color and a subtle weight change for the selected number isn't very accessible. I don't remember seeing that.
3. The combobox version should be default as it is accessible. The one with numbers is optimized to work for sighted people in specific scenarios that @caradong identified earlier.

[dzearing]

Any progress here @caradong

[dzearing]

@micahgodbolt we should discuss if there are any leftovers here.

[caradong]

Last time I synced with Micah, the next step is to adopt the slot implementation. I have not get a chance to finish those yet. Let me know if we want to have a quick sync again about this.

[Kid-Codi]

Hi @caradong,

Any work continuing to on this issue?

Thanks.

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.