Migration Guide

All calcite-app-components will now be shipping as part of calcite-components. There were a few changes that went into some calcite-app-components when moved, so this guide is meant to help existing users move to the latest calcite-components version and avoid any conflicts.

Steps

1. Update your calcite-components dependency and/or scripts to version next or >= 1.0.0-beta.42 (when released).
2. Remove all calcite-app-components dependency and/or scripts.
3. Make any necessary adjustments based on the change section below.

Changes in calcite-components

General

For consistency, styling adjustments were made. Some of these adjustments include:

• alignment
• color
• font sizing
• spacing

calcite-flow

Changes were made to allow it to work with calcite-panel instead of calcite-flow-items (see below for an example).

BREAKING CHANGES:

calcite-flow-item was removed – calcite-panel should be used as a replacement.

calcite-panel

• This component replaces calcite-flow-item (see below for an example). The following methods/props/events/slots were added for this purpose:

  Methods

  • beforeBack()

  Props

  • heading
  • heightScale
  • intlBack
  • intlOpen
  • menuOpen
  • showBackButton
  • summary
  • widthScale

  Events

  • calcitePanelBackClick

  Slots

  • footer-actions
  • header-actions-start
  • header-actions-end
  • header-menu-actions

BREAKING CHANGES:

• header-leading-content slot was renamed to header-actions-start
• header-trailing-content slot was renamed to header-actions-end
• detachedScale was removed in favor of heightScale and width-scale – existing usages of detachedScale need to be renamed to heightScale

calcite-pick-list

BREAKING CHANGES:

textFilterPlaceholder was removed - use filterPlaceholder instead.

calcite-pick-list-group

BREAKING CHANGES:

textGroupTitle was removed - use groupTitle instead.

calcite-pick-list-item

BREAKING CHANGES:

• secondaryAction was renamed to actionsEnd.
• textDescription was removed - use description instead.
• textLabel was removed - use label instead.
• textRemove was removed - use intlRemove instead.

calcite-tip-group

BREAKING CHANGES:

textGroupTitle was removed - use groupTitle instead.

calcite-value-list

BREAKING CHANGES:

textFilterPlaceholder was removed - use filterPlaceholder instead.

calcite-value-list-item

BREAKING CHANGES:

• secondaryAction was renamed to actionsEnd.
• textDescription was removed - use description instead.
• textLabel was removed - use label instead.

Examples

FlowItem and Panel

FlowItem has been replaced by Panel. Panel now has all the capabilities that FlowItem but the slot names have changed. There are few additional options too. Here is a before and after:

Before

<calcite-flow>
  <calcite-flow-item ...>
    <!-- content -->
  </calcite-flow-item>
  <!-- If there is more than one FlowItem, Flow turns on show-back-button in the current FlowItem. -->

  <calcite-flow-item heading="Cool heading" summary="Neat summary">

    <!-- Renders the Action on start side -->
    <calcite-action slot="leading-actions" text="Cool action at start" icon="banana"></calcite-action>

    <!-- Renders the Action on the end side. -->
    <calcite-action slot="menu-actions" text="Cool action at start" icon="banana"></calcite-action>
    
    <!-- If there is more than one Action, they are hidden in an overflow menu.
    <calcite-action slot="menu-actions" text="Additional action 01" icon="banana"></calcite-action>
    <calcite-action slot="menu-actions" text="Additional action 02" icon="banana"></calcite-action>
    -->

    <!-- content -->

    <!-- Renders a footer node and places the buttons inside. -->
    <calcite-button slot="footer-actions">Done<calcite-button>
    <calcite-button slot="footer-actions">Cancel<calcite-button>

  </calcite-flow-item>
</calcite-flow>

After

<flow>
  <calcite-panel ...>
    <!-- content -->
  </calcite-panel>
  <!-- If there is more than one Panel, Flow turns on show-back-button in the current Panel. -->

  <calcite-panel heading="Cool heading" summary="Neat summary">

    <!-- Renders the Action on start side -->
    <calcite-action slot="header-actions-start" text="Cool action at start" icon="banana"></calcite-action>

    <!-- Renders the Action on the end side. -->
    <calcite-action slot="header-actions-end" text="Cool action at start" icon="banana"></calcite-action>
    
    <!-- Additional Actions using this slot are rendered horizontally.
    <calcite-action slot="header-actions-end" text="Additional action 01" icon="banana"></calcite-action>
    <calcite-action slot="header-actions-end" text="Additional action 02" icon="banana"></calcite-action>
    -->

    <!-- Renders the overflow button and puts any Action using this slot into the dropdown. -->
    <calcite-action slot="header-menu-actions" text="Cool menu action 01" icon="banana"></calcite-action>
    <calcite-action slot="header-menu-actions" text="Cool menu action 02" icon="banana"></calcite-action>
    <calcite-action slot="header-menu-actions" text="Cool menu action 03" icon="banana"></calcite-action>

    <!-- content -->

    <!-- Renders a footer node and places the buttons inside. -->
    <calcite-button slot="footer-actions">Done<calcite-button>
    <calcite-button slot="footer-actions">Cancel<calcite-button>

  </calcite-panel>
</flow>

Panel's header-content amd footer slots still work and will override any of the newer slots.