Adaptive Toolbar

[TeyaVes]

targets: https://github.com/telerik/kendo-themes-private/issues/299

Toolbar Rendering Details

Scrolling Toolbar

• Add class k-toolbar-scrollable if scrolling is enabled
• Add class k-toolbar-scrollable-overlay only if we want to display the gradient overlay - this is in the case when the Toolbar is scrollable, there are enough items for scrolling and the scrollButtons are hidden
• When scrolling is enabled, wrap the toolbar items in k-toolbar-items wrapper

Details

<div class="k-toolbar">
    <div class="k-toolbar-items">
        <Button />
        <MenuButton />
        ...
    </div>
</div>

• The scrollButtons should be outside the container separated by a Toolbar separator with class k-toolbar-button-separator
• The scrollButtons should have k-toolbar-prev and k-toolbar-next classes
• Add k-toolbar-scroll-items class to k-toolbar-items element if we want to enable the native browser scroll. Otherwise, don’t add the class and handle the scrolling in the component
• Add classes k-toolbar-scrolling-start, k-toolbar-scrolling-end - if we are at the beginning of the scrolling (at the very left) or at the end. This takes care of the gradient overlay when the toolbar is scrollable but the buttons are not visible.
• Enable/disable the scrollButtons if the scrolling toolbar is at the very start or very end (similarly to the current scrollable Tabstrip behaviour)

Overflow section

• The overflow section is opened inside a Popup component and the toolbar items are wrapped inside an k-toolbar-items-list
• fillMode and size classes are added to k-toolbar-items-list - k-toolbar-items-list-solid, -flat, -outline; k-toolbar-items-list-sm, -md, -lg depending on the Toolbar component options
  • The fillMode is responsible for the color of the separator inside the overflow section; the size - for the paddings and gaps between the Toolbar items inside the overflow section
• The fillMode and size component options inside the k-toolbar-items-list are propagated to the components inside

Global changes:

• Add class k-toolbar-separator to the separators
• Add toolbar separator next to the scroll and overflow buttons in all scenarios with class k-toolbar-button-separator

Details

<div class="k-toolbar">
    <Button class="k-toolbar-prev">
    <Button class="k-toolbar-next">
    <ToolbarSeparator class="k-toolbar-button-separator">
    <div class="k-toolbar-items">
        <Button />
        <MenuButton />
        ...
    </div>
</div>


<div class="k-toolbar">
    <Button class="k-toolbar-prev">
    <ToolbarSeparator class="k-toolbar-button-separator">
    <div class="k-toolbar-items">
        <Button />
        <MenuButton />
        ...
    </div>
    <ToolbarSeparator class="k-toolbar-button-separator">
    <Button class="k-toolbar-next">
</div>


<div class="k-toolbar">
    <Button />
    <MenuButton />
    ...
    <ToolbarSeparator class="k-toolbar-button-separator">
    <Button class="k-toolbar-overflow-button">
</div>

[epetrow]

Two additional things that I am wondering:

1. Is overflow true by default since it does look like it from the tests?
2. Should we split the toolbar-section tests into two since we are showing sizing and fill mode in one?

[TeyaVes]

Two additional things that I am wondering:

1. Is overflow true by default since it does look like it from the tests?
2. Should we split the toolbar-section tests into two since we are showing sizing and fill mode in one?

1. By default, the toolbar is with width: 100% and wraps if the content is wider. The other options are resizable with overflow menu or overflow section and scrollable with buttons or no buttons.
2. I've split the toolbar-section tests in two.

[TeyaVes]

The visual changes in the grid-angular tests are expected as previosly, the toolbar inside the grid didn't have a sizing class and no padding were applied, which is not correct.