Atlassian User Interface upgrade

Despite this change, the icons are displaying correctly, so just make sure everything looks right. If you're overriding AUI's vertical-align, remove these overrides and use the default text-bottom.

1. Use <aui-spinner></aui-spinner> instead.

2. Add this dependency to atlassian-plugin.xml under the appropriate web resource:

   <dependency>com.atlassian.auiplugin:aui-spinner</dependency>

1. Import the following AMD module instead: require('underscore')


2. Add this dependency to atlassian-plugin.xml under the appropriate web resource:
   • <dependency>jira.webresources:underscore-1.8.3</dependency>

1. Check for the usage of “Backbone” in *.js files.

2. Import the following AMD module: require('backbone')

3. Add one of these dependencies to atlassian-plugin.xml under the appropriate web resource.

   • (preferred) <dependency>jira.webresources:backbone-1.3.3</dependency>

   • <dependency>jira.webresources:ajs-backbone-amd-shim</dependency>

1. Find any occurrences of AUI headers in your add-ons.

   • In soy: call aui.page.header

   • In css: class aui-header

   • In html: nav.aui-header

2. Add the following dependencies, as needed:

   • com.atlassian.auiadd-on:aui-header (old one: aui-header-async)

   • com.atlassian.auiadd-on:aui-header-unresponsive (static header)

Basic jQuery UI

Jira still provides basic jQuery UI via AUI. If that's enough for you, you can use it by adding the following dependency:

<dependency>jira.webresources:jquery-ui</dependency>

More features

If you need more features of the jQuery UI in your add-on, find the following web-resource keys, and add the relevant dependencies.

There are two ways in which you can fix this:

• Use aui-inline-dialog2 instead.
  
  
• Add this dependency to make your current code work: com.atlassian.auiplugin:inline-dialog.

There are two ways in which you can fix this:

• Use aui-dialog2 instead.

• Add this dependency to make your current code work: com.atlassian.auiplugin:dialog

There are two ways in which you can fix this.

• Use aui-dropdown2 instead.

• Add this dependency to make your current code work: com.atlassian.auiplugin:dropdown

1. Search for executions of AJS() as a function.

2. Rewrite the code using one of the following:

   • Native DOM functions

   • jQuery

For example:

• Change AJS("div") to document.createElement, or jQuery("<div></div>"), or any other templating solution.
• Change AJS.$(AJS).trigger('abcd') to $(document).trigger('abcd')
• Change AJS.$(AJS).bind('abcd') to $(document).on('abcd')

The cookie-related code has been included in jslibs, so you can reuse that:

• AMD module: atlassian/libs/cookie-1.0.0

• XML dependency: com.atlassian.plugin.jslibs:cookie-1.0.0

Also, AJS.Cookie is stil bundled in AUI 8 as a deprecated web-resource:

• XML dependency: com.atlassian.auiplugin:cookie

1. Search for Zepto in your add-on.

2. Use one of the following solutions:

   • Import Zepto into the project

   • Use jQuery instead

Search for the aui-message class in the source code (java, js, soy, jsp, vm).

1. Check for extra classes, like success, hint, warning, info, and error.

2. Add the aui-message prefix to each of these classes, for example:

   • info → aui-message-info

   • error → aui-message-error

• .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

Alternative:

You can use iconfont as an alternative.

• .icon-dropdown

• .icon-dropdown-active
• .icon-dropdown-active-d
• .icon-maximize
• .icon-maximize-d
• .icon-minimize
• .icon-minimize-d
• .icon-move
• .icon-move-d

Alternative:

You can use iconfont as an alternative.

These classes have been removed, and AUI 8 doesn't provide any alternatives:


• .aui-dropdown-icon

• .aui-box-shadow
• .vertical-tabs-aui-legacystyle2011
• .aui-nav-current
• .aui-zebra
• -hero and -marketing variants of header sizes