AUI 8 upgrade guides

Upgrading from 8.x to 8.2

This release is all about improving how layered elements work. Most of our layered elements — Dialog, Dropdown, Inline dialog, Feature discovery dialogs Select 2, and Single select — have been adjusted to improve where they render on the page and how they stack.

While there are no public API changes to these components, some of their implementation details have changed and may need your attention when upgrading to this version.

AUI layering behaviour

The previous layering and alignment behaviours were provided by Tether.js. We have replaced this library with Popper.js.

Our layers were previously positioned synchronously upon the layered element being shown. With this update, layers are now positioned asynchronously in a requestAnimationFrame callback.

Our layered elements would previously receive CSS classes starting with aui-alignment-element-attached- and aui-alignment-target-attached-. These CSS classes were an implementation detail of Tether, and are no longer added.
CSS classes starting with aui-alignment-side- and aui-alignment-snap- are still available.

Upgrading from 7.9.x to 8.0

The AUI 8.0 release aims to achieve a few key things:

  • Make it easier to consume only the pieces of AUI that you need.
  • Re-evaluate what you get "by default" when importing AUI.
  • Remove dead and deprecated code.
  • Upgrade external library dependencies.

The release includes major backwards-incompatible changes to AUI.

All distributions of AUI are affected by this release. Some distributions have changed shape, others have been removed or rebuilt from the ground up.

Major changes

The "core" and "experimental" concepts were removed from AUI. These concepts referred to API stability and component maturity, but were enshrined in many parts of AUI — from its documentation through to its distribution bundle filenames.
Splitting AUI in this way often left consumers with little choice but to include all of AUI's bundles in their production application, since they could not specify what it was they actually needed.

AUI packaging

AUI 8.0 changes how the library is composed and distributed.

  • The library will be de-composed in to multiple Node packages over time.
  • Long-deprecated components will be delivered as separate Node packages and unbundled from the main AUI package.
  • The "experimental" concept is gone from AUI. Instead, components under test will be delivered as separate Node packages.
  • The "core" concept is gone from AUI. Instead, the various bundles of AUI — both in Node and in the Atlassian Plugin — will include fewer components by default.

AUI dependencies

Explicit dependencies on the pieces of AUI that are actually needed is encouraged over inheriting components or behaviours as a side-effect.

jQuery and jQuery UI
New minimum versions
  • The minimum required version of jQuery is now 2.x, up from 1.7.2.
  • The version of jQuery UI that AUI uses has been bumped to 1.12.1.

If you are upgrading from jQuery 1.7.x or 1.8.x, you will need to be aware of the changes and removals that jQuery made in 1.9.x and beyond. See the jQuery 1.9 upgrade guide for more details.

Several features of jQuery were removed and externalised in the jQuery migrate plugin. Some of these features have been "fixed" or otherwise had their behaviours changed after being externalised in jQuery migrate, such as jQuery.browser.
You will need to need to audit your usage of jQuery APIs that were removed before jQuery 2.x, pulling in jQuery migrate if necessary, and ensure that your code works with the new behaviours.

API status

AUI considers jQuery and jQuery UI to be a deprecated implementation detail of its components and are not considered part of AUI's public API.

jQuery UI is a combination of several behavioural utilities, interface components, and effects. Though useful, it is a painful set of code to pull in and depend upon, since it fundamentally relies upon mutating a shared global object and encourages implicit dependencies that are hard to trace.

In AUI 8.0, all of jQuery UI's interface components have been removed from AUI. Developers depending upon jQuery UI interface components should either use the equivalent AUI component, or import the specific jQuery UI components they need within their own application's dependency graph.

In AUI 8.0, several parts of jQuery UI may still be added to the window.jQuery object, though this is considered an unintentional side-effect. Future versions of AUI may remove all usage of jQuery UI.

Backbone and Underscore
New minimum versions
  • Backbone has been bumped to 1.3.3, up from 1.1.2.
  • Underscore has been bumped to 1.9.1, up from 1.6.0.

Refer to the Backbone changelog for a list of behavioural and API changes in Backbone.

Refer to the Underscore changelog for a list of behavioural and API changes in Underscore.

API status

AUI considers Backbone and Underscore to be a deprecated implementation detail of its components and are not considered part of AUI's public API.

Backbone and Underscore are not added to window by AUI any more by default. If you depend on these libraries, you must pull in your own.

In Atlassian plugins, it is possible to add them to the window by explicitly requiring their web-resource keys, though this approach is deprecated and will be removed in AUI 9.0.

AUI components removed

Three of AUI's oldest components — Dialog 1, Dropdown 1, and Inline Dialog 1 — are no longer bundled with AUI from AUI 8 onwards. Each of these components has a more modern equivalent, which is where performance, accessibility, and usability improvement efforts are made.

There are upgrade guides for each component to migrate from the old component APIs to the new ones:

For Node package consumers, these removed components will be made available through their own Node packages, independent of AUI.

For Atlassian plugin consumers, the components are still available through deprecated web-resource keys. These keys will be removed in AUI 9.0, at which time it will be the responsibility of consumers to have either migrated their usage of these components to their modern equivalents, or added the components to their products via the Node packages.

AUI library changes

JS changes

Change Alternative
AJS() has been removed.

Use jQuery or native browser APIs to create DOM elements. For example:

  • Change AJS("div") to document.createElement("div"), or jQuery("<div></div>"), or any other templating solution.
window.AJS is now an object, not a function.

AJS can't be used as a proxy for the document object, for example when triggering or listening to events.

In previous versions of AUI:

  • $(AJS).bind and $(document).bind were equivalent.
  • $(AJS).trigger and $(document).trigger were equivalent.

In AUI 8, passing AJS in to jQuery creates an isolated event bus, whose events will not propagate to the DOM.

Review your usage of $(AJS).bind and $(AJS).trigger.

AJS.toInit(<Function>) will always run the function asynchronously.

The order in which your initialisation functions will run may change, which may invalidate implicit assumptions in your code.

Review your usage of all patterns of handling "document ready". Pick one code pattern.

If you need to ensure your initialisations occur in a specific order, we recommend sharing a reference to a Promise object between the initialisation modules and executing when it is resolved.

The following functions have been removed from AUI's browser module:
  • supportsRequestAnimationFrame
  • supportsCssTransition
  • supportsCalc
  • supportsNewMouseEvent
AUI 8's supported browsers (IE 11 and higher) support these behaviours natively, so feature detection should not be necessary.
The following jQuery plugins have been removed from AUI:
  • $.os
  • $.fn.autocomplete
  • $.fn.isDirty
  • $.fn.progressBar
  • $.fn.selection
  • $.fn.selectionRange
  • $.fn.wrapSelection
Projects that depend on these jQuery plugins should bundle them independently.
AJS.bindEvt, AJS.triggerEvt, and AJS.triggerEvtForInst have been removed. No alternative will be provided.
AJS.contains has been removed. No alternative will be provided. Use Array.prototype.indexOf instead. If your project does not support IE11, you can use Array.prototype.includes instead.
AJS.firebug and AJS.warnAboutFirebug have been removed. No alternative will be provided.
AJS.filterBySearch has been removed. No alternative will be provided. If products require this function, this should be copied.
AJS.include has been removed Use a proper module loader instead.
AJS.indexOf has been removed. No alternative will be provided. Use Array.prototype.indexOf instead.
AJS.isVisible has been removed. No alternative will be provided.
AJS.message.template has been removed. No alternative will be provided.
AJS.onTextResize and AJS.unbindTextResize have been removed No alternative will be provided.
AJS.preventDefault and AJS.stopEvent have been removed. No alternative will be provided.
AJS.setCurrent and AJS.setVisible have been removed. No alternative will be provided. Use jQuery.addClass() / removeClass() instead.
AJS.toggleClassName has been removed Use another approach to adding/removing a class — for example, jQuery.

CSS changes

Un-prefixed AUI message classes have been removed
Removed class Alternative
.success .aui-message-success
.hint .aui-message-hint
.warning .aui-message-warning
.info .aui-message-info
.error .aui-message-error
Old "messages" icons CSS classes have been removed
  • .aui-icon-success
  • .aui-icon-warning
  • .aui-icon-info
  • .aui-icon-error
  • .aui-icon-hint
  • .aui-icon-generic
  • .icon-generic
  • .icon-error
  • .icon-hint
  • .icon-info
  • .icon-success
  • .icon-warning

Use iconfont icons as a replacement

Old "gadget" icons CSS classes have been removed
  • .icon-dropdown
  • .icon-dropdown-active
  • .icon-dropdown-active-d
  • .icon-maximize
  • .icon-maximize-d
  • .icon-minimize
  • .icon-minimize-d
  • .icon-move
  • .icon-move-d

Use iconfont icons as a replacement.

Icon Wait removed

We removed .aui-icon-wait class and icon. You should replace it with spinner.

Vertical alignment for icons changed

In AUI 8.0, we removed vertical-align: text-top from .aui-icon-small and .aui-icon-large. The alignment of some icons is wrong when text-top is used. Icons will be now using vertical-align: text-bottom which seems a more sensible default than text-top.

Check if your icons are aligned properly and remove possible unnecessary overrides.

Component changes

Restful table AJAX behaviours

Prior to AUI 8.0, when calling EntryModel#destroy, the AJAX request would use URL parameters to pass data to the server.

In AUI 8.0, the AJAX request now passes data in the request body. This makes the behaviour compatible with jQuery 2.x and jQuery 3.x.

Consumers are advised that any URL handling or logging on the server-side that expects to see parameters in the URL will no longer work, and will need to be updated to consume the request body instead.

Restful table delete confirmation

The docs were outdated and described deleteConfirmation option as boolean but the code was actually expecting callback function returning html which would be put inside Dialog1.

We removed dependency on Dialog1 and replaced deleteConfirmation option with deleteConfirmationCallback. Now we require you to provide a function returning promise. If promise is resolved row will be deleted, if rejected deletion will be prevented.

Old API New API
Tooltips

If you are upgrading past jQuery 1.9, your tooltips usage will require updating if they make use of Tipsy's live option. This is due to the internals of jQuery changing.

Old API New API
Dropdown2 Triggers

If you are using soy templates to render the Dropdown2 trigger, there is a chance you might have an extra icon in HTML that will render additional spacing.

Old usage New usage

How to handle the upgrade

Node distribution migration

As mentioned in the packaging section, a number of changes were made to how AUI is distributed. These affect the Node distribution in a significant way.

In AUI 8.0, the Node package has been completely emptied of content. The resulting package is very small, but does not cover every use-case or usage scenario that the previous package may have covered incidentally.

The AUI team are collecting information about what the Node distribution should support in the AUI-4829 ticket. In future releases of AUI, the team will release other pre-built bundles, then will explore making custom builds of AUI possible.

Bundle changes
Removed bundle file Alternative bundle file Recommended upgrade option

The "core" AUI components

  • dist/aui/css/aui.css
  • dist/aui/js/aui.js
  • dist/aui/aui-prototyping.css
  • dist/aui/aui-prototyping.js

Note: The "prototyping" bundle of AUI is not intended to be used in production systems.

Add a comment to AUI-4829 noting the components and patterns you use. This will inform future efforts to build better bundles that contain only what you need.

The "experimental" AUI components

  • dist/css/aui.css
  • dist/css/aui-experimental.css
  • dist/js/aui.js
  • dist/js/aui-experimental.js
  • dist/aui-prototyping.css
  • dist/aui-prototyping.js

Note: The "prototyping" bundle of AUI is not intended to be used in production systems.

Add a comment to AUI-4829 noting the components and patterns you use. This will inform future efforts to build better bundles that contain only what you need.

Atlassian plugin migration

Your product will need to:

What Why
1 Bundle atlassian-plugins-webresource-plugin version 3.6.0 or higher in your project. To make WRM.require and other WRM functions work.
2 Add the following web-resource dependencies to your product superbatch or sync-batch:
  • com.atlassian.plugins.atlassian-plugins-webresource-plugin:format
To make translations work.

A great many web-resource keys were removed from AUI, as the code they wrapped is no longer part of the library itself. Some web-resource key names were changed for internal consistency.

When upgrading, check the logs of your application as AUI is started. The WRM will list a number of deprecated web-resource keys and their alternatives.

web-resource changes
Changed web-resource Notes
com.atlassian.auiplugin:ajs

AUI's primary web-resource has been re-created and ships far less code.

The following web-resources are no longer provided through this web-resource and must be depended upon explicitly:

  • com.atlassian.auiplugin:aui-dropdown2
  • com.atlassian.auiplugin:aui-header
  • com.atlassian.auiplugin:aui-keyboard-shortcuts
  • com.atlassian.auiplugin:aui-message
  • com.atlassian.auiplugin:aui-navigation
  • com.atlassian.auiplugin:aui-page-header
  • com.atlassian.auiplugin:aui-table
  • com.atlassian.auiplugin:aui-tabs
  • com.atlassian.auiplugin:cookie
  • com.atlassian.auiplugin:dialog
  • com.atlassian.auiplugin:fancy-file-input
  • com.atlassian.auiplugin:inline-dialog
  • com.atlassian.auiplugin:template
  • com.atlassian.auiplugin:toolbar
  • com.atlassian.auiplugin:jquery-ui-data
  • com.atlassian.auiplugin:jquery-ui-draggable
  • com.atlassian.auiplugin:jquery-ui-focusable
  • com.atlassian.auiplugin:jquery-ui-keycode
  • com.atlassian.auiplugin:jquery-ui-plugin
  • com.atlassian.auiplugin:jquery-ui-scroll-parent
  • com.atlassian.auiplugin:jquery-ui-sortable
  • com.atlassian.auiplugin:jquery-ui-widget
  • com.atlassian.auiplugin:jquery-ui-unique-id

The following web-resources are still provided through this web-resource, but they should be depended upon explicitly:

  • com.atlassian.auiplugin:aui-reset
  • com.atlassian.auiplugin:aui-page-typography
  • com.atlassian.auiplugin:aui-page-layout
  • com.atlassian.auiplugin:aui-link
  • com.atlassian.auiplugin:aui-group
  • com.atlassian.auiplugin:aui-core
  • com.atlassian.auiplugin:aui-icon
  • com.atlassian.auiplugin:aui-iconography
  • com.atlassian.auiplugin:aui-avatar
  • com.atlassian.auiplugin:aui-event-bus
  • com.atlassian.auiplugin:aui-forms
  • com.atlassian.auiplugin:aui-toolbar2
com.atlassian.auiplugin:aui-core

AUI's "core" has been reduced in size and scope. In particular, it has been stripped of several deprecated utility functions.

See the JS changes section for more details.

com.atlassian.auiplugin:icons

AUI's icon pattern has been split from the iconography definitions. If you only want the icon markup pattern, you can include just "aui-icon".

  • com.atlassian.auiplugin:aui-icon
  • com.atlassian.auiplugin:aui-iconography
Removed web-resources

What follows is a list of web-resource keys that are either completely removed from AUI, or will have no alternative going forward.

Removed web-resource Alternative web-resource(s) Notes
com.atlassian.auiplugin:ajs-html5shim -

This polyfill was no longer needed.

com.atlassian.auiplugin:ajs-zepto - Import Zepto through your own project, or depend upon jQuery.
com.atlassian.auiplugin:aui-css -

Add dependencies on the specific components and patterns that are needed to render your UI.

com.atlassian.auiplugin:aui-experimental-autocomplete-helpers -

com.atlassian.auiplugin:aui-experimental-example -

The "experimental" concept has been removed.

Also, what was this an "example" of, exactly? Nobody knows!

com.atlassian.auiplugin:aui-experimental-header-rotp com.atlassian.auiplugin:aui-header

The "experimental" concept has been removed.

com.atlassian.auiplugin:aui-experimental-mobile
  • com.atlassian.plugins.jquery:jquery
  • com.atlassian.auiplugin:ajs-underscorejs
  • com.atlassian.auiplugin:ajs-backbone
  • com.atlassian.auiplugin:aui-reset
  • com.atlassian.auiplugin:aui-page-typography
  • com.atlassian.auiplugin:aui-page-layout
  • com.atlassian.auiplugin:aui-avatar
  • com.atlassian.auiplugin:aui-header-unresponsive
  • com.atlassian.auiplugin:aui-navigation
  • com.atlassian.auiplugin:aui-page-header
  • com.atlassian.auiplugin:aui-button
  • com.atlassian.auiplugin:aui-icon
  • com.atlassian.auiplugin:aui-iconography
  • com.atlassian.auiplugin:aui-forms
  • com.atlassian.auiplugin:aui-lozenge
  • com.atlassian.auiplugin:aui-message
  • com.atlassian.auiplugin:aui-table
Compose the explicit set of web-resource keys you need.
com.atlassian.auiplugin:aui-experimental-page
  • com.atlassian.auiplugin:aui-reset
  • com.atlassian.auiplugin:aui-page-typography
  • com.atlassian.auiplugin:aui-page-layout
  • com.atlassian.auiplugin:aui-header
  • com.atlassian.auiplugin:aui-page-header
  • com.atlassian.auiplugin:aui-module
  • com.atlassian.auiplugin:aui-navigation
  • com.atlassian.auiplugin:aui-avatar
  • com.atlassian.auiplugin:aui-badge
  • com.atlassian.auiplugin:aui-spinner
Compose the explicit set of web-resource keys you need.
com.atlassian.auiplugin:aui-experimental-module -

The "experimental" concept has been removed.

com.atlassian.auiplugin:aui-experimental-module-and-header-legacy1 -

The "experimental" concept has been removed.

Code marked as "deprecated" and "legacy" should not exist forever.

com.atlassian.auiplugin:aui-experimental-page-layout-legacy1 -

The "experimental" concept has been removed.

Code marked as "deprecated" and "legacy" should not exist forever.

com.atlassian.auiplugin:aui-experimental-page-layout-typography -

The "experimental" concept has been removed.

com.atlassian.auiplugin:aui-experimental-page-layout-typography-legacy1 -

The "experimental" concept has been removed.

Code marked as "deprecated" and "legacy" should not exist forever.

com.atlassian.auiplugin:aui-experimental-progress-buttons com.atlassian.auiplugin:aui-button

The "experimental" concept has been removed.

This particular web-resource existed to put a spinner in the button, which is part of the button's core behaviour.

com.atlassian.auiplugin:aui-experimental-soy-templates-legacy1 com.atlassian.auiplugin:soy

The "experimental" concept has been removed.

Code marked as "deprecated" and "legacy" should not exist forever.

Also, how many soy resources that do exactly the same thing do you really need?

com.atlassian.auiplugin:aui-mobile-suite
  • com.atlassian.auiplugin:aui-reset
  • com.atlassian.auiplugin:aui-page-typography
  • com.atlassian.auiplugin:aui-page-layout
  • com.atlassian.auiplugin:aui-avatar
  • com.atlassian.auiplugin:aui-header-unresponsive
  • com.atlassian.auiplugin:aui-navigation
  • com.atlassian.auiplugin:aui-page-header
Compose the explicit set of web-resource keys you need.
com.atlassian.auiplugin:aui-tipsy -

Tipsy was an implementation detail that will change. Use AUI's tooltip component directly.

com.atlassian.auiplugin:binders -

This behaviour existed only to provide unneeded browser polyfills, so was no longer needed itself.

com.atlassian.auiplugin:deprecated-legacy-images -

Code marked as "deprecated" and "legacy" should not exist forever.

com.atlassian.auiplugin:hotkeys -

This plugin is an internal implementation detail of AUI's keyboard shortcuts behaviour.

com.atlassian.auiplugin:internal-aui-animation -

com.atlassian.auiplugin:internal-aui-browser -

com.atlassian.auiplugin:internal-aui-is-input -

com.atlassian.auiplugin:internal-aui-widget -

com.atlassian.auiplugin:internal-inline-dialog-common -

com.atlassian.auiplugin:jquery-autocomplete-deprecated -

Add the jQuery autocomplete plugin to your project. Look, even the key of this one told you not to use it.

com.atlassian.auiplugin:jquery-ui-widgets -

Developers depending upon jQuery UI interface components should either use the equivalent AUI component, or import the specific jQuery UI components they need within their own project.

com.atlassian.auiplugin:jquery-effects - -
com.atlassian.auiplugin:jquery-all com.atlassian.plugins.jquery:jquery AUI does not provide jQuery itself. AUI depends upon jQuery through a jQuery Atlassian plugin which a host product must provide.
com.atlassian.auiplugin:jquery-aop - Add the jQuery.aop plugin to your project.
com.atlassian.auiplugin:jquery-progressbar -

Add the jQuery progressbar plugin to your project.

com.atlassian.auiplugin:jquery-selection -

Add the jQuery selection plugin to your project.

com.atlassian.auiplugin:jquery-throbber -

Add the jQuery throbber plugin to your project.

com.atlassian.auiplugin:placeholder -

This browser polyfill is no longer required.

Deprecated web-resources

The following list of web-resources are deprecated with reasonable alternatives.

In general, "bundle" web-resources are deprecated in favour of individual web-resource keys. Importing multiple smaller dependencies helps keep page weight low and helps make your app code dependencies easier to reason about.

Deprecated web-resource Alternative web-resource(s) Notes
com.atlassian.auiplugin:aui-page-suite

This web-resource was bundling several others. Depend upon the web-resources you need directly:

  • com.atlassian.auiplugin:aui-reset
  • com.atlassian.auiplugin:aui-page-typography
  • com.atlassian.auiplugin:aui-page-layout
  • com.atlassian.auiplugin:aui-avatar
  • com.atlassian.auiplugin:aui-header
  • com.atlassian.auiplugin:aui-navigation
  • com.atlassian.auiplugin:aui-page-header
com.atlassian.auiplugin:jquery-form -

You should include the jQuery form plugin in your own project code.

com.atlassian.auiplugin:jquery-spin com.atlassian.auiplugin:aui-spinner

Using <aui-spinner/> through jQuery is deprecated. Create a spinner element directly.

com.atlassian.auiplugin:jquery-ui

This web-resource was bundling several others. Depend upon the web-resources you need directly:

  • com.atlassian.auiplugin:jquery-ui-data
  • com.atlassian.auiplugin:jquery-ui-draggable
  • com.atlassian.auiplugin:jquery-ui-droppable
  • com.atlassian.auiplugin:jquery-ui-focusable
  • com.atlassian.auiplugin:jquery-ui-keycode
  • com.atlassian.auiplugin:jquery-ui-mouse
  • com.atlassian.auiplugin:jquery-ui-plugin
  • com.atlassian.auiplugin:jquery-ui-position
  • com.atlassian.auiplugin:jquery-ui-resizable
  • com.atlassian.auiplugin:jquery-ui-scroll-parent
  • com.atlassian.auiplugin:jquery-ui-selectable
  • com.atlassian.auiplugin:jquery-ui-sortable
  • com.atlassian.auiplugin:jquery-ui-tabbable
  • com.atlassian.auiplugin:jquery-ui-widget
  • com.atlassian.auiplugin:jquery-ui-unique-id

jQuery UI is a combination of several behavioural utilities, interface components, and effects. This web-resource has a significant impact on page weight, since the whole of jQuery UI is quite large.

com.atlassian.auiplugin:internal-jquery-ui-partial

This web-resource was bundling several others. Depend upon the web-resources you need directly:

  • com.atlassian.auiplugin:jquery-ui-data
  • com.atlassian.auiplugin:jquery-ui-draggable
  • com.atlassian.auiplugin:jquery-ui-focusable
  • com.atlassian.auiplugin:jquery-ui-keycode
  • com.atlassian.auiplugin:jquery-ui-plugin
  • com.atlassian.auiplugin:jquery-ui-scroll-parent
  • com.atlassian.auiplugin:jquery-ui-sortable
  • com.atlassian.auiplugin:jquery-ui-widget
  • com.atlassian.auiplugin:jquery-ui-unique-id
com.atlassian.auiplugin:jquery-ui-interactions

This web-resource was bundling several others. Depend upon the web-resources you need directly:

  • com.atlassian.auiplugin:jquery-ui-droppable
  • com.atlassian.auiplugin:jquery-ui-resizable
  • com.atlassian.auiplugin:jquery-ui-selectable
com.atlassian.auiplugin:jquery-ui-other

This web-resource was bundling several others. Depend upon the web-resources you need directly:

  • com.atlassian.auiplugin:jquery-ui-data
  • com.atlassian.auiplugin:jquery-ui-draggable
  • com.atlassian.auiplugin:jquery-ui-focusable
  • com.atlassian.auiplugin:jquery-ui-keycode
  • com.atlassian.auiplugin:jquery-ui-plugin
  • com.atlassian.auiplugin:jquery-ui-position
  • com.atlassian.auiplugin:jquery-ui-scroll-parent
  • com.atlassian.auiplugin:jquery-ui-sortable
  • com.atlassian.auiplugin:jquery-ui-widget
  • com.atlassian.auiplugin:jquery-ui-unique-id
com.atlassian.auiplugin:ajs-gadgets

This web-resource was bundling several others. Depend upon the web-resources you need directly:

  • com.atlassian.auiplugin:aui-core
  • com.atlassian.auiplugin:aui-icon
  • com.atlassian.auiplugin:aui-iconography
  • com.atlassian.auiplugin:aui-table
com.atlassian.auiplugin:ajs-gadgets-base

This web-resource was bundling several others. Depend upon the web-resources you need directly:

  • com.atlassian.auiplugin:aui-core
  • com.atlassian.auiplugin:aui-icon
  • com.atlassian.auiplugin:aui-iconography
  • com.atlassian.auiplugin:aui-table

This web-resource was bundling resources from com.atlassian.auiplugin:ajs-gadgets-base and adding them in to the ajs.gadgets context. Authors of gadgets will want to manually re-add the necessary web-resource keys to their own gadgets.

com.atlassian.auiplugin:aui-experimental-iconfont

com.atlassian.auiplugin:aui-experimental-devtools-iconfont

com.atlassian.auiplugin:aui-iconography

The "experimental" concept has been removed.

The fact that icons are delivered through an iconfont is an implementation detail, thus did not make sense to enshrine in the key.

com.atlassian.auiplugin:aui-experimental-soy-templates com.atlassian.auiplugin:soy The "experimental" concept has been removed.
com.atlassian.auiplugin:aui-experimental-soy-templates-2 com.atlassian.auiplugin:soy

The "experimental" concept has been removed.

Also, we already *had* a web-resource key for these. I guess we just liked the number 2?

com.atlassian.auiplugin:aui-experimental-avatars com.atlassian.auiplugin:aui-avatar

The "experimental" concept has been removed.

com.atlassian.auiplugin:aui-experimental-badge com.atlassian.auiplugin:aui-badge

The "experimental" concept has been removed.

com.atlassian.auiplugin:aui-experimental-buttons com.atlassian.auiplugin:aui-button

The "experimental" concept has been removed.

com.atlassian.auiplugin:aui-experimental-data-handlers com.atlassian.auiplugin:aui-progressive-data-set

The "experimental" concept has been removed.

com.atlassian.auiplugin:aui-experimental-date-picker com.atlassian.auiplugin:aui-date-picker

The "experimental" concept has been removed.

com.atlassian.auiplugin:aui-experimental-dropdown2 com.atlassian.auiplugin:aui-dropdown2

The "experimental" concept has been removed.

com.atlassian.auiplugin:aui-experimental-expander com.atlassian.auiplugin:aui-expander

The "experimental" concept has been removed.

com.atlassian.auiplugin:aui-experimental-header com.atlassian.auiplugin:aui-header

The "experimental" concept has been removed.

com.atlassian.auiplugin:aui-experimental-labels com.atlassian.auiplugin:aui-labels

The "experimental" concept has been removed.

com.atlassian.auiplugin:aui-experimental-lozenge com.atlassian.auiplugin:aui-lozenge

The "experimental" concept has been removed.

com.atlassian.auiplugin:aui-experimental-navigation com.atlassian.auiplugin:aui-navigation

The "experimental" concept has been removed.

com.atlassian.auiplugin:aui-experimental-page-header com.atlassian.auiplugin:aui-page-header

The "experimental" concept has been removed.

com.atlassian.auiplugin:aui-experimental-page-layout com.atlassian.auiplugin:aui-page-layout

The "experimental" concept has been removed.

com.atlassian.auiplugin:aui-experimental-progress-indicator com.atlassian.auiplugin:aui-progress-indicator

The "experimental" concept has been removed.

com.atlassian.auiplugin:aui-experimental-progress-tracker com.atlassian.auiplugin:aui-progress-tracker

The "experimental" concept has been removed.

com.atlassian.auiplugin:aui-experimental-reset com.atlassian.auiplugin:aui-reset

The "experimental" concept has been removed.

com.atlassian.auiplugin:aui-experimental-restfultable com.atlassian.auiplugin:aui-restfultable

The "experimental" concept has been removed.

com.atlassian.auiplugin:aui-experimental-spinner

com.atlassian.auiplugin:aui-spinner

Also include com.atlassian.auiplugin:jquery-spin if you need the jQuery(...).spin() and jQuery(...).spinStop() functions.

The "experimental" concept has been removed.

The preferred method of creating spinners is with the web component.

com.atlassian.auiplugin:aui-experimental-table-sortable com.atlassian.auiplugin:aui-table-sortable

The "experimental" concept has been removed.

com.atlassian.auiplugin:aui-experimental-toolbar2 com.atlassian.auiplugin:aui-toolbar2

The "experimental" concept has been removed.

com.atlassian.auiplugin:aui-experimental-tooltips com.atlassian.auiplugin:aui-tooltip

The "experimental" concept has been removed.

Common runtime errors

Symptom What to do
$.widget is undefined

In the Node package:

  • Add a dependency on jquery-ui to your project.
  • Import it after jquery.

In the Atlassian plugin:

  • Add a web-resource dependency on jquery-ui-widget.

$(...).after is not a function

$(...).before is not a function

$(...).around is not a function

Add the jQuery.aop plugin to your project.

$(...).ajaxForm is not a function

$(...).ajaxSubmit is not a function

Add the jQuery form plugin to your project.

In the Atlassian plugin:

  • Add a web-resource dependency on com.atlassian.auiplugin:jquery-form.
$(...).draggable is not a function

Add a dependency on jquery-ui/ui/widgets/draggable.

In the Atlassian plugin:

  • Add a web-resource dependency on com.atlassian.auiplugin:jquery-ui-draggable.
$(...).droppable is not a function

Add a dependency on jquery-ui/ui/widgets/droppable.

In the Atlassian plugin:

  • Add a web-resource dependency on com.atlassian.auiplugin:jquery-ui-droppable.
$(...).mouse is not a function

Add a dependency on jquery-ui/ui/widgets/mouse.

In the Atlassian plugin:

  • Add a web-resource dependency on com.atlassian.auiplugin:jquery-ui-mouse.
$(...).position is not a function

Add a dependency on jquery-ui/ui/position.

In the Atlassian plugin:

  • Add a web-resource dependency on com.atlassian.auiplugin:jquery-ui-position.
$(...).resizable is not a function

Add a dependency on jquery-ui/ui/widgets/resizable and jquery-ui/themes/base/resizable.css.

In the Atlassian plugin:

  • Add a web-resource dependency on com.atlassian.auiplugin:jquery-ui-resizable.
$(...).selectable is not a function

Add a dependency on jquery-ui/ui/widgets/selectable and jquery-ui/themes/base/selectable.css.

In the Atlassian plugin:

  • Add a web-resource dependency on com.atlassian.auiplugin:jquery-ui-selectable.
$(...).sortable is not a function

Add a dependency on jquery-ui/ui/widgets/sortable and jquery-ui/themes/base/sortable.css.

In the Atlassian plugin:

  • Add a web-resource dependency on com.atlassian.auiplugin:jquery-ui-sortable.

$(...).spin is not a function

$(...).spinStop is not a function

The jQuery spin behaviour was split in to its own module, separate to the AUI spinner component.

You should replace usage of these jQuery functions with spinner.

In the Atlassian plugin:

  • Add a web-resource dependency on com.atlassian.auiplugin:jquery-spin.

$.dropDown is not a function

Dropdown 1 was removed from AUI 8.

Consult the removed components section for more details.

AJS.Dialog is not a function

Dialog 1 was removed from AUI 8.

Consult the removed components section for more details.

AJS.InlineDialog is not a function

Inline Dialog 1 was removed from AUI 8.

Consult the removed components section for more details.

AJS.template is undefined

Cannot read property "fill" of undefined

You need to explicitly import this function now.

In the Node package:

  • Add a dependency on @atlassian/aui-template to your package.json file.
  • This package uses the UMD pattern for its export. When treating it as a module, use its default export. If no module system is available, it exports to window.ajstemplate.

In the Atlassian plugin:

  • Add a web-resource dependency on com.atlassian.auiplugin:template

window.Backbone is undefined

Cannot read property "extend" of undefined

Cannot read property "Model" of undefined

Import your own version of Backbone.

In the Atlassian plugin for AUI 8, you can still import com.atlassian.auiplugin:ajs-backbone to create the global variable, but this will be removed in a future version.

window._ is undefined

Cannot read property "filter" of undefined

Cannot read property "map" of undefined

Cannot read property "extend" of undefined

Import your own version of Underscore.

In the Atlassian plugin for AUI 8, you can still import com.atlassian.auiplugin:ajs-underscorejs to create the global variable, but this will be removed in a future version.

whenIType is undefined

You need to explicitly import the keyboard shortcuts web-resource dependency:

com.atlassian.auiplugin:aui-keyboard-shortcuts

The blue bar for the top menu is gone!

The application header looks weird!

You need to explicitly import the AUI application header component now.

In the Atlassian plugin:

  • Add a web-resource dependency on com.atlassian.auiplugin:aui-header, or
  • Add a web-resource dependency on com.atlassian.auiplugin:aui-header-unresponsive if you do not want the dynamic menu item behaviour (where items collapse in to the "More" link when there is insufficient horizontal space for them all).
Restful tables don't render any more!

You need to explicitly import them now.

In the Atlassian plugin:

  • Add a web-resource dependency on com.atlassian.auiplugin:aui-restfultable