- Release Date and Summary
- Sandbox and Demos
- Highlights of this release
- Disabling a dropdown
- Controlling dropdown processes
- Inline-dialog: new options
- Tabs: new option for disabled "page tabs"
- AJS.Messages: ID option added
- Underscore.js now available
- Prototype: AJS.escapeHtml
- Prototype: AJS.contextPath()
- Dialog Events
- Tables: new default design
- Test improvements
- AUI Experimental
- Upgrade notes
- Deprecation announcements
- Patch releases
Release Date and SummaryReleased August 2011: Experimental space, component improvements, new Table design, Underscore.js.
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:
displayShadow instructs the InlineDialog on rendering the shadow. Default:
Override arrow path:
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
Set the arrow SVG attributes:
getArrowAttributes returns an object which has attributes to be applied to the arrow svg element.
Override the positioning of the dialog:
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
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:
addActiveClass instructs the InlineDialog to add the 'active' class . Default:
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
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
Note that Underscore.js is not loaded by default, you must explictly require it.
AUI 3.5 includes a prototype for HTML escaping: AJS.escapeHtml (note this is not yet recommended for general use).
AUI 3.5 includes a cross-product way to get the context path of the app: AJS.contextPath.
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).
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.
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.
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:
- The striped table design is deprecated in favour of the new default with bottom borders on rows
The striped tables look like this:
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.
- AUI 3.5.1 released with a fix for contextPath
- AUI 3.5.2 released with the experimental Page and Layout CSS, for JIRA
- AUI 3.5.3 released with updates to the experimental Page and Layout CSS, for JIRA and Bamboo
- AUI 3.5.4 released with updates to the scm info in the pom for git support