Fluentui: Pagination: Graduate to 1.0 Release

[caradong]

Pagination component is added into experiment in this pr https://github.com/OfficeDev/office-ui-fabric-react/pull/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
• [x] put standard examples up top
• [ ] verify design
• [ ] convert to slots
• [x] For the button display mode, remove the flashing effect of default button component
• [x] 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 Microsoft/microsoft-ui-xaml#60 to make sure the designs are aligned

Steps

• [x] 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.

https://github.com/Microsoft/microsoft-ui-xaml/issues/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.