0.10.0-alpha.5 Changelog


This build introduces breaking change. Please read below.

Breaking Changes

1 Change

Bugs

1 Bug Fix

Released

July 21, 2017

Sketch template

Light Theme

Highlights

  • Lazy loading the content of tabs

    You can now use a Clarity directive *clrIfActive to lazy load the content of an active tab. When you use the directive, the content will only render in the DOM when the tab is active and destroy it when the tab becomes inactive. In addition, the tabs have been refactored with a slight change in markup. Read the section below for more details.

    
    <clr-tabs>
        <clr-tab>
            <button clrTabLink>Tab1</button>
            <clr-tab-content *clrIfActive>
            (content here will load by default unless another tab is specified as active)
            </clr-tab-content>
        <clr-tab>
        <clr-tab>
            <button clrTabLink>Tab2</button>
            <clr-tab-content *clrIfActive>
            (content here will load when this tab is active)
            </clr-tab-content>
        <clr-tab>
    </clr-tabs>
  • Tabs Refactor

    0.10.0 introduces a breaking change for tabs component in Clarity. Note that there is no breaking change for users using the static (HTML) version of tabs. This change enables lazy loading of tab contents.

    Migrating tabs to the new markup

    The 0.10.0 version deprecates the clr-tab-link markup. Now you can use use the clrTabLink directive on a DOM element for links as shown below. The use of button is recommended unless the tab is meant to reroute the user to another page.

    This version also introduces another wrapper element clr-tab around each tab link and content pair.

    The new tabs use the *clrIfActive structural directive to lazy load the content of an active tab. For simple cases, using the microsyntax would suffice. We recommend that you use the de-sugared syntax of the structural directive so you can bind to its input/output.

    0.9 tabs component markup (before)
    
    <clr-tabs>
        <clr-tab-link>Tab1</clr-tab-link>
        <clr-tab-link clrTabLinkActive="true">Tab2</clr-tab-link>
    
        <clr-tab-content>
        ...
        </clr-tab-content>
        <clr-tab-content clrTabContentActive="true">
        ...
        </clr-tab-content>
    </clr-tabs>
    0.10.0 tabs component (after) - de-sugared syntax (preferred)
    
    <clr-tabs>
        <clr-tab>
            <button clrTabLink>Tab1</button>
            <ng-template [(clrIfActive)]="tab1Active">
                <clr-tab-content>
                ...
                </clr-tab-content>
            </ng-template>
        <clr-tab>
        <clr-tab>
            <button clrTabLink>Tab2</button>
            <ng-template [(clrIfActive)]="tab2Active">
                <clr-tab-content>
                ...
                </clr-tab-content>
            </ng-template>
        <clr-tab>
    </clr-tabs>
    0.10.0 tabs component (after) - microsyntax
    
    <clr-tabs>
        <clr-tab>
            <button clrTabLink>Tab1</button>
            <clr-tab-content *clrIfActive>
            ...
            </clr-tab-content>
        <clr-tab>
        <clr-tab>
            <button clrTabLink>Tab2</button>
            <clr-tab-content *clrIfActive="true">
            ...
            </clr-tab-content>
        <clr-tab>
    </clr-tabs>
    Input/Outputs Removed
    Input/OutputAlternative
    [(clrTabsCurrentTabIndex)] Not needed anymore. Use Input/Output on the clrIfActive directive to set or determine which tab is active.
    [clrTabContentActive] Set Input value on the clrIfActive directive.
    [clrTabLinkActive] Set Input value on the clrIfActive directive.
    (clrTabsCurrentTabContentChanged) Use Output on the clrIfActive directive to determine when a tab's active status has changed.
    (clrTabsCurrentTabLinkChanged) Use Output on the clrIfActive directive to determine when a tab's active status has changed.
  • Focus trap directive

    Another Clarity directive you can now use is clrFocusTrap. This directive is used for trapping the user tabbing to the focusable elements within the container.

Bug Fixes

  • Fix all internal causes of Expression has changed after it was checked errors in the Datagrid. Obviously, we cannot fix the ones that are due to external application code, but most of these errors people are experiencing should be gone.