Correct aui version for proper rendering

Using aui 8.5.1 from here: Buttons - AUI Documentation. I would like to use tabs and other more sophisticated controls but of course I start small to ensure I have the proper understanding. I copy this line into my code which is supposed to render a blue button of a standard size:

<button class="aui-button aui-button-primary">Button</button>

However, I get a small, clear button instead of a normal size blue button unless I add these lines to my code:

<link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/5.8.12/css/aui.css" media="all">
<link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/5.8.12/css/aui-experimental.css" media="all">

It appears that version is 5.8.12 instead of 8.5.1. The 5.8.12 version also adds gray blocks at the top and bottom of the page.

I’d like to be using the latest version of aui so just wanting to confirm that I am doing things correctly and need to stay with 5.8.12 or if there code some where I haven’t identified yet that need to be updated to use the 8.5.1 code base.

Please advise…

1 Like

Have a look at: ACE and AUI 7 and 8 - #2 by sven.schatter

Worked like a charm Marc—huge thanks for saving me a ton of time! I new it had to be the links but wasn’t sure what to change them to. :+1:

@marc a couple of quick follow up items I’m hoping you can assist me with.

  • I take the sample code from Tabs - AUI Documentation and put it into my code, but it doesn’t switch tabs like it does on this page or in codepen. Am I missing something?

  • I used some jQuery code for UI tabs and it works perfectly but I don’t think this is the standard Atlassian wants used. However, on the AUI page I see there are some jQuery function calls so I wanted to validate that Atlassian restricts jQuery usage to what is on its AUI 8.5.1 page—is this correct?

So, I am hoping this is something minor and I can proceed with using the tabs under Atlassian’s AUI 8.5.1. Please note that my code and results are showing on each panel correctly as I have validated this by simply switch the active tab/panel combo and the results are all there. The tabs just aren’t switching correctly.

Thanks in advance for your assistance!

UPDATE: Fyi, if I take my code and copy it into codepen it switches the tabs as expected so not sure I am doing something wrong or not.

@LorenzoPhillips when you edit in codepen, the code includes the following header:

<!-- External dependencies -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@atlassian/aui@8.5.1/dist/aui/aui-prototyping.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.15.4/sinon.js"></script>
<script src="https://unpkg.com/@atlassian/aui@8.5.1/dist/aui/aui-prototyping.js"></script>
<!-- / External dependencies -->

So you should include these dependencies also in your code.

1 Like

Ok, I was missing the (2) middle dependencies as I had the other (2) in the code already. Is there a place where I can see what dependencies I should be adding so I don’t have to bother you?

I am an experienced coder so I knew dependencies were missing but being new to Atlassian development I don’t know what the dependencies are just yet and getting the URLs correct can be challenging.

Anyway, thanks again for you help—it is greatly appreciated!

Hi @LorenzoPhillips The problem is that there is no complete documentation. That’s why I created ACE and AUI 7 and 8 . However no word from ATL yet.

Sounds good. So the missing dependencies fixed my issues so I’m ATL compliant again. Lol.

Next up, pagination and then my first App will be finished. And you have been critical to my success so HUGE thanks to you again!

Hi @LorenzoPhillips and @marc thanks for the traffic on this post. I was able to fix my problems with AUI components as well. I want to share my experience with you and also other who will struggle with the deprecated docs and sample project.
Following order of stylesheet and script tags are inside my layout.hbs:

<!---   aui stylesheets (9.4.3)   --->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aui/9.4.3/aui/aui-prototyping.min.css" integrity="sha512-enccfqEn+FD/IIe6vXfCtiaZdpSHxN+ao7ug744JhKsqgCvau7nqbpDVFW8ia8i6sdeKzJMUH3+7FX0BWrTJcw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
    <!---   internal stylesheet   --->
    <link rel="stylesheet" href="/css/addon.css" type="text/css" />

    <!---   external dependencies   --->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.15.4/sinon.js"></script>

    <!---   aui javascript library (9.4.3)   --->
    <script src="https://unpkg.com/@atlassian/aui@9.4.3/dist/aui/aui-prototyping.js"></script>

 
    <!---   connect js api (5.9.8)  --->
    <script src="//aui-cdn.atlassian.com/aui-adg/5.9.8/js/aui.js" type="text/javascript"></script>
    <script src="//aui-cdn.atlassian.com/aui-adg/5.9.8/js/aui-soy.js" type="text/javascript"></script>
    <script src="//aui-cdn.atlassian.com/aui-adg/5.9.8/js/aui-datepicker.js"></script>
    <script src="//aui-cdn.atlassian.com/aui-adg/5.9.8/js/aui-experimental.js"></script>
    <script src="https://connect-cdn.atl-paas.net/all.js" type="text/javascript"></script>