0.10.0-rc.1 Changelog


This build introduces breaking change. Please read below.

Breaking Changes

1 Change

Bugs

1 Bug Fix

Released

August 4, 2017

Sketch template

Light Theme

Highlights

  • Unified API for Dropdown, Tooltip and Signpost

    Dropdown, Tooltip and Signpost now have similar APIs to reduce the amount of learning needed before using them. The patterns and naming conventions are the same for all three. Here's how we recommend using them now:

    
    <clr-dropdown>
        <button clrDropdownTrigger class="btn">Dropdown</button>
        <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
            <a clrDropdownItem href="...">Action 1</a>
            <a clrDropdownItem href="...">Action 2</a>
        </clr-dropdown-menu>
    </clr-dropdown>
    
    <clr-tooltip>
        <clr-icon clrTooltipTrigger shape="info-standard"></clr-icon>
        <clr-tooltip-content *clrIfOpen clrPosition="top-right" clrSize="xs">
            Tooltip
        </clr-tooltip-content>
    </clr-tooltip>
    
    <clr-signpost>
        <!-- Optional custom trigger, the default is the info icon -->
        <button clrSignpostTrigger class="signpost-action btn btn-small btn-link">
            <clr-icon shape="warning"></clr-icon>
        </button>
        <clr-signpost-content *clrIfOpen clrPosition="left-top">
            Signpost
        </clr-signpost-content>
    </clr-signpost>

    All three support the *clrIfOpen structural directive, which we heavily recommend using. In particular, it lets you lazy-load the content of much more easily than before. For specific use cases where you do not want the hidden content to be removed from the DOM (for instance, inline reading of tooltips by screenreaders rather than actionable elements to read the tooltip) you can omit the *clrIfOpen directive, all three components make it optional, and will hide the content with CSS only.

    Breaking change

    This unification introduces two breaking changes:

    • Positioning and sizing options for all three components have been renamed and moved to the "popover" element itself, as opposed to the wrapper. For instance, the previous syntax:
      
      <clr-tooltip clrTooltipDirection="top-right" clrTooltipSize="xs">
          <clr-icon clrTooltipTrigger shape="info-standard"></clr-icon>
          <clr-tooltip-content>
              Tooltip
          </clr-tooltip-content>
      </clr-tooltip>
      needs to be rewritten to:
      
      <clr-tooltip>
          <clr-icon clrTooltipTrigger shape="info-standard"></clr-icon>
          <clr-tooltip-content clrPosition="top-right" clrSize="xs">
              Tooltip
          </clr-tooltip-content>
      </clr-tooltip>
      
      The same applies to Dropdowns and Signposts.
    • The [(clrDropdownMenuOpen)] two-way binding is now handled by the *clrIfOpen structural directive. For instance, to pre-open a dropdown, the old API was:
      
      <clr-dropdown [clrDropdownMenuOpen]="true">
          <button clrDropdownTrigger class="btn">...</button>
          <clr-dropdown-menu>...</clr-dropdown-menu>
      </clr-dropdown>
      To do the same with the new API, simply write:
      
      <clr-dropdown>
          <button clrDropdownTrigger class="btn">...</button>
          <clr-dropdown-menu *clrIfOpen="true">...</clr-dropdown-menu>
      </clr-dropdown>
      Two-way binding on structural directives does not have a shorthand syntax, though, so you will need to write explicitly the <ng-template> rather than use the simple "star" syntactic sugar. So if you used to dynamically control the opening and closing of a dropdown like so:
      
      <clr-dropdown [(clrDropdownMenuOpen)]="open">
          <button clrDropdownTrigger class="btn">...</button>
          <clr-dropdown-menu>...</clr-dropdown-menu>
      </clr-dropdown>
      You will need to change it to this syntax:
      
      <clr-dropdown>
          <button clrDropdownTrigger class="btn">...</button>
          <ng-template [(clrIfOpen)]="open">
              <clr-dropdown-menu>...</clr-dropdown-menu>
          </ng-template>
      </clr-dropdown>
      Note that Tooltip now offers the exact same API to control the show/hide behavior, and that Signpost already supported this from the beginning.
  • Updated to Angular 4.3

    With the 0.10.0 release, Clarity has been updated to Angular 4.3.

Additional Bug Fixes

  • Fixed conflicts between design and development rendering of icons.