Yay!
AUI 9.0.0 is officially released.
Here you can find docs and upgrade guide.
As per The direction for AUI 9,
If you notice something is difficult or impossible to support across products using AUI 8.x and 9.x, please let us know!
You can raise issues and requests in our Atlassian User Interface - Issues - Ecosystem Jira backlog.
,
The Server Platform
FYI, The doc links under the “Support” menu item are broken (“Getting Started” and “FAQ”).
d’oh! Thanks for pointing that out. Will get that fixed shortly!
@mszpyra:
I have a dialog2 dialog that won’t close in AUI 9 so I modified it per the upgrade guide (AUI 9 upgrade guides - AUI Documentation)
The modified dialog does work in AUI 9 (Confluence 7.12 beta1) but it does not work in AUI 8 (Confluence 7.11.1):
BEFORE:
<section role="dialog" id="includes-dialog" class="aui-layer aui-dialog2 aui-dialog2-medium" aria-hidden="true" persistent>
<header class="aui-dialog2-header">
<h2 class="aui-dialog2-header-main">
{getText('biz.artemissoftware.confluence.multiexcerpt.MultiExcerptMacro.multiexcerpt.dialog.title')}
</h2>
<a class="aui-dialog2-header-close">
<span class="aui-icon aui-icon-small aui-iconfont-close-dialog">Close</span>
</a>
</header>
...
AFTER:
<section role="dialog" id="includes-dialog" class="aui-layer aui-dialog2 aui-dialog2-medium" hidden persistent>
<header class="aui-dialog2-header">
<h2 class="aui-dialog2-header-main">
{getText('biz.artemissoftware.confluence.multiexcerpt.MultiExcerptMacro.multiexcerpt.dialog.title')}
</h2>
// CMEP-271 - AUI 9.x upgrade
<button type="button" class="aui-close-button" aria-label="{getText('biz.artemissoftware.confluence.multiexcerpt.MultiExcerptMacro.multiexcerpt.dialog.close')}"></button>
</header>
...
I am trying to figure out a solution for closing a dialog2 dialog in both versions of AUI.
If someone already knows the solution for that can we have an enhancement to the migration guide?
Thanks.
The solution, to have this dialog2 be closable in both AUI 8.x and AUI 9.x is probably going to be a matter of styling the Close widget with BOTH aui-close-button (for AUI 9.x) and aui-dialog2-header-close (for AUI 8.x).
It looks good in Confluence 7.12 beta1 and looks ugly in Confluence 7.11.1 but it works in both. Here is what it looks like in Confluence 7.11:
and in Confluence 7.12 beta1:
<button type="button" class="aui-close-button aui-dialog2-header-close" aria-label="{getText('biz.artemissoftware.confluence.multiexcerpt.MultiExcerptMacro.multiexcerpt.dialog.close')}"></button>
I could not force the style of the “button” element to look good in Confluence 7.11 (AUI 8.x):
I gave up on using a “button” element and went with an anchor “a” element like AUI 8.x uses and I added the aui-close-button style to it. Also, I had to eliminate the nested “span” in the anchor because that started rendering 2 X’s when the anchor “a” was styled for both AUI 8.x (aui-dialog-header-close) and AUI 9.x (aui-close-button).
Also had to inline styles on the anchor “a” so that it did not render as an ugly blue underlined X when hovered over.
This works in both Confluence 7.11.1 (AUI 8.x) and Confluence 7.12 beta1 (AUI 9.x) but it took me a few hours of hacking. We are finding lots of issues (probably related to AUI 9.x) while testing Confluence 7.12 beta1 with our plugins and I’m very concerned because:
So, here is the solution I am going with, in case anyone runs into this and wants to save some time:
UPDATED CLOSE WIDGET (works for AUI 8.x and AUI 9.x):
<section role="dialog" id="includes-dialog" class="aui-layer aui-dialog2 aui-dialog2-medium" hidden persistent>
<header class="aui-dialog2-header">
<h2 class="aui-dialog2-header-main">
{getText('biz.artemissoftware.confluence.multiexcerpt.MultiExcerptMacro.multiexcerpt.dialog.title')}
</h2>
<a class="aui-close-button aui-dialog2-header-close" style="text-decoration:none;color:inherit;"
aria-label="{getText('biz.artemissoftware.confluence.multiexcerpt.MultiExcerptMacro.multiexcerpt.dialog.close')}">
</a>
</header>
ORIGINAL CLOSE WIDGET (does not work for AUI 9.x):
<section role="dialog" id="includes-dialog" class="aui-layer aui-dialog2 aui-dialog2-medium" aria-hidden="true" persistent>
<header class="aui-dialog2-header">
<h2 class="aui-dialog2-header-main">
{getText('biz.artemissoftware.confluence.multiexcerpt.MultiExcerptMacro.multiexcerpt.dialog.title')}
</h2>
<a class="aui-dialog2-header-close">
<span class="aui-icon aui-icon-small aui-iconfont-close-dialog">Close</span>
</a>
</header>
Here is what it looks like in both Confluence 7.11 (AUI 8.x) and 7.12 (AUI 9.x):
… and it works in both versions, which was not happening before today.
I probably messed up the tab order of the widget and maybe have some other accessibility issues because I think one reason for AUI 9.x using “button” is for accessibility and to get tab order right automatically but I don’t have more days to spend on this.
I have a pile of other AUI 9 issues to address now that I’m bashing on Confluence 7.12 beta1. This first change was an eye-opener: the AUI migration guide is not giving migration advice that results in backwards-compatible code. I want my apps to work on both AUI 8.x and AUI 9.x and am not confident this is going to be possible as I make my way through the pile of issues I have waiting for me.
UPDATE:
and… that solution that works for AUI 8.x and AUI 9.x does not work at all for Confluence 6.15 (AUI 7.x). The Close widget is invisible in AUI 7.x, I need to add something (like “Close”) to the body of the “a” anchor for AUI 7.x
I want my app to support Confluence 6.x to Confluence 7.12 beta1 without having to write 2 or 3 different front ends and I don’t want to write branching logic based on Confluence/AUI version.
Back to the drawing board.
UPDATE:
I am back to using “button”. It looks bad in AUI 8.x and I’m opening a DEVHELP ticket for that. I think that is a bug in AUI.
It looks pretty bad in AUI 7.x too and I added a “title” attribute to the “button” element because it is a blank button in 7.x. and the title gives us hover text for free.
It only looks good in AUI 9.x but at least it is working in all 3 versions
AUI 7.x:
AUI 8.x:
AUI 9.x:
And here is the code. Yes, I tried putting “X” or “Close” in the body of button, in the body of an anchor when I was trying anchors… it looks worse than anything and that was abandoned:
<section role="dialog" id="includes-dialog" class="aui-layer aui-dialog2 aui-dialog2-medium" hidden persistent>
<header class="aui-dialog2-header">
<h2 class="aui-dialog2-header-main">
{getText('biz.artemissoftware.confluence.multiexcerpt.MultiExcerptMacro.multiexcerpt.dialog.title')}
</h2>
// CMEP-271 - AUI 9.x upgrade - aui-close-button is for AUI 9.x, aui-dialog2-header-close is for AUI 8.x, title is for AUI 7.x
<button type="button" class="aui-close-button aui-dialog2-header-close"
aria-label="{getText('biz.artemissoftware.confluence.multiexcerpt.MultiExcerptMacro.multiexcerpt.dialog.close')}"
title="{getText('biz.artemissoftware.confluence.multiexcerpt.MultiExcerptMacro.multiexcerpt.dialog.close')}"></button>
</header>
Hi @TureHoefner
Thanks for a great overview of the issue.
In Confluence, we haven’t found a html solution for that either and ended up conditionally rendering different markup for each AUI version (this is a soy template):
{if $auiVersion < 9 }
<a class="aui-dialog2-header-close">
<span class="aui-icon aui-icon-small aui-iconfont-close-dialog">{getText('...')}</span>
</a>
{else}
<button class="aui-close-button" type="button" aria-label="{getText('...')}"></button>
{/if}
with auiVersion = AJS.versionDetails.major.
Closing the dialog works but in case you attach additional handers to the close button, make sure to adjust the selectors too.
Hope that helps.
@jhronik,
your tip for using the AJS API for detecting the AUI version has turned out to be very valuable in our migration effort.
The AUI 9.x migration guide is pretty thin, do you think you could have someone add this detail to the guide?
It would be nice to have a migration section that states that the ideal goal is to migrate your code to AUI 9.x and have that work in AUI 8.x, AUI 7.x, etc but that there are are a few cases where that is not possible and the solution is to conditionally render different markup based on the AUI version, which can be detected using the AJS.versionDetails API… etc., along with a snippet of sample code like you gave to me.
Also, that guide has a significant amount of material on dialog2 dialogs and close buttons but doesn’t mention the fact that the recommended migration path does not work for previous AUI versions: AUI 9 upgrade guides - AUI Documentation
In addition, it would probably be nice to mention the AJS.versionDetails API someplace prominent in the AUI documentation if it is not already: Avatars - AUI Documentation
I’m a relatively new to p2 plugins so I didn’t make the connection between AJS and AUI and hadn’t thought that there might be a way to use AJS to detect the AUI version. As a matter of fact, it seems odd to me that AJS.versionDetails isn’t named AJS.getAuiVersionDetails. I guess AJS is the JavaScript API for the AUI framework but I don’t really see that stated explicitly anywhere I’ve looked… maybe that is so basic that it is assumed domain knowledge?
Thanks!
Hey @TureHoefner ,
I’ll pass your suggestions onto the AUI team.
Please note that AJS.versionDetails is not an AUI API, that was actually a poorly chosen example from my side, sorry about that. The versionDetails comes from the internal Application links add-on and we reuse it occasionally. The source is in https://bitbucket.org/atlassian/application-links/src/master/applinks-plugin/src/main/resources/applinks/internal/lib/aui-version-details.js. For your purposes where you only need the AUI major version, I’d recommend to create a simpler version of that in your plugin only, something along the line of parseInt(AJS.version). Cross-depending on another plugin is inherently risky as it’s not a Confluence API, may change in the future, or the plugin may be disabled.
So cool! Thanks for coming back to the thread w/ the updated idea @jhronik .
We are making changes to a few of our apps right now and this will benefit us!