Skip to content

Latest commit

 

History

History
99 lines (73 loc) · 2.23 KB

migration-v5.md

File metadata and controls

99 lines (73 loc) · 2.23 KB
Raw

Migration to v5

Removed support for Ember < v3.24

ember-uikit v5 removed guaranteed support for all versions of Ember below version 3.24 LTS. It may still work, but there are no tests for it.

ember-auto-import v2

This package now uses ember-auto-import v2 which means the host app must use ember-auto-import v2 as well. Check the migration guide for further instructions.

Removed positional params

  • UkIcon now needs an argument @icon
  • UkWidth now needs an argument @width

Renamed all actions to camelcase

All actions consumed by ember-uikit that were previously dasherized now need to be camelized.

Before:

<UkButton @on-click={{this.click}} />

After:

<UkButton @onClick={{this.click}} />

This concerns the following components:

  • UkButton
    • on-click => onClick
  • UkModal
    • on-hide => onHide
    • on-show => onShow
  • UkSortable
    • on-start => onStart
    • on-stop => onStop
    • on-moved => onMoved
    • on-added => onAdded
    • on-removed => onRemoved
  • UkSwitcher
    • on-beforeshow => onBeforeShow
    • on-show => onShow
    • on-shown => onShown
    • on-beforehide => onBeforeHide
    • on-hide => onHide
    • on-hidden => onHidden
  • UkToggleSwitch
    • on-toggle => onToggle

Removed two-way binding for UkToggleSwitch

The UkToggleSwitch component doesn't support two-way binding anymore. Instead, the host app needs to pass an onToggle action to the component.

Before:

<UkToggleSwitch @value={{this.value}} />

After:

<UkToggleSwitch @value={{this.value}} @onToggle={{fn (mut this.value)}} />

Removed link-item yields of UkTab and UkSubnav

Since extending from built-in components is not supported anymore, we removed the yielded link-item components of UkTab and UkSubnav and added the possibility of passing a @href argument.

Before:

<UkTab as |tab|>
  {{#tab.link-item "my-route.subroute" model=1 query=(hash foo="bar")}}
    Link
  {{/tab.link-item}}
</UkTab>

After:

<UkTab as |tab|>
  <tab.item @href="/my-route/subroute/1?foo=bar">Link</tab.item>
</UkTab>