0.10.0-alpha Changelog


This build introduces breaking change. Please read below.

Breaking Changes

2 Changes

Bugs

0 Bug Fixes

Released

June 19, 2017

Sketch template

Light Theme

Highlights

  • Clarity Icons

    New Icons added for folder-open, filter-grid, filter-grid-circle and map
  • Sketch Template Updated
    The Clarity sketch template has been updated with the latest changes in 0.9.9. This change includes the new color palette and fixes to forms, headers, wizard etc.
  • Tree View (alpha)

    0.10.0-alpha introduces a breaking change in the Tree View component.

    This breaking change allows us to support important Tree View features like:
    • Lazy Loading of Tree Nodes
    • Dynamically generating Trees with unknown depth.

    Migrating to the New Tree View

    1. Basic Tree

    0.9 Tree View (before)
    
    <clr-tree-node>
        Parent Node
        <clr-tree-node>
            Child Node 1
        </clr-tree-node>
        <clr-tree-node>
            Child Node 2
        </clr-tree-node>
    </clr-tree-node>
    0.10.0-alpha Tree View (after)
    The new tree uses the *clrIfExpanded structural directive to render the child nodes only when the parent node is expanded. We recommend that you use the de-sugared syntax of the structural directive.
    1. De-sugared Syntax (Preferred)
    
    <clr-tree-node>
        Parent Node
        <ng-template clrIfExpanded>
            <clr-tree-node>
                Child Node 1
            </clr-tree-node>
            <clr-tree-node>
                Child Node 2
            </clr-tree-node>
        </ng-template>
    </clr-tree-node>
    2. Microsyntax
    
    <clr-tree-node>
        Parent Node
        <clr-tree-node *clrIfExpanded>
            Child Node
        </clr-tree-node>
        <clr-tree-node *clrIfExpanded>
            Child Node 2
        </clr-tree-node>
    </clr-tree-node>

    2. Node Expand

    0.9 Tree View (before)
    
    <clr-tree-node [(clrTreeNodeExpanded)]="expand">
        Parent Node
        <clr-tree-node>
            Child Node 1
        </clr-tree-node>
        <clr-tree-node>
            Child Node 2
        </clr-tree-node>
    </clr-tree-node>
    0.10.0-alpha Tree View (after)
    
    <clr-tree-node>
        Parent Node
        <ng-template [(clrIfExpanded)]="expand">
            <clr-tree-node>
                Child Node 1
            </clr-tree-node>
            <clr-tree-node>
                Child Node 2
            </clr-tree-node>
        </ng-template>
    </clr-tree-node>

    3. Checkbox Tree

    0.9 Tree View (before)
    
    <clr-tree>
        <clr-tree-node>
            Parent Node
            <clr-tree-node>
                Child Node 1
            </clr-tree-node>
            <clr-tree-node>
                Child Node 2
            </clr-tree-node>
        </clr-tree-node>
    <clr-tree>
    0.10.0-alpha Tree View (after)
    To enable selection in the new Tree, use the [(clrSelected)] Input on the root node.
    
    <clr-tree-node [(clrSelected)]="selected">
        Parent Node
        <ng-template clrIfExpanded>
            <clr-tree-node>
                Child Node 1
            </clr-tree-node>
            <clr-tree-node>
                Child Node 2
            </clr-tree-node>
        </ng-template>
    </clr-tree-node>

    4. Recursive Trees

    The new Tree supports recursive checkbox tree. Visit this plnkr for a quick demo.

    Breaking Changes

    1. Input/Outputs Removed from clr-tree-node
    Input/OutputAlternative
    [(clrTreeNodeExpanded)]Input/Output on the clrIfExpanded directive
    [(clrTreeNodeExpandable)] Not needed anymore because tree nodes automatically detect and register the clrIfExpanded directive to make themselves expandable
    [clrTreeNodeLoading]clrLoading directive nested in the clrIfExpanded directive to activate the loading indicator when the parent node is expanded
    [(clrTreeNodeSelected)] This has been replaced by [(clrSelected)] on the TreeNode.
    [(clrTreeNodeModel)] Not needed anymore since this was only used to output the overall selection which the new tree does not do anymore.
    2. clr-tree component

    clr-tree and the Output (clrTreeSelectedChange) have now been removed. Because the nodes are now lazily loaded, there is no way for us to output the currently selected nodes back to the user. Instead, you can now use (clrSelectedChange) on the TreeNode itself. [clrTreeSelected] input has now been replaced by the [clrSelected] on the TreeNode.