0.10.0-alpha.2 Changelog


This build introduces breaking change. Please read below.

Breaking Changes

2 Changes

Bugs

1 Bug Fix

Released

June 23, 2017

Sketch template

Light Theme

Highlights

  • Lazy loading the content of dropdown menu

    You can now use a Clarity directive *clrIfOpen to lazy load the content of a dropdown menu. When you use the directive, the content will only render in the DOM when the dropdown is open and destroy it when the dropdown is closed.

    
    <clr-dropdown>
        ...
        <clr-dropdown-menu *clrIfOpen>
            (content here will lazy load)
        </clr-dropdown-menu>
    </clr-dropdown>
  • Alerts Refactor

    0.10.0-alpha.2 introduces a breaking change for static HTML alerts in Clarity. Note that there is no breaking change for users who were implementing their alerts with the clr-alert Angular component in Clarity.

    This change:
    • Decreases the minified CSS of Clarity by 5%
    • Removes relative and absolute positioning inside alerts
    • Removes several .clr-icon-* utility classes that were deprecated prior to 0.6
    • Enables users to define any icon in their Clarity Icons library to show up in alerts
    • Deprecates the component selector .alert-item in favor of the clr-alert-item
    • Deprecates the BS4 alert types of alert-danger, alert-info, alert-warning, and alert-success for the terser types of danger, info, warning, and success. These types are passed to the [clrAlertType] input of the clr-alert Angular component. This change does not impact static HTML alerts. The default is now info and not alert-info

    Migrating static alerts to the new DOM structure

    The HTML structure of alerts in 0.10.0-alpha adds a new wrapper around .alert-item elements and uses a .alert-icon-wrapper element inside an .alert-item. This icon wrapper should also contain a clr-icon.alert-icon inside of it.

    0.9 alert static HTML (before)
    
    <div class="alert alert-danger">
        <div class="alert-item">
            <span class="alert-text">
                ...
            </span>
            <div class="alert-actions">
                <div class="alert-action dropdown bottom-right">
                <button class="dropdown-toggle">
                    Actions
                    <clr-icon shape="caret down"></clr-icon>
                </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="...">Shutdown</a>
                        <a class="dropdown-item" href="...">Suspend</a>
                        <a class="dropdown-item" href="...">Reboot</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    0.10.0-alpha alert static HTML (after)
    
    <div class="alert alert-danger">
        <div class="alert-items">
            <div class="alert-item static">
                <div class="alert-icon-wrapper">
                    <clr-icon class="alert-icon" shape="exclamation-circle"></clr-icon>
                </div>
                <span class="alert-text">
                    ...
                </span>
                <div class="alert-actions">
                    <div class="alert-action dropdown bottom-right">
                        <button class="dropdown-toggle">
                            Actions
                            <clr-icon shape="caret down"></clr-icon>
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="...">Shutdown</a>
                            <a class="dropdown-item" href="...">Suspend</a>
                            <a class="dropdown-item" href="...">Reboot</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    The 0.10.0-alpha alert introduces no breaking changes for the Clarity Angular alert component. The use of the .alert-item classname as a component selector is deprecated, however, and will be removed before Clarity releases 1.0. The intent is to replace div.alert-item in the Clarity clr-alert with a clr-alert-item subcomponent. Updating your clr-alerts will avoid a potential future breaking change.

    0.9 alert Angular component (deprecated, but working)
    
    <clr-alert [clrAlertClosable]="false" [clrAlertType]="'alert-danger'">
        <div class="alert-item">
            <span class="alert-text">
                This alert cannot be dismissed.
            </span>
            <div class="alert-actions">
                <clr-dropdown [clrMenuPosition]="'bottom-right'">
                    <button class="dropdown-toggle" clrDropdownToggle>
                        Actions
                        <clr-icon shape="caret down"></clr-icon>
                    </button>
                    <div class="dropdown-menu">
                        <a href="..." class="dropdown-item" clrDropdownItem>Shutdown</a>
                        <a href="..." class="dropdown-item" clrDropdownItem>Delete</a>
                        <a href="..." class="dropdown-item" clrDropdownItem>Reboot</a>
                    </div>
                </clr-dropdown>
            </div>
        </div>
    </clr-alert>
    0.10.0-alpha alert component
    
    <clr-alert [clrAlertClosable]="false" clrAlertType="danger">
        <clr-alert-item>
            <span class="alert-text">
                This alert cannot be dismissed.
            </span>
            <div class="alert-actions">
                <clr-dropdown [clrMenuPosition]="'bottom-right'">
                    <button class="dropdown-toggle" clrDropdownToggle>
                        Actions
                        <clr-icon shape="caret down"></clr-icon>
                    </button>
                    <div class="dropdown-menu">
                        <a href="..." class="dropdown-item" clrDropdownItem>Shutdown</a>
                        <a href="..." class="dropdown-item" clrDropdownItem>Delete</a>
                        <a href="..." class="dropdown-item" clrDropdownItem>Reboot</a>
                    </div>
                </clr-dropdown>
            </div>
        </clr-alert-item>
    </clr-alert>

    Using custom Clarity Icon in alerts

    Because the 0.10 alert now utilizes the Clarity Icons framework, you can use any icon that exists in your application's Clarity Icons library or any custom icon you have added via the ClarityIcons.add() functionality of the Clarity Icons API.

    Clarity alerts now have a [clrAlertIcon] input that accepts a string which represents the name of the icon in the Clarity Icons library. By default, Clarity will give your alert an icon based on the type of alert it is but this default can be easily overridden by assigning an icon name to [clrAlertIcon].

    
    <clr-alert [clrAlertIcon]="'notification'" clrAlertType="info" [clrAlertClosable]="false">
        <clr-alert-item>
            <span class="alert-text">
                This alert will have a bell instead of an "i" inside of a circle.
            </span>
        </clr-alert-item>
    </clr-alert>
  • Deprecated Wizard is officially removed from Clarity.

    For more details on migrating to the new Wizard please refer to the 0.9.0 release notes.

Bug Fixes

  • Renamed the self-executing bundles from XXX.umd.js to XXX.min.js, to make room for future UMD bundles that are not self-executing.