0.11.0-beta.1 Changelog


This build introduces breaking change. Please read below.

Breaking Changes

4 Changes

Bugs

0 Bug Fixes

Released

Dec 21, 2017

Sketch template

Light Theme

Highlights

  • Scoped Clarity Packages

    Clarity has changed to scoped packages starting at v0.11.0. There were several reasons for changing to scoped packages. One important factor in this decision was the need to remove the word `clarity` from file-paths and filenames so that Clarity would not get blocked by Easylist (commonly used in ad blockers).

    All Clarity packages have moved locations in the npm repository.

    All Clarity packages have moved locations in the npm repository.

    • Clarity Angular is located here: @clr/angular
    • Clarity Icons is located here: @clr/icons
    • Clarity UI is located here: @clr/ui
    • Clarity v0.11.0 requires a minimum version of Angular 5

Upgrade Guide

Because Clarity packages have moved on npm, you will need to make changes to the build configuration and relative import paths that will enable your application to consume the scoped Clarity packages. Here, we use a typical Angular Cli (angular-cli generated app or the clarity-seed) application and describe the changes needed to upgrade an application to Clarity v0.11.0. We will assume that the application is set up similar to the clarity-seed application.

(Re) Install Clarity

Clarity packages (angular, icons and ui) are now published under the @clr scope. This means you will need to uninstall the old clarity packages and re-install clarity@0.11.0 from the @clr packages.

Un-install the old Clarity source files:
$ npm uninstall clarity-angular clarity-icons clarity-ui --save
Install the @clr packages
$ npm install @clr/angular @clr/icons @clr/ui --save

Update .angular-cli.json Configuration

If your app is using ClarityIcons and ClarityUI, like clarity-seed, you will need to change the filepaths in the styles and scripts array's.

NOTE: both the filepath and the filename change.

Change the v0.10.x .angular-cli.json

...
"styles": [
    "../node_modules/clarity-icons/clarity-icons.min.css",
    "../node_modules/clarity-ui/clarity-ui.min.css",
    ...
  ],
  "scripts": [
    ...
    "../node_modules/clarity-icons/clarity-icons.min.js"
  ],
...
into the v0.11.x .angular-cli.json

...
"styles": [
                "../node_modules/@clr/icons/clr-icons.min.css",
                "../node_modules/@clr/ui/clr-ui.min.css",
                "styles.css"
            ],
            "scripts": [
                ...
                "../node_modules/@clr/icons/clr-icons.min.js",
                ...
            ],
...

Update Import Statements

Clarity is now following the Angular Package Format in order to support consumption in a variety of ways that use common build and bundling tools in use today. This means Clarity applications upgrading to v0.11.0 will need to update the non-relative module paths in their application sources.

Change the v0.10.x import statement.

import { ClrComponent } from "clarity-angular";
into the v0.11.x import statement.

import { ClrComponent } from "@clr/angular";

Once the .angular-cli.json and import statements are updated, your application should build and run just as it did before. If you have any questions or issues upgrading please reach out on StackOverflow with the tag vmware-clarity or on twitter @VMwareClarity.