@atlassian/aui 9.7.2 → 9.8.0

package/entry/styles/aui.page.reset.js

@@ -1,2 +1 @@
 import '@atlassian/aui/src/less/aui-reset.less';
-import './aui.page.design-tokens-mode';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@atlassian/aui",
     "description": "Atlassian User Interface library",
-    "version": "9.7.2",
+    "version": "9.8.0",
     "author": "Atlassian Pty Ltd.",
     "homepage": "https://aui.atlassian.com",
     "license": "Apache-2.0",

package/src/js/aui/avatar-group.js

@@ -1,12 +1,9 @@
 import skate from './internal/skate';
 
 const DEFAULT_SIZE = 'medium';
-const sizes = {xsmall: 16, small: 24, medium: 32, large: 48, xlarge: 64, xxlarge: 96, xxxlarge: 128};
-let isButtonDropdownActive = false;
-
-const getAvatarGroupSize = (value) => {
-    return Object.keys(sizes).includes(value) ? value : DEFAULT_SIZE;
-}
+const VISIBLE_AVATAR_COUNT = 4;
+const OVERLAP_FACTOR = 0.25;
+const SIZES = {xsmall: 16, small: 24, medium: 32, large: 48, xlarge: 64, xxlarge: 96, xxxlarge: 128};
 
 const setAvatarGroupSize = (element, newValue, oldValue) => {
     if (oldValue) {
@@ -15,117 +12,133 @@ const setAvatarGroupSize = (element, newValue, oldValue) => {
     element.classList.add(`aui-avatar-group-${newValue}`);
 }
 
-const setLeftPosition = (size, divisionNum, multiplyNum) => {
-    return `${(sizes[size] - sizes[size] / divisionNum) * multiplyNum}px`;
+const getAvatarGroupSize = (value) => {
+    return Object.keys(SIZES).includes(value) ? value : DEFAULT_SIZE;
 }
 
-const addAvatarGroupStyle = (element, size, multiplyNum) => {
-    element.setAttribute('size', size);
-    element.classList.add('aui-avatar-group-item');
-    element.style.left = setLeftPosition(size, 4, multiplyNum);
-    element.style.zIndex = `${5 - multiplyNum}`;
-}
+const updateAvatarGroup = (element, size) => {
+    const avatars = element.querySelectorAll('aui-avatar');
+    const hiddenAvatars = [...avatars].slice(VISIBLE_AVATAR_COUNT);
 
-const setBadgedDropdownItem = (element) => {
-    const avatars = element.parentNode.querySelectorAll('aui-avatar');
-    const badgedDropdown = element.parentNode.querySelector('.aui-avatar-group-dropdown')
-    const hiddenAvatarsList = [... avatars].slice(4);
+    updateAvatarGroupItems(avatars, size);
 
-    if (isButtonDropdownActive) {
-        hiddenAvatarsList.forEach(avatar => {
-            const avatarItemSrc = avatar.getAttribute('src');
-            const avatarItemAlt = avatar.getAttribute('alt');
-            const avatarItemTitle = avatar.getAttribute('title');
+    const oldDropdown = element.querySelector('.aui-avatar-group-dropdown');
+    if (oldDropdown) {
+        oldDropdown.remove();
+    }
 
-            const avatarWrapper = document.createElement('span');
-            avatarWrapper.setAttribute('class', 'aui-avatar-group-dropdown-item');
+    if (hiddenAvatars.length === 0) { return };
 
-            if (avatarItemSrc) {
-                avatarWrapper.innerHTML = `<aui-avatar id="avatar-item" src=${avatarItemSrc} alt=${avatarItemAlt} title=${avatarItemTitle}></aui-avatar>`;
-            } else {
-                avatarWrapper.innerHTML = '<aui-avatar></aui-avatar>';
-            }
+    const dropdown = createDropdown(size, hiddenAvatars);
 
-            badgedDropdown.appendChild(avatarWrapper);
-        });
-    } else {
-        hiddenAvatarsList.forEach(()=> {
-            const dropdownItems = document.querySelector('.aui-avatar-group-dropdown-item');
-            if (dropdownItems) {dropdownItems.remove();}
-        });
-    }
+    element.appendChild(dropdown);
+}
 
+const createDropdown = (size, hiddenAvatars) => {
+    const dropdown = document.createElement('div');
+    const button = createAvatarGroupDropdownButton(`+${hiddenAvatars.length}`);
+    const menu = createAvatarGroupDropdownMenu();
+
+    hiddenAvatars.forEach((hiddenAvatar) => {
+        menu.append(hiddenAvatar);
+    })
+    dropdown.classList.add('aui-avatar-group-dropdown');
+    dropdown.style.left = getLeftPosition(size, VISIBLE_AVATAR_COUNT + 0.2);
+    dropdown.appendChild(button);
+    dropdown.appendChild(menu);
+    return dropdown;
 }
 
-const handleClickOnBadged = (element) => {
-    const badgedDropdown = element.parentNode.querySelector('.aui-avatar-group-dropdown');
-    badgedDropdown.classList.toggle('aui-avatar-group-dropdown-show');
-    
-    isButtonDropdownActive = !isButtonDropdownActive;
-    element.setAttribute('aria-expanded', isButtonDropdownActive.toString());
+const createAvatarGroupDropdownButton = (content) => {
+    const button = document.createElement('button');
+    button.classList.add('aui-avatar-group-dropdown-button', 'aui-avatar-inner');
+    button.innerText = content;
+    button.setAttribute('aria-expanded', false);
+    button.setAttribute('aria-haspopup', 'dialog');
+    return button;
+}
 
-    setBadgedDropdownItem(element);
+const createAvatarGroupDropdownMenu = () => {
+    const dropdown = document.createElement('div');
+    dropdown.classList.add('aui-avatar-group-dropdown-menu');
+    return dropdown;
 }
 
-const createAvatarGroupBadged = (element, size, avatars, amount) => {
-    const oldBadged = element.querySelector('.aui-avatar-group-badged');
-    if (oldBadged) {oldBadged.remove()};
+const updateAvatarGroupItems = (avatars, size) => {
+    avatars.forEach((avatar, index) => {
+        const isHidden = index >= VISIBLE_AVATAR_COUNT;
+        avatar.classList.add(!isHidden ? 'aui-avatar-group-item' : 'aui-avatar-group-dropdown-item');
+
+        if (!isHidden) {
+            avatar.setAttribute('size', size);
+            avatar.style.left = getLeftPosition(size, index);
+            avatar.style.zIndex = `${VISIBLE_AVATAR_COUNT + 1 - index}`;
+        } else {
+            avatar.setAttribute('size', 'medium');
+        }
+    });
+};
 
-    const oldBadgedDropdown = element.querySelector('.aui-avatar-group-dropdown')
-    if (oldBadgedDropdown) {oldBadgedDropdown.remove()}
-    const multiplier = avatars.length - amount;
+const getLeftPosition = (size, index) => {
+    const avatarSize = SIZES[size];
+    const overlapFactor = avatarSize * OVERLAP_FACTOR;
+    const leftPosition = (avatarSize - overlapFactor) * index;
+    return `${leftPosition}px`;
+};
 
-    const groupBadged = document.createElement('button');
-    groupBadged.classList.add('aui-avatar-group-badged', 'aui-avatar-inner');
-    groupBadged.style.left = setLeftPosition(size, 4.5, multiplier);
-    groupBadged.innerText = `+${amount}`;
-    groupBadged.setAttribute('aria-expanded', isButtonDropdownActive.toString());
-    groupBadged.setAttribute('aria-haspopup', 'dialog')
-    element.appendChild(groupBadged);
+document.addEventListener('click', (e) => {
+    const isDropdownButton = e.target.matches('.aui-avatar-group-dropdown-button');
+    const closestDropdown = e.target.closest('.aui-avatar-group-dropdown');
 
-    groupBadged.addEventListener('click', () => handleClickOnBadged(groupBadged))
+    if (!isDropdownButton && closestDropdown !== null) return;
 
-    const badgedDropdown = document.createElement('div');
-    badgedDropdown.classList.add('aui-avatar-group-dropdown');
-    badgedDropdown.style.left = setLeftPosition(size, 4.5, multiplier);
-    element.appendChild(badgedDropdown);
-}
+    if (isDropdownButton) {
+        closestDropdown.classList.contains('aui-avatar-group-dropdown-show') ? closeDropdown(closestDropdown) : openDropdown(closestDropdown);
+    }
 
-const tidyUpAvatarGroup = (element, size) => {
-    const avatars = element.querySelectorAll('aui-avatar');
-    let amountItems = avatars.length - 4;
+    document.querySelectorAll('.aui-avatar-group-dropdown-show').forEach(dropdown => {
+        if (dropdown === closestDropdown) return;
 
-    avatars.forEach((avatar, index) => {
-        avatar.classList.toggle('aui-avatar-group-item-hidden', index >= 4);
-        addAvatarGroupStyle(avatar, size, index);
-    });
+        closeDropdown(dropdown)
+    })
+});
 
-    if (amountItems > 0) {
-        createAvatarGroupBadged(element, size, avatars, amountItems);
-    } else {
-        const badged = element.querySelector('.aui-avatar-group-badged');
-        if (badged) {badged.remove();}
-    }
+document.addEventListener('keydown', (e) => {
+    if (e.key !== 'Escape') return;
+    const dropdown = document.querySelector('.aui-avatar-group-dropdown-show');
+    if (!dropdown) return;
+
+    closeDropdown(dropdown);
+});
+
+const closeDropdown = (dropdown) => {
+    const button = dropdown.querySelector('.aui-avatar-group-dropdown-button');
+    dropdown.classList.remove('aui-avatar-group-dropdown-show');
+    button.setAttribute('aria-expanded', 'false');
+}
+const openDropdown = (dropdown) => {
+    const button = dropdown.querySelector('.aui-avatar-group-dropdown-button');
+    dropdown.classList.add('aui-avatar-group-dropdown-show');
+    button.setAttribute('aria-expanded', 'true');
 }
 
 const AvatarGroupEl = skate('aui-avatar-group', {
     attributes: {
         size: {
             value: DEFAULT_SIZE,
-
-            fallback(element, { newValue , oldValue }) {
+            fallback(element, { newValue, oldValue }) {
                 const size = getAvatarGroupSize(newValue);
+                setAvatarGroupSize(element, size, oldValue);
 
                 skate.init(element);
-                setAvatarGroupSize(element, size, oldValue);
-                tidyUpAvatarGroup(element, size);
+
+                updateAvatarGroup(element, size);
             }
-        }
+        },
     },
-
     created(element) {
         element.classList.add('aui-avatar-group');
-    }
+    },
 });
 
 const wasNodeRemoved = (mutation, target) => {
@@ -141,12 +154,12 @@ const mutationObserver = new MutationObserver(function(mutation) {
         const target = mutation.target;
 
         if (wasNodeRemoved(mutation, target)) {
-            tidyUpAvatarGroup(target, target.getAttribute('size'));
+            updateAvatarGroup(target, target.getAttribute('size'));
         }
 
         if (wasNodeAdded(mutation, target)) {
             setTimeout(() => {
-                tidyUpAvatarGroup(target, target.getAttribute('size'));
+                updateAvatarGroup(target, target.getAttribute('size'));
             }, 0);
         }
     });

package/src/js/aui/banner.js

@@ -1,52 +1,60 @@
-import $ from './jquery';
 import { recomputeStyle } from './internal/animation';
 import amdify from './internal/amdify';
 import globalize from './internal/globalize';
+import * as deprecate from './internal/deprecation';
 
-var ID_BANNER_CONTAINER = 'header';
+const ID_BANNER_CONTAINER = 'header';
 
-function banner (options) {
-    var $banner = renderBannerElement(options);
+const getContainer = () => document.getElementById(ID_BANNER_CONTAINER);
 
-    pruneBannerContainer();
-    insertBanner($banner);
+function banner(options) {
+    const bannerContainer = getContainer();
+    if (!bannerContainer) {
+        throw new Error(
+            'Unable to find the application header. Please ensure that an element with the ID "header" is present in the DOM'
+        );
+    }
+    const bannerElement = createBannerElement(options);
 
-    return $banner[0];
+    renderBannerElement(bannerElement, bannerContainer);
+    removeHiddenBanners(bannerContainer);
+    return bannerElement;
 }
 
-function renderBannerElement({body, type = 'error'}) {
-    return $('<div class="aui-banner" role="banner"></div>')
-        .append($.parseHTML(body || ''))
-        .addClass(`aui-banner-${type}`);
+function createBannerElement({ body = '', type = 'error' }) {
+    const banner = document.createElement('div');
+    banner.className = `aui-banner aui-banner-${type}`;
+    banner.setAttribute('role', 'alert');
+    banner.innerHTML = body;
+    
+    const screenReaderInfo = document.createElement('div');
+    screenReaderInfo.innerText = `${type}`;
+    screenReaderInfo.classList.add('assistive')
+    banner.prepend(screenReaderInfo);
+
+    return banner;
 }
 
-function pruneBannerContainer() {
-    var $container = findContainer();
-    var $allBanners = $container.find('.aui-banner');
-
-    $allBanners.get().forEach(function (banner) {
-        var isBannerAriaHidden = banner.hasAttribute('hidden');
-        if (isBannerAriaHidden) {
-            $(banner).remove();
-        }
+function removeHiddenBanners(bannerContainer) {
+    const hiddenBanners = bannerContainer.querySelectorAll('.aui-banner[hidden]');
+    const lazyDeprecate = deprecate.getMessageLogger('Banner [hidden] attribute', {
+        removeInVersion: '10.0.0',
+        sinceVersion: '9.8.0',
+        deprecationType: 'ATTRIBUTE',
+        extraInfo: 'The hidden attribute on the banner is no longer effective. Future banner function calls won\'t remove banners with this attribute.'
     });
-}
 
-function findContainer() {
-    return $('#' + ID_BANNER_CONTAINER);
+    hiddenBanners.forEach(function (banner) {
+        lazyDeprecate();
+        banner.remove();
+    });
 }
 
-function insertBanner($banner) {
-    var $bannerContainer = findContainer();
-    if (!$bannerContainer.length) {
-        throw new Error('You must implement the application header');
-    }
-
-    $banner.prependTo($bannerContainer);
-    recomputeStyle($banner);
-    $banner[0].removeAttribute('hidden');
+function renderBannerElement(bannerElement, bannerContainer) {
+    bannerContainer.prepend(bannerElement);
+    recomputeStyle(bannerElement);
 }
 
 amdify('aui/banner', banner);
 globalize('banner', banner);
-export default banner;
+export default banner;

package/src/js/aui/dialog2.js

@@ -40,7 +40,7 @@ function handleInitialFocus(el) {
     const closeButton = el.querySelector(CLOSE_BUTTON_CLASS_SELECTOR)
 
     if (closeButton) {
-        const lazyDeprecate = deprecate.getMessageLogger(`Dialog2 [${CLOSE_BUTTON_CLASS_SELECTOR}] element is deprecated.`, {
+        const lazyDeprecate = deprecate.getMessageLogger(`Dialog2 [${CLOSE_BUTTON_CLASS_SELECTOR}]`, {
             removeInVersion: '10.0.0',
             sinceVersion: '9.6.0',
             extraInfo: 'Replace it with another actionable element inside your Dialog which will trigger closing of the modal.',
@@ -55,7 +55,7 @@ function handleInitialFocus(el) {
     // Print deprecation note for old custom focus selection if found
     const deprecatedFocusSelector = el.hasAttribute('data-aui-focus-selector');
     if (deprecatedFocusSelector) {
-        const lazyDeprecate = deprecate.getMessageLogger('Dialog2 [data-aui-focus-selector] attribute is deprecated.', {
+        const lazyDeprecate = deprecate.getMessageLogger('Dialog2 [data-aui-focus-selector] attribute', {
             removeInVersion: '10.0.0',
             alternativeName: 'initialisation on DOM insertion',
             sinceVersion: '9.6.0',

package/src/js/aui/flag.js

@@ -7,27 +7,26 @@ import CustomEvent from './polyfills/custom-event';
 import escapeHtml from './escape-html';
 import {CLOSE_BUTTON} from './close-button';
 
-var AUTO_CLOSE_TIME = 5000;
-var ID_FLAG_CONTAINER = 'aui-flag-container';
-var defaultOptions = {
+const AUTO_CLOSE_TIME = 8000;
+const ID_FLAG_CONTAINER = 'aui-flag-container';
+const DEFAULT_OPTIONS = {
     body: '',
     close: 'manual',
     title: '',
-    type: 'info'
+    type: 'info',
+    duration: AUTO_CLOSE_TIME,
 };
 
-function flag (options) {
-    options = $.extend({}, defaultOptions, options);
-
-    // clean the title value
+function flag (flagOptions) {
+    const options = { ...DEFAULT_OPTIONS, ...flagOptions };
     options.title = (options.title || '').toString().trim();
 
-    var $flag = renderFlagElement(options);
+    const $flag = renderFlagElement(options);
     extendFlagElement($flag);
 
     if (options.close === 'auto') {
         makeCloseable($flag);
-        makeAutoClosable($flag);
+        makeAutoClosable($flag, options.duration);
     } else if (options.close === 'manual') {
         makeCloseable($flag);
     }
@@ -39,7 +38,7 @@ function flag (options) {
 }
 
 function extendFlagElement ($flag) {
-    var flag = $flag[0];
+    const flag = $flag[0];
 
     flag.close = function () {
         closeFlag($flag);
@@ -58,7 +57,7 @@ function renderFlagElement ({body, title, close, type}) {
 }
 
 function makeCloseable ($flag) {
-    var $icon = $(CLOSE_BUTTON);
+    const $icon = $(CLOSE_BUTTON);
 
     $icon.on('click', function () {
         closeFlag($flag);
@@ -74,15 +73,15 @@ function makeCloseable ($flag) {
     return $flag.find('.aui-message').append($icon)[0];
 }
 
-function makeAutoClosable ($flag) {
+function makeAutoClosable ($flag, duration) {
     $flag.find('.aui-message').addClass('aui-will-close');
     setTimeout(function () {
         $flag[0].close();
-    }, AUTO_CLOSE_TIME);
+    }, duration);
 }
 
 function closeFlag ($flagToClose) {
-    var flag = $flagToClose.get(0);
+    const flag = $flagToClose.get(0);
 
     flag.removeAttribute('open');
     flag.dispatchEvent(new CustomEvent('aui-flag-close', {bubbles: true}));

package/src/less/aui-appheader.less

@@ -54,7 +54,6 @@ aui-header,
         padding: 0;
         height: var(--aui-appheader-logo-height, var(--aui-appheader-item-height));
         line-height: 1;
-        text-wrap: none;
         vertical-align: text-bottom;
         white-space: nowrap;
 
@@ -109,6 +108,7 @@ aui-header,
         // like modals and dropdowns, which would cause them to render funnily.
         background: var(--aui-appheader-bg-color);
         height: var(--aui-appheader-height, initial);
+        border-bottom: 1px solid var(--aui-border);
 
         // Set color in locations where it will not bleed in to nested layered components.
         .aui-header-before > :not(.aui-layer),

package/src/less/aui-avatars.less

@@ -27,7 +27,7 @@
     display: inline-block;
     position: relative;
     vertical-align: text-bottom;
-
+    line-height: 0;
 
     &-inner {
         display: flex;
@@ -40,6 +40,10 @@
         width: var(--aui-avatar-size);
         border-radius: 100%;
         overflow: hidden;
+
+        #aui-themes.when-design-tokens({
+            box-shadow: 0 0 0 2px var(--ds-surface-overlay, #FFFFFF);
+        })
     }
 
     & img {
@@ -120,45 +124,41 @@
     &-item {
         position: absolute;
         bottom: 0;
-
-        &-hidden {
-            display: none !important;
-        }
     }
 
-    &-badged {
+    &-dropdown {
         position: absolute;
         bottom: 0;
-        background-color: var(--aui-body-background);
-        z-index: 1;
-        font-size: calc(var(--aui-avatar-size) / 3);
-        align-items: center;
         border: 0;
-        cursor: pointer;
-        color: var(--aui-avatar-text);
-    }
-    &-dropdown {
-        box-sizing: border-box;
-        min-width: 160px;
-        max-width: 300px;
-        padding: @aui-dropdown-group-spacing 0;
-        display: none;
-
-        box-shadow: 0 4px 8px var(--aui-shadow2), 0 0 1px var(--aui-shadow2);
-        background: var(--aui-dropdown-bg-color);
-        border: 0 solid var(--aui-dropdown-border-color);
-        border-radius: 3px;
-        position: absolute;
-        top: var(--aui-avatar-size);
-        z-index: 3000;
-
-        &-show {
-            display: block;
+        overflow: visible;
+
+        &-button {
+            cursor: pointer;
+            border: none;
+            color: var(--aui-avatar-text);
+            display: grid;
+            place-items: center;
+            background-color: var(--aui-body-background);
+            font-size: calc(var(--aui-avatar-size) / 3);
+        }
+        &-menu {
+            #aui.shadow.z200();
+            box-sizing: border-box;
+            width: max-content;
+            max-width: 300px;
+            padding: @aui-dropdown-group-spacing 0;
+            display: none;
+            background: var(--aui-dropdown-bg-color);
+            border: 0 solid var(--aui-dropdown-border-color);
+            border-radius: 3px;
+            position: absolute;
+            top: var(--aui-avatar-size);
+            z-index: 3000;
+        }
+        &-show > &-menu {
+            display: flex;
+            flex-wrap: wrap;
         }
-    }
-
-    & > .aui-avatar > .aui-avatar > .aui-avatar-inner {
-        box-shadow: 0 0 0 3px var(--aui-avatar-outline);
     }
 
     .aui-avatar-group-size(xsmall, @aui-avatar-size-xsmall);

package/src/less/aui-banner.less

@@ -1,13 +1,23 @@
 @import (reference) './imports/global';
 
 .aui-banner {
+    --aui-message-padding: 10px;
+    --aui-message-gutter: 40px;
+    --aui-message-isize: @aui-icon-size-small;
+    --aui-focus: currentcolor;
+    --aui-link-color: currentcolor;
+    --aui-link-hover-color: currentcolor;
+    --aui-link-active-color: currentcolor;
+    border-radius: 0;
+    box-shadow: none;
+    margin-top: 0;
+
     #aui-message.icon-bar(var(--aui-message-ig), var(--aui-message-icolor));
     &::after {
         left: 15px;
     }
 
     padding: var(--aui-message-padding);
-    padding-left: var(--aui-message-gutter);
     position: relative;
 
     a:not(.aui-button),
@@ -15,24 +25,22 @@
         text-decoration: underline;
     }
 
+    &.aui-banner-error, &.aui-banner-warning {
+        padding-left: var(--aui-message-gutter);
+    }
+
     &.aui-banner-error {
         --aui-message-ig: @aui-glyph-exclamation-circle;
         background-color: var(--aui-banner-error-bg-color);
         color: var(--aui-banner-error-text-color);
     }
-}
-
-// Interop for banners and messages in header.
-#header .aui-banner,
-#header .aui-message {
-    --aui-message-padding: 10px;
-    --aui-message-gutter: 40px;
-    --aui-message-isize: @aui-icon-size-small;
-    --aui-focus: currentcolor;
-    --aui-link-color: currentcolor;
-    --aui-link-hover-color: currentcolor;
-    --aui-link-active-color: currentcolor;
-    border-radius: 0;
-    box-shadow: none;
-    margin-top: 0;
+    &.aui-banner-warning {
+        --aui-message-ig: @aui-glyph-exclamation-triangle;
+        background-color: var(--aui-banner-warning-bg-color);
+        color: var(--aui-banner-warning-text-color);
+    }
+    &.aui-banner-announcement {
+        background-color: var(--aui-banner-announcement-bg-color);
+        color: var(--aui-banner-announcement-text-color);
+    }
 }

package/src/less/aui-dark-mode.less

@@ -1,6 +1,5 @@
 @import (reference) './imports/global';
 
-#aui-themes.when-dark({
-    color-scheme: dark;
+body.aui-theme-dark {
     #aui-themes.dark();
-});
+};

package/src/less/aui-reset.less

@@ -3,12 +3,7 @@
 /**
  * BASE THEME
  */
-#aui-themes.when-light({
-    :root {
-        color-scheme: light;
-        #aui-themes.light();
-    }
-});
+@import './imports/aui-theme/theme.less';
 
 /**
  * RESET