Component options for Pager

[Juveniel]

design: https://github.com/telerik/web-components-ux/issues/478 part of: https://github.com/telerik/kendo-themes-private/issues/6

Component options for Pager

enum PagerSize { small, medium, large };

class Pager {
    size: ( null | PagerSize ) = PagerSize.medium
}

Rendering

• [ ] Rendering

Pager

<!-- default rendering -->

Numeric Pager

<div class="k-pager k-widget k-pager-md">
    <div class="k-pager-numbers-wrap">
        <button class="k-pager-nav k-pager-first k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
            <span class="k-button-icon k-icon k-i-caret-alt-to-left"></span>
        </button>
        <button class="k-pager-nav k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
            <span class="k-button-icon k-icon k-i-caret-alt-left"></span>
        </button>
        <select class="k-picker k-dropdown-list k-dropdown k-rounded-md k-picker-md">
            <option></option>
        </select>
        <div class="k-pager-numbers">
            <button class="k-button k-button-md k-button-flat k-button-flat-primary">
                <span class="k-button-text"></span>
            </button>
            <button class="k-button k-button-md k-button-flat k-button-flat-primary">
                <span class="k-button-text"></span>
            </button>
            <button class="k-button k-button-md k-button-flat k-button-flat-primary">
                <span class="k-button-text"></span>
            </button>
            <button class="k-button k-button-md k-button-flat k-button-flat-primary">
                <span class="k-button-text"></span>
            </button>
            <button class="k-button k-button-md k-button-flat k-button-flat-primary">
                <span class="k-button-text"></span>
            </button>
            <button class="k-button k-button-md k-button-flat k-button-flat-primary">
                <span class="k-button-text"></span>
            </button>
        </div>
        <button class="k-pager-nav k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
            <span class="k-button-icon k-icon k-i-caret-alt-right"></span>
        </button>
        <button class="k-pager-nav k-pager-last k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
            <span class="k-button-icon k-icon k-i-caret-alt-to-right"></span>
        </button>
    </div>
    <span class="k-pager-sizes k-label">
        <span class="k-dropdown k-picker k-picker-md k-picker-solid k-rounded-md">
            <span class="k-input-inner">
                <span class="k-input-value-text"></span>
            </span>
            <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
                <span class="k-button-icon k-icon k-i-arrow-s"></span>
            </button>
        </span>
    </span>
    <button class="k-pager-refresh k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
        <span class="k-button-icon k-icon k-i-arrow-rotate-cw"></span>
    </button>
    <span class="k-pager-info k-label"></span>
</div>

Input Pager

<div class="k-pager k-widget k-pager-md">
    <div class="k-pager-numbers-wrap">
        <button class="k-pager-nav k-pager-first k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
            <span class="k-button-icon k-icon k-i-caret-alt-to-left"></span>
        </button>
        <button class="k-pager-nav k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
            <span class="k-button-icon k-icon k-i-caret-alt-left"></span>
        </button>
        <select class="k-picker k-dropdown-list k-dropdown k-rounded-md k-picker-md">
            <option></option>
        </select>
        <span class="k-pager-input k-label">
            <span class="k-textbox k-input k-input-md k-input-solid k-rounded-md">
                <input type="text" class="k-input-inner">
            </span>
        </span>
        <button class="k-pager-nav k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
            <span class="k-button-icon k-icon k-i-caret-alt-right"></span>
        </button>
        <button class="k-pager-nav k-pager-last k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
            <span class="k-button-icon k-icon k-i-caret-alt-to-right"></span>
        </button>
    </div>
    <span class="k-pager-sizes k-label">
        <span class="k-dropdown k-picker k-picker-md k-picker-solid k-rounded-md">
            <span class="k-input-inner">
                <span class="k-input-value-text"></span>
            </span>
            <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
                <span class="k-button-icon k-icon k-i-arrow-s"></span>
            </button>
        </span>
    </span>
    <button class="k-pager-refresh k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
        <span class="k-button-icon k-icon k-i-arrow-rotate-cw"></span>
    </button>
    <span class="k-pager-info k-label"></span>
</div>

<!-- canonical rendering -->

<div class="
    k-pager,
    k-widget,
    k-pager-{size}
">
    <div class="k-pager-numbers-wrap">
        <button class="k-pager-nav k-pager-first k-button k-button-{size} k-button-flat k-button-flat-base k-icon-button">
            <span class="k-button-icon k-icon k-i-caret-alt-to-left"></span>
        </button>
        <button class="k-pager-nav k-button k-button-{size} k-button-flat k-button-flat-base k-icon-button">
            <span class="k-button-icon k-icon k-i-caret-alt-left"></span>
        </button>
        <select class="k-picker k-dropdown-list k-dropdown k-rounded-md k-picker-{size}">
            <option></option>
        </select>
        <div class="k-pager-numbers">
            <button class="k-button k-button-{size} k-button-flat k-button-flat-primary">
                <span class="k-button-text"></span>
            </button>
            <button class="k-button k-button-{size} k-button-flat k-button-flat-primary">
                <span class="k-button-text"></span>
            </button>
            <button class="k-button k-button-{size} k-button-flat k-button-flat-primary">
                <span class="k-button-text"></span>
            </button>
            <button class="k-button k-button-{size} k-button-flat k-button-flat-primary">
                <span class="k-button-text"></span>
            </button>
            <button class="k-button k-button-{size} k-button-flat k-button-flat-primary">
                <span class="k-button-text"></span>
            </button>
            <button class="k-button k-button-{size} k-button-flat k-button-flat-primary">
                <span class="k-button-text"></span>
            </button>
        </div>
        <button class="k-pager-nav k-button k-button-{size} k-button-flat k-button-flat-base k-icon-button">
            <span class="k-button-icon k-icon k-i-caret-alt-right"></span>
        </button>
        <button class="k-pager-nav k-pager-last k-button k-button-{size} k-button-flat k-button-flat-base k-icon-button">
            <span class="k-button-icon k-icon k-i-caret-alt-to-right"></span>
        </button>
    </div>
    <span class="k-pager-sizes k-label">
        <span class="k-dropdown k-picker k-picker-{size} k-picker-solid k-rounded-md">
            <span class="k-input-inner">
                <span class="k-input-value-text"></span>
            </span>
            <button class="k-input-button k-button k-button-{size} k-button-solid k-button-solid-base k-icon-button">
                <span class="k-button-icon k-icon k-i-arrow-s"></span>
            </button>
        </span>
    </span>
    <button class="k-pager-refresh k-button k-button-{size} k-button-flat k-button-flat-base k-icon-button">
        <span class="k-button-icon k-icon k-i-arrow-rotate-cw"></span>
    </button>
    <span class="k-pager-info k-label"></span>
</div>

Changes:

1. Page numbers previously represented by links are now flat buttons.
2. Unordered list k-pager-numbers is now a div.
3. Removed k-link class.
4. Added k-pager-mobile-md and k-pager-mobile-sm classes which if added show/hide the internal elements of the Pager.

Deliverables

• [ ] Implement component options.
• [ ] Create JSON structure
• [ ] Variables (add prefix $kendo- if missing)
• [ ] Docs article containing each mode.

Visual test/s link

[epetrow]

@dmanova Replacing the page numbers with flat buttons showcases an issue with the hover state of the primary flat button where it is barely visible. See below screenshot where the second button is hovered:

[dmanova]

We (the design team) have a discussion on the matter with the pale color on hover, but it seems if we want to provide a good solution it'll need additional, more detailed work. We review some variants (e.g. link buttons, secondary flat buttons) that we suppose may give a fast solution, but they have other drawbacks. So at the moment I would suggest creating a design task and meanwhile either keeping the old specific styles for pager buttons, or making them Flat buttons and having this issue for a while.

I suppose you know better than me what are the pros and cons.

Another note that I have is that it seems the "worst" case is with the Default Theme Main swatch. The other swatches and themes have a little bit more contrast for the Flat button, hover state.