@atlassian/aui 9.1.9 → 9.2.3-4dc984d9f

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@atlassian/aui",
     "description": "Atlassian User Interface library",
-    "version": "9.1.9",
+    "version": "9.2.3-4dc984d9f",
     "author": "Atlassian Pty Ltd.",
     "homepage": "https://aui.atlassian.com",
     "license": "Apache-2.0",
@@ -46,7 +46,7 @@
     },
     "devDependencies": {
         "@atlassian/adg-server-iconfont": "3.1.0",
-        "@atlassian/aui-webpack-config": "1.0.0",
+        "@atlassian/aui-webpack-config": "2.0.0",
         "@babel/core": "7.13.14",
         "@babel/preset-env": "7.13.12",
         "bundlesize": "^1.0.0-beta.2",
@@ -56,7 +56,8 @@
         "ignore-emit-webpack-plugin": "^2.0.2",
         "jquery": "3.5.1",
         "jquery-migrate": "3.3.2",
-        "less": "^3.10.3"
+        "less": "3.11.1",
+        "webpack-cli": "3.3.12"
     },
     "scripts": {
         "prepublishOnly": "yarn clean && cross-env NODE_ENV=production yarn build",

package/src/js/aui/date-picker.js

@@ -337,11 +337,6 @@ const initPolyfill = function (datePicker) {
     // shows that changing the `type` of input does not erase its value.
     // see https://codepen.io/chrisdarroch/pen/YzwgjyJ
     $field.prop('type', 'text');
-    // Set default value on initialization to handle all date formats.
-    // It is possible, because of changing type to text on the line above.
-    $field.val($field.attr('value'));
-    // Trigger change to update calendar popup value.
-    $field.trigger('propertychange');
 
     // demonstrate the polyfill is initialised
     $field.attr('data-aui-dp-uuid', datePickerUUID);

package/src/js/aui/dropdown2.js

@@ -454,7 +454,7 @@ function setLayerAlignment(dropdown, trigger) {
         preventOverflow: false,
         // space between a dropdown trigger and the dropdown itself, based on @aui-dropdown-trigger-offset
         // only added for dropdowns which are not submenus
-        offset: (trigger.hasSubmenu && trigger.hasSubmenu()) ? false : [0, 3]
+        offset: (trigger.hasSubmenu && trigger.hasSubmenu()) ? [-3, 0] : [0, 3]
     });
 
     dropdown._auiAlignment.enable();

package/src/js/aui/header-async.js

@@ -1,10 +1,15 @@
 import createHeader from './internal/header/create-header';
 import skate from './internal/skate';
 
-const Header = skate('aui-header', {
-    type: skate.type.CLASSNAME,
+const Header = skate('aui-header-end', {
+    type: skate.type.ELEMENT,
     created: function (element) {
-        createHeader(element);
+        const auiHeader = element.parentElement;
+        if (auiHeader && auiHeader.classList.contains('aui-header')) {
+            createHeader(auiHeader);
+        } else {
+            console.log('Could not async. initialise aui-header');
+        }
     }
 });
 

package/src/js/aui/internal/alignment.js

@@ -187,7 +187,7 @@ function Alignment(element, target, options = {}) {
         },
         {
             name: 'offset',
-            enabled: options.hasOwnProperty('offset') ? true : false,
+            enabled: options.hasOwnProperty('offset') && !!options.offset,
             options: {
                 offset: options.offset,
             },

package/src/js/aui/navigation.js

@@ -35,9 +35,6 @@ function Navigation (selector) {
         .children('.aui-nav-subtree-toggle')
         .children('span.aui-icon');
 
-    // Hide extra items under a 'More...' link
-    this.hideMoreItems();
-
     // Add child-selected class to relevant attributes
     this.$el.children('li:has(.aui-nav-selected)').addClass('aui-nav-child-selected');
 
@@ -88,7 +85,6 @@ Navigation.prototype.expand = function () {
         .removeClass('aui-iconfont-collapsed')
         .addClass('aui-iconfont-expanded')
         .text(I18n.getText('aui.words.collapse'));
-    this.hideMoreItems();
     return this;
 };
 
@@ -110,37 +106,6 @@ Navigation.prototype.toggle = function () {
     return this;
 };
 
-Navigation.prototype.hideMoreItems = function () {
-    if (this.$el.is('[data-more]') && !this.$el.is('[aria-expanded=false]')) {
-        var moreText = this.$el.attr('data-more') || I18n.getText('aui.words.moreitem');
-        var limit = Math.abs(parseInt(this.$el.attr('data-more-limit'))) || 5;
-        var $listElements = this.$el.children('li');
-
-        // Only add 'More...' if there is more than one element to hide and there are no selected elements
-        var lessThanTwoToHide = $listElements.length <= limit + 1;
-        var selectedElementPresent = $listElements.filter('.aui-nav-selected').length;
-        var alreadyInitialised = $listElements.filter('.aui-nav-more').length;
-        if (lessThanTwoToHide || selectedElementPresent || alreadyInitialised) {
-            return this;
-        }
-
-        $('<li>', {
-            'class': 'aui-nav-more',
-        }).append($('<a>', {
-            'href': '#',
-            'class': 'aui-nav-item',
-            'text': moreText,
-            'click': function (e) {
-                e.preventDefault();
-                $(this).parent().remove();
-            }
-        })).insertAfter($listElements.eq(limit - 1));
-    }
-
-    return this;
-};
-
-
 const navigationWidget = widget('navigation', Navigation);
 
 // Initialise nav elements

package/src/js/aui/tables-sortable.js

@@ -2,18 +2,21 @@ import $ from './jquery';
 import '../../js-vendor/jquery/jquery.tablesorter';
 import globalize from './internal/globalize';
 
-var DEFAULT_SORT_OPTIONS = {
+const DEFAULT_SORT_OPTIONS = {
     sortMultiSortKey: '',
     headers: {},
     debug: false,
     tabIndex: false
 };
 
-function sortTable($table) {
-    var options = DEFAULT_SORT_OPTIONS;
+/**
+ * @param {jQuery} $table - element to be sortable
+ * @param {Object} [extraOptions] - tablesorter.js options
+ */
+function sortTable($table, extraOptions) {
+    let options = Object.assign({}, DEFAULT_SORT_OPTIONS, extraOptions);
     $table.find('th').each(function (index, header) {
-
-        var $header = $(header);
+        const $header = $(header);
         options.headers[index] = {};
         if ($header.hasClass('aui-table-column-unsortable')) {
             options.headers[index].sorter = false;
@@ -25,10 +28,10 @@ function sortTable($table) {
             }
         }
     });
-    $table.tablesorter(options);
+    return $table.tablesorter(options);
 }
 
-var tablessortable = {
+let tablessortable = {
     setup: function () {
 
         /*
@@ -46,13 +49,13 @@ var tablessortable = {
             },
 
             format: function (s) {
-                var keyComponents = s.split('-');
-                var projectKey = keyComponents[0];
-                var issueNumber = keyComponents[1];
+                const keyComponents = s.split('-');
+                const projectKey = keyComponents[0];
+                const issueNumber = keyComponents[1];
 
-                var PROJECT_KEY_TEMPLATE = '..........';
-                var ISSUE_NUMBER_TEMPLATE = '000000';
-                var stringRepresentation = (projectKey + PROJECT_KEY_TEMPLATE).slice(0, PROJECT_KEY_TEMPLATE.length);
+                const PROJECT_KEY_TEMPLATE = '..........';
+                const ISSUE_NUMBER_TEMPLATE = '000000';
+                let stringRepresentation = (projectKey + PROJECT_KEY_TEMPLATE).slice(0, PROJECT_KEY_TEMPLATE.length);
                 stringRepresentation += (ISSUE_NUMBER_TEMPLATE + issueNumber).slice(-ISSUE_NUMBER_TEMPLATE.length);
 
                 return stringRepresentation;
@@ -95,9 +98,12 @@ var tablessortable = {
             sortTable($(this));
         });
     },
-
-    setTableSortable: function ($table) {
-        sortTable($table);
+    /**
+     * @param {jQuery} $table - element to be sortable
+     * @param {Object} [options] - tablesorter.js options
+     */
+    setTableSortable: function ($table, options) {
+        return sortTable($table, options);
     }
 };
 

package/src/less/aui-badge.less

@@ -28,7 +28,18 @@ aui-badge,
     &.aui-badge-primary {
         background-color: var(--aui-badge-primary-bg-color);
         color: var(--aui-badge-primary-text-color);
-        font-weight: @aui-font-weight-semibold;
+    }
+    &.aui-badge-added {
+        background-color: var(--aui-badge-added-bg-color);
+        color: var(--aui-badge-added-text-color);
+    }
+    &.aui-badge-removed {
+        background-color: var(--aui-badge-removed-bg-color);
+        color: var(--aui-badge-removed-text-color);
+    }
+    &.aui-badge-important {
+        background-color: var(--aui-badge-important-bg-color);
+        color: var(--aui-badge-important-text-color);
     }
 
     // Integrations:

package/src/less/aui-date-picker.less

@@ -1,5 +1,7 @@
 @import (reference) './imports/global';
 @import (reference) './imports/mixins/shadows';
+@import (reference) './imports/aui-theme/theme';
+
 
 /*! AUI Date Picker, using jQuery UI Date Picker */
 /*
@@ -24,6 +26,12 @@
     #aui.shadow.z200();
 }
 
+.aui-datepicker-dialog[x-placement*="bottom"]{
+    #aui-themes.when-light({
+        --aui-inline-dialog-bg-color: var(--aui-datepicker-heading-bg-color);
+    });
+}
+
 .aui-datepicker-dialog .aui-inline-dialog-contents,
 .aui-datepicker-dialog .contents {
     padding: 0;

package/src/less/aui-navigation.less

@@ -109,40 +109,41 @@
 
 /* Vertical Navigation
 -------------------- */
-.aui-navgroup-vertical .aui-nav > li > a,
-.aui-navgroup-vertical .aui-nav > li > span:not(.assistive) ,
-.aui-nav-vertical > li > a,
-.aui-nav-vertical > li > span:not(.assistive) {
+
+/** by AUI-5164:
+ * The following CSS has been adjusted to allow generic content as a direct ancestor of the nav list
+ * basic styling (default and active state) is applied to the list element itself
+ * interactive styling (hover, active, focus) is applied to the assumed interactive element (<a>)
+ * thanks to this - we can fill in the nav list with non-interactive elements without generating visual glitches.
+ */
+.aui-navgroup-vertical .aui-nav > li,
+.aui-nav-vertical > li {
     #aui-nav.item-base();
-    word-wrap: break-word;
+    overflow-wrap: break-word;
+    #aui-nav.item-style(normal, true);
 
-    &:hover {
-        #aui-nav.item-style(hover);
-    }
+    & > a {
+        #aui-nav.item-base();
+        #aui-nav.item-base-inner-link();
+        #aui-nav.item-style(normal);
 
-    &:active {
-        #aui-nav.item-style(active);
-    }
+        &:hover {
+            #aui-nav.item-style(hover);
+        }
 
-    &:focus {
-        #aui.with-focus-ring();
-        text-decoration: none;
+        &:active {
+            #aui-nav.item-style(active);
+        }
+
+        &:focus {
+            #aui.with-focus-ring();
+            text-decoration: none;
+        }
     }
 }
-.aui-navgroup-vertical .aui-nav > li > a,
-.aui-nav-vertical > li > a {
-    #aui-nav.item-style(normal);
-}
-.aui-navgroup-vertical .aui-nav > li > span:not(.assistive) ,
-.aui-nav-vertical > li > span:not(.assistive) {
-    #aui-nav.item-style(normal, true);
-}
-
 
-.aui-navgroup-vertical .aui-nav .aui-nav-selected > a,
-.aui-navgroup-vertical .aui-nav .aui-nav-selected > span:not(.assistive),
-.aui-nav-vertical .aui-nav .aui-nav-selected > a,
-.aui-nav-vertical .aui-nav .aui-nav-selected > span:not(.assistive) {
+.aui-navgroup-vertical .aui-nav .aui-nav-selected,
+.aui-nav-vertical .aui-nav .aui-nav-selected {
     #aui-nav.item-style(selected);
 }
 

package/src/less/aui-page-layout.less

@@ -196,8 +196,7 @@ body {
                 top: @aui-font-size-medium;
                 width: (@aui-grid / 2);
             }
-            &:last-child::before,
-            &.aui-nav-more::before {
+            &:last-child::before {
                 bottom: 50%;
             }
         }

package/src/less/aui-select2.less

@@ -123,6 +123,7 @@
 
 .aui-select2-drop.aui-dropdown2 {
     margin-left: 0;
+    background-color: var(--aui-select2-drop-bg-color);
 }
 .aui-select2-drop.aui-dropdown2.select2-with-searchbox {
     padding-top: 0;
@@ -233,16 +234,14 @@
 .aui-select2-container.select2-container .select2-choice:after {
     #aui.icon-pseudoelement();
     content: @aui-glyph-chevron-down;
+    left: 100%; /* "left" + "margin-left" required because of webkit not working properly with "right" */
     height: 0;
     margin-left: -18px;
     margin-top: -2px;
     opacity: 1;
     position: absolute;
-    top: calc(50% - 10px);
+    top: 7px;
     width: 0;
-    font-size: 16px;
-    line-height: 24px;
-    right: 22px;
 }
 
 /* Set the default text color to inherit.
@@ -273,12 +272,9 @@
 .aui-select2-container.select2-container-multi .select2-choices {
     #aui-forms.aui-select2-input-field-style(normal);
     #aui.icon(@aui-glyph-chevron-down, {
-        font-size: 16.5px;
+        font-size: inherit;
         left: inherit;
-        color: var(--aui-button-default-text-color);
-        right: 3px;
-        top: 50%;
-        line-height: 16px;
+        right: 0;
     });
 
     min-height: 0;

package/src/less/aui-sidebar-navigation.less

@@ -49,13 +49,6 @@
 
         // Nested navigation
         .aui-nav {
-            &[data-more] {
-                .aui-nav-more ~ li {
-                    height: 0;
-                    overflow: hidden;
-                }
-            }
-
             .aui-nav-item-actions {
                 margin-right: 0;
             }

package/src/less/forms-current.less

@@ -243,29 +243,28 @@ form.aui:not(.aui-legacy-forms) {
     }
 
     // both are @ak-color-N600
-    @chevron-dark:   url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23A5ADBA" d="M8.292 10.293a1.009 1.009 0 000 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 000-1.419.987.987 0 00-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 00-1.406 0z"/%3E%3C/svg%3E%0A');
-    @chevron-light:  url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23344563" d="M8.292 10.293a1.009 1.009 0 000 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 000-1.419.987.987 0 00-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 00-1.406 0z"/%3E%3C/svg%3E%0A');
+    @chevron-dark:   url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23A5ADBA" d="m6.744 8.744a1.053 1.053 0 0 0 0 1.49l4.547 4.557a1 1 0 0 0 1.416 0l4.55-4.558a1.051 1.051 0 1 0-1.488-1.488l-3.77 3.776-3.768-3.776a1.051 1.051 0 0 0-1.487 0z"/%3E%3C/svg%3E%0A');
+    @chevron-light:  url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23344563" d="m6.744 8.744a1.053 1.053 0 0 0 0 1.49l4.547 4.557a1 1 0 0 0 1.416 0l4.55-4.558a1.051 1.051 0 1 0-1.488-1.488l-3.77 3.776-3.768-3.776a1.051 1.051 0 0 0-1.487 0z"/%3E%3C/svg%3E%0A');
 
     select[disabled]:not([size]),
     .select:not([size]) {
         background-repeat: no-repeat;
-        background-position: calc(100% + 1.5px) 50%;
-        background-size: 25px;
+        background-position: 100% 50%;
     }
 
-    select[disabled]:not([size]) {
+    select.select[disabled]:not([size]) {
         // used to be a light ak-color-N70, but there were only 2-3 shades of difference
         // between that and dark ak-color-N600, so I'm re-using it here.
         background-image: @chevron-dark;
     }
 
-    select:not([size]) {
-        padding-right: 20px;
+    select.select:not([size]) {
+        padding-right: 22px;
         background-image: @chevron-light;
     }
 
     #aui-themes.when-dark({
-        select:not([size]) {
+        select.select:not([size]) {
             background-image: @chevron-dark;
         }
     });

package/src/less/imports/aui-theme/components/navigation.less

@@ -52,6 +52,12 @@
         padding: @aui-nav-link-spacing-vertical @aui-nav-link-spacing-horizontal;
     }
 
+    .item-base-inner-link() {
+        color: inherit;
+        text-decoration: inherit;
+        margin: -@aui-nav-link-spacing-vertical -@aui-nav-link-spacing-horizontal;
+    }
+
     .item-style(normal; @not-actionable:none) {
         background-color: var(--aui-item-bg, transparent);
         color: var(--aui-item-text, var(--aui-body-text));

package/src/less/imports/aui-theme/core/colors.less

@@ -48,10 +48,16 @@
         --aui-help-color: @ak-color-P400;
 
         // Badges
-        --aui-badge-bg-color: @ak-color-N30A;
-        --aui-badge-text-color: @ak-color-N800A;
-        --aui-badge-primary-bg-color: @ak-color-B75;
-        --aui-badge-primary-text-color: @ak-color-B500;
+        --aui-badge-bg-color: @ak-color-N40A;
+        --aui-badge-text-color: @ak-color-N800;
+        --aui-badge-primary-bg-color: @ak-color-B400;
+        --aui-badge-primary-text-color: @ak-color-N0;
+        --aui-badge-added-bg-color: @ak-color-G50;
+        --aui-badge-addded-text-color: @ak-color-G500;
+        --aui-badge-removed-bg-color: @ak-color-R50;
+        --aui-badge-removed-text-color: @ak-color-R500;
+        --aui-badge-important-bg-color: @ak-color-R400;
+        --aui-badge-important-text-color: @ak-color-N0;
         --aui-badge-on-blue-text-color: @ak-color-N0;
         --aui-badge-on-blue-bg-color: rgba(@ak-color-N0, 0.25);
 
@@ -287,6 +293,7 @@
         --aui-select2-field-default-bg-color: var(--aui-form-select-bg-color);
         --aui-select2-field-border-color: var(--aui-form-select-border-color);
         --aui-select2-field-hover-bg-color: var(--aui-form-select-hover-bg-color);
+        --aui-select2-drop-bg-color: var(--aui-dropdown-bg-color);
 
         // Dialogs
         --aui-dialog-bg-color: @ak-color-N0;
@@ -364,9 +371,15 @@
 
         // Badges
         --aui-badge-bg-color: @ak-color-N70;
-        --aui-badge-text-color: @ak-color-N600;
-        --aui-badge-primary-bg-color: @ak-color-B75;
-        --aui-badge-primary-text-color: @ak-color-B500;
+        --aui-badge-text-color: @ak-color-N900;
+        --aui-badge-primary-bg-color: @ak-color-B100;
+        --aui-badge-primary-text-color: @ak-color-N0;
+        --aui-badge-added-bg-color: rgba(0, 102, 68, 0.33);
+        --aui-badge-added-text-color: @ak-color-G75;
+        --aui-badge-removed-bg-color: rgba(191, 38, 0, 0.33);
+        --aui-badge-removed-text-color: @ak-color-R75;
+        --aui-badge-important-bg-color: @ak-color-R300;
+        --aui-badge-important-text-color: @ak-color-N0;
 
         // Lozenges
         --aui-lozenge-subtle-bg-color: @ak-color-N50;
@@ -597,6 +610,7 @@
         --aui-select2-field-default-bg-color: var(--aui-form-select-bg-color);
         --aui-select2-field-border-color: var(--aui-form-select-border-color);
         --aui-select2-field-hover-bg-color: var(--aui-form-select-hover-bg-color);
+        --aui-select2-drop-bg-color: var(--aui-dropdown-bg-color);
 
         // Dialogs
         --aui-dialog-bg-color: @ak-color-N40;

package/src/less/imports/mixins/dropdown2-trigger-chevron-icon.less

@@ -2,7 +2,7 @@
 
 #aui {
     .aui-dropdown2-trigger-chevron-icon(@glyphsize: @aui-icon-size-small; @canvassize: @aui-icon-size-small-canvas) {
-
+        @canvas-padding: ((@canvassize - @glyphsize) / 2);
         #aui.icon-pseudoelement(@aui-icon-font-family);
         content: @aui-glyph-chevron-down;
         font-size: @glyphsize;
@@ -10,7 +10,7 @@
         line-height: 1;
         margin-top: -(@glyphsize / 2);
         position: absolute;
-        right: 3.5px;
+        right: @canvas-padding;
         top: 50%;
         text-indent: 0; // Reset indentation set by split button
         width: @glyphsize;

package/src/less/single-select.less

@@ -136,6 +136,8 @@ aui-select {
 
         &:not([aria-busy])::before {
             #aui.aui-dropdown2-trigger-chevron-icon();
+
+            right: ((@select-trigger-width - @aui-icon-size-small - (@aui-button-border-width *2)) / 2);
         }
     }
 }