Skip to end of metadata
Go to start of metadata


Release Date and Summary

Released August 2011: Experimental space, component improvements, new Table design, Underscore.js.

Slated for inclusion in Platform 2.12.

Sandbox and Demos

Highlights of this release

Disabling a dropdown

Option useDisabled enables the new disabling feature within the aui dropdown. To avoid backwards-compatibility risks, the default value for this is false.

Setting the value to true will disable any dropdown which has a class of disabled set on the aui-dd-parent. The dropdown can be re-enabled by removing the disabled class.

An example of a disabled dropdown (in html) would be:

Controlling dropdown processes

In addition to the existing addCallback method which is executed after a given event (such as 'show') there is now a addControlProcess method which can be used to wrap around an event. This gives the ability to control whether an event occurs or not.

Inline-dialog: new options

Suppress dialog shadow:
Option displayShadow instructs the InlineDialog on rendering the shadow. Default: true

Override arrow path:
Option getArrowPath returns a string representation of an SVG path that will represent the arrow being drawn. This function takes one argument, positions which is the return value of the calculatePositions method.

Set the arrow SVG attributes:
Option getArrowAttributes returns an object which has attributes to be applied to the arrow svg element.

Override the positioning of the dialog:
Option calculatePositions allows the consumer of InlineDialog to manually determine or calculate the position that the InlineDialog should be drawn at.
This method takes in the following arguments:

  • popup - the jQuery reference to the inline dialog element
  • targetPosition - object which contains the target of the event
  • mousePosition - the coordinates of the mouse at the time of the event trigger
  • opts - the options which have been passed to InlineDialog

Method returns an object with the following attributes:

  • displayAbove - if true, will display above the target
  • popupCss - css attributes to apply on the popup element
  • arrowCss - css attributes to apply on the arrow element

Suppress 'active' class on trigger items:
Option addActiveClass instructs the InlineDialog to add the 'active' class . Default: true

Tabs: new option for disabled "page tabs"

In some cases the AUI Tabs design is used for page-to-page tabs, where each tab is actually loaded via a separate URL. In such a scenario the tab links should simply behave as normal and not swap the tabs - in effect, the tabs are disabled.

To disable tabs, simply add the aui-tabs-disabled class:

This will stop the tab links having tab events bound during load. Note that applying this class after the page has loaded has no effect.

AJS.Messages: ID option added

You can now set an ID on messages inserted with Javascript, by adding an "id" option. Example:

Note this is an ID string and not a selector. ID strings will not be applied if they contain whitespace, hashes (#), quotes or dots (although dots are technically valid, they are not recommended for use in ID or class names).

Underscore.js now available

Underscore.js is now available as a separately-loadable web-resource in AUI. To load it, add an additional resource requirement after AJS: com.atlassian.auiplugin:ajs-underscorejs

For example:

Note that Underscore.js is not loaded by default, you must explictly require it.

Prototype: AJS.escapeHtml

AUI 3.5 includes a prototype for HTML escaping: AJS.escapeHtml (note this is not yet recommended for general use).

Prototype: AJS.contextPath()

AUI 3.5 includes a cross-product way to get the context path of the app: AJS.contextPath.

Dialog Events

Events are now thrown when a dialog shown, hidden and removed. Simply bind to the events "show.dialog", "hide.dialog" or "remove.dialog". For example:

Tables: new default design

The design of the tables component has been refreshed to be something more in line with Atlassian's UI direction:

Note that this design will evolve in future releases; and the link colour in this screenshot is not part of the tables component (it is supplied by the product).

The new design not only looks good, but it is more performant as it does not require Javascript in older browsers. If you have a critical requirement for the striped design, refer to the upgrade notes.

Test improvements

Mostly of interest to contributors, some improvements have been made for testing in AUI - particularly manual testing. Some flaky (build-busting) tests have been hardened; some small manual tests have been rolled into a single page and the spurious ctrl+e keyboard test has been removed.

AUI Experimental

There is now a process and space for adding experimental components to AUI. These must be specifically required before they can be used and they are unstable and to be used at own risk. See the AUI Experimental Components page for details.

Upgrade notes

jQuery patched

Confluence had an urgent need for the fix for jQuery bug 8763, so that fix has been patched into AUI. If you use hidden IFRAMEs you should review the details of the jQuery issue and test your code accordingly.

This fix will be automatically included in the next version of AUI via an upgrade to jQuery 1.6.2+.

Toolbar no longer imposes a background and border

If you are using Toolbar, you will need to provide your own backgrounds and borders on the .aui-toolbar element. For reference the prototype mistakenly included the following styles:

 The wrapper for toolbars is specific to each product/instance.

AUI now depends on SAL's ApplicationProperties

The Transformer that implements AJS.contextPath() depends on SAL's ApplicationProperties, so that component needs to be in the dependency-injection context wherever the AUI plugin is used (for example, in the reduced mode of Setup).

Assistive class updated 

The assistive class has been updated to better support VoiceOver and handle more edge cases. It now uses the same clip:rect hiding solution as the HTML5 Boilerplate. If you make use of .assistive you should carry out a manual check to ensure there are no rendering issues.

Shadows default to box-shadow

(AJS-634) AUI shadows now test for box-shadow support and only use SVG when it's not supported (IE7 and IE8). This move was facilitated by the release of IE9, as all major browsers now support box-shadow in their current release. Previously the SVG solution was preferred in order to maintain a single, consistent solution across the current browsers.

This change affects how Dropdown, Dialog and Inline Dialog components have shadows applied to them. A visual check is recommended after upgrading; and any overrides or modifications related to shadows or resizing components should be reviewed.

Implementor note: Using CSS border-radius in conjunction with box-shadow requires that both styles are applied to the same element. This may require styling changes to your Dropdown, Dialog or Inline Dialog components after the upgrade.

Review table style overrides

If you have any overrides in place to remove the zebra striping on AUI tables, you should now be able to remove them.

Legacy support for striped tables

If you have a critical need to maintain the old striped design of tables, you can choose to invoke it by adding the class "aui-zebra" to the TABLE element:

Important notes:

  • The striped table design is deprecated in favour of the new default with bottom borders on rows
  • Adding the class has performance impacts in IE8 and below, as Javascript is required to enable the stripes.

The striped tables look like this:

Deprecation announcements

IE7 no longer supported

IE7 is no longer supported, as AUI 3.5 is not scheduled for implementation in any Atlassian product which supports IE7. Most components still work in IE7, however there are known problems with dropdowns in toolbars.

Stalker Bar component deprecated

AUI has contained an experimental "Stalker" component, however since committing it JIRA have moved to a forked/different version. No other usage or demand has been observed. As such, Stalker is being deprecated. A new, similar component may be added to AUI in future but this specific implementation will be removed.

ctrl+e shortcut deprecated

Previously the keyboard shortcut demos included ctrl+e. Since ctrl+e only works in Firefox and there is no indication this will ever change, we have removed ctrl+e from the code and demo pages; and if you are using this particular keyboard combination you should assign a new combination.

Zebra tables deprecated

With the release of the new default tables style, the old zebra-stripe design is deprecated in favour of the new design.


JIRA Issues Macro: JIRA project does not exist or you do not have permission to view it.


Patch releases

  • No labels