@atlassian/aui 9.9.2 → 9.9.4

package/package.json

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

package/src/js/aui/design-tokens/design-tokens-testing-theme.js

@@ -1,8 +1,12 @@
 import TokenNames from "@atlaskit/tokens/token-names";
 
+const testingThemeTargetElement = document.documentElement;
 const testingColorVariableName = '--aui-theme-testing-color';
 const defaultTestingColor = 'color(srgb 1 0.75 0.8 / 0.6)';
-const testingThemeName = "aui-theme-testing";
+const testingThemeTargetClass = "aui-theme-testing";
+const testingThemeSelector =
+    `html.${testingThemeTargetClass}[data-theme*="light:"], ` +
+    `html.${testingThemeTargetClass}[data-theme*="dark:"]`;
 
 /**
  * Theme that replaces all the design tokens with single color, helping to visually identify custom colors on the page
@@ -14,7 +18,7 @@ const testingThemeName = "aui-theme-testing";
     const initialComment = "This theme is autogenerated using AJS.DesignTokens.generateTestingTheme()."
 
     // If function called many times theme should be only added once
-    const isThemeAlreadyInitialised = !document.getElementById(testingThemeName)
+    const isThemeAlreadyInitialised = !document.querySelector(testingThemeSelector)
     if (!isThemeAlreadyInitialised) {
         return;
     }
@@ -26,10 +30,10 @@ const testingThemeName = "aui-theme-testing";
     const allDeclarations = [ colorDeclaration, ...themeCSSDeclarations ];
 
 
-    const themeCSS = `/* ${initialComment} */\nbody.${testingThemeName} {\n${allDeclarations.join('\n')}\n}`;
+    const themeCSS = `/* ${initialComment} */\n${testingThemeSelector} {\n${allDeclarations.join('\n')}\n}`;
 
     const themeElement = document.createElement('style');
-    themeElement.id = testingThemeName;
+    themeElement.id = "aui-design-tokens-testing-theme";
     themeElement.innerText = themeCSS;
 
     const head = document.querySelector('head');
@@ -46,37 +50,36 @@ function setTestingThemeColor(color = defaultTestingColor) {
     document.body.style.setProperty(testingColorVariableName, color);
 }
 
+function isTestingThemeEnabled() {
+    return testingThemeTargetElement.matches(testingThemeSelector);
+}
+
 function enableTestingTheme() {
-    const isEnabled = document.body.classList.contains(testingThemeName);
-    if (!isEnabled) {
-        document.body.classList.add(testingThemeName);
+    if (!isTestingThemeEnabled()) {
+        testingThemeTargetElement.classList.add(testingThemeTargetClass);
     }
 }
 
 function disableTestingTheme() {
-    const isEnabled = document.body.classList.contains(testingThemeName);
-    if (isEnabled) {
-        document.body.classList.remove(testingThemeName);
-        document.body.style.removeProperty(testingColorVariableName);
+    if (isTestingThemeEnabled()) {
+        testingThemeTargetElement.classList.remove(testingThemeTargetClass);
     }
 }
 
 /**
  * Enables or disables testing theme for Design Tokens based on current state
- * @param state Optional parameter. Allows to force specific state.
+ * @param targetState Optional parameter. Allows to force specific state.
  */
-function toggleTestingTheme(state) {
+function toggleTestingTheme(targetState) {
 
     // If not passed, invert existing state
-    if (state == null) {
-        const currentState = document.body.classList.contains(testingThemeName);
-        state = !currentState;
+    if (targetState == null) {
+        targetState = !isTestingThemeEnabled();
     }
 
-    state ? enableTestingTheme() : disableTestingTheme();
+    targetState ? enableTestingTheme() : disableTestingTheme();
 }
 
-
 export {
     setTestingThemeColor,
     enableTestingTheme,

package/src/js/aui/select2.js

@@ -1,5 +1,6 @@
 import $ from './jquery';
 import '../../js-vendor/jquery/plugins/jquery.select2';
+import layer from "./layer";
 
 /**
  * Wraps a vanilla Select2 with ADG _style_, as an auiSelect2 method on jQuery objects.
@@ -21,6 +22,7 @@ const auiHasAvatar = 'aui-has-avatar';
 
 $.fn.auiSelect2 = function (first) {
     let updatedArgs;
+    let dropdownLayer;
 
     if ($.isPlainObject(first)) {
         const auiOpts = $.extend({}, first);
@@ -79,14 +81,20 @@ $.fn.auiSelect2 = function (first) {
 
     select2Instance.on('select2-open', function () {
         const $selectInput = $(this);
+        const $selectDropdown = $selectInput.select2('dropdown');
+
+        if (!dropdownLayer) dropdownLayer = layer();
+        dropdownLayer.show(); // add layer to layer manager to get top z-index
+
+        $selectDropdown.css('z-index', dropdownLayer.$el.css('z-index'));
+        // mask is created during opening event, before open
+        $("#select2-drop-mask").css('z-index', dropdownLayer.$el.css('z-index'));
 
         if (options.multiple || $selectInput.attr('multiple')) {
             // This is a multi-select, exiting
             return;
         }
 
-        const $selectDropdown = $selectInput.select2('dropdown');
-
         if (searchLabel) {
             $selectDropdown.find('.select2-search label').text(searchLabel);
         }
@@ -94,6 +102,9 @@ $.fn.auiSelect2 = function (first) {
 
     select2Instance.on('select2-close', function () {
         const $selectInput = $(this);
+
+        dropdownLayer.hide();
+
         $selectInput.removeData('was-ariadescribedby-cleared');
     });
 

package/src/js/aui/tooltip.js

@@ -60,6 +60,7 @@ class Tooltip {
         this.enabled = this.options.enabled;
         this.moveTitleToTooltip();
         this.initContainer();
+        this.observeTriggerRemoval();
     }
 
     destroy() {
@@ -82,6 +83,38 @@ class Tooltip {
         });
     }
 
+    observeTriggerRemoval() {
+
+        const observedElements = [];
+
+        if (this.options.$delegationRoot && this.options.$delegationRoot.get(0)) {
+            observedElements.push(this.options.$delegationRoot.get(0));
+        }
+
+        if (this.triggerElement) {
+            observedElements.push(this.triggerElement);
+        }
+
+        this.triggerObservers = observedElements
+            .map(element => {
+                const parent = element.parentElement;
+                if (parent) {
+                    const observer = new MutationObserver(() => {
+                        const isToDestroy = !parent.contains(element);
+                        if (isToDestroy) {
+                            this.destroy();
+                        }
+                    });
+                    observer.observe(parent, {
+                        childList: true,
+                        subtree: false // We take trigger parent, so we only care about direct children
+                    });
+                    return observer;
+                }
+            })
+            .filter(observer => !!observer);
+    }
+
     unbindHandlers() {
         const selector = this.options.live;
 
@@ -93,6 +126,10 @@ class Tooltip {
             return;
         }
 
+        if (this.triggerObservers.length > 0) {
+            this.triggerObservers.forEach(observer => observer.disconnect());
+        }
+
         // We only need to unbind event handlers from this particular element
         this.$triggerElement.off(`.${pluginKey}`);
     }
@@ -310,14 +347,12 @@ $.fn.tooltip = function (arg) {
         $collection.on(activationEvents, selector, show);
         $collection.on(deactivationEvents, selector, hide);
         $collection.on('keyup', selector, hideOnEsc);
-
-        return $collection;
+    } else {
+        $collection.on(activationEvents, show);
+        $collection.on(deactivationEvents, hide);
+        $collection.on('keyup', hideOnEsc);
     }
 
-    $collection.on(activationEvents, show);
-    $collection.on(deactivationEvents, hide);
-    $collection.on('keyup', hideOnEsc);
-
     return $collection;
 };
 

package/src/less/aui-experimental-labels.less

@@ -36,7 +36,7 @@ a.aui-label:active {
 
 .aui-label-split .aui-label-split-main:hover,
 .aui-label-split .aui-label-split-main:active,
-.aui-label-split .aui-label-split-main:focus{
+.aui-label-split .aui-label-split-main:focus {
     text-decoration: none;
 }
 
@@ -55,7 +55,6 @@ a.aui-label:active {
     top: 0;
     bottom: 0;
     width: @aui-label-close-button-width;
-    filter: opacity(0.5);
 
     //The close cross
     &::before {
@@ -64,10 +63,18 @@ a.aui-label:active {
         font-size: 10px;
         margin: auto;
     }
+}
+
+/*
+ * Hover pseudo class can't be triggered in automated tests
+ * As a workaround we use a normal css class for testing
+ */
+.aui-label-closeable:has(.aui-icon-close:hover),
+.aui-label-closeable:has(.aui-icon-close.hover) {
+    background: @aui-label-closable-bg-color;
+    color: @aui-label-closable-text-color;
 
-    &:hover, &:focus {
-        background: var(--aui-label-close-hover-bg-color);
-        color: var(--aui-label-close-hover-text-color);
-        filter: none;
+    a.aui-label-split-main {
+        color: @aui-label-closable-text-color;
     }
 }

package/src/less/forms-radios-and-checkboxes.less

@@ -3,13 +3,14 @@
 @import (reference) './imports/aui-theme/components/forms';
 
 @label-left-offset: 20px;
-@button-border-width: 2px;
+@button-border-width: @aui-form-button-border-width;
 @button-focus-size: 12px;
 @button-focus-border-color: @aui-focus-ring-color;
 @button-focus-border: @aui-form-button-focus-border-width solid @button-focus-border-color;
 
 @radio-offset-top: 4px;
 @radio-offset-left: 0px;
+@radio-glyph-offset-adjustment: 2px;
 
 @checkbox-offset-top: 3px;
 @checkbox-offset-left: 0px;
@@ -48,26 +49,32 @@ form.aui:not(.aui-legacy-forms) {
         top: @radio-offset-top - 1px;
     }
     .aui-radio-position(iconfont) {
-        @fudge: 2px; // the glyph renders in a slightly different position for font-related reasons.
         position: absolute;
-        left: @radio-offset-left - @fudge/2;
-        top: @radio-offset-top - @fudge;
+        left: @radio-offset-left - @radio-glyph-offset-adjustment/2;
+        top: @radio-offset-top - @radio-glyph-offset-adjustment;
+    }
+    .aui-radio-outline-position() {
+        position: absolute;
+        left: @radio-offset-left - @aui-form-button-border-width - @aui-form-radio-checkbox-outline-padding-space;
+        top: @radio-offset-top - 1px - @aui-form-button-border-width - @aui-form-radio-checkbox-outline-padding-space;
     }
     .aui-checkbox-position() {
         position: absolute;
         left: @checkbox-offset-left;
         top: @checkbox-offset-top;
     }
-    .aui-checkbox-focus-position() {
+    .aui-checkbox-outline-position() {
         position: absolute;
-        left: @checkbox-offset-left - @aui-form-button-focus-border-width + 1px;
-        top: @checkbox-offset-top - @aui-form-button-focus-border-width + 1px;
+        left: @checkbox-offset-left - @aui-form-button-border-width - @aui-form-radio-checkbox-outline-padding-space;
+        top: @checkbox-offset-top - @aui-form-button-border-width - @aui-form-radio-checkbox-outline-padding-space;
     }
     .aui-radio-disabled-style() {
         & ~ label {
+            cursor: not-allowed;
             color: @aui-form-disabled-field-label-color;
         }
         & + .aui-form-glyph::before {
+            cursor: not-allowed;
             color: @radio-disabled-bg-color;
             border-color: transparent;
             background: transparent;
@@ -75,9 +82,11 @@ form.aui:not(.aui-legacy-forms) {
     }
     .aui-checkbox-disabled-style() {
         & ~ label {
+            cursor: not-allowed;
             color: @aui-form-disabled-field-label-color;
         }
         & + .aui-form-glyph::before {
+            cursor: not-allowed;
             color: @checkbox-disabled-icon-color;
             border-color: @checkbox-disabled-border-color;
             background: @checkbox-disabled-bg-color;
@@ -200,8 +209,8 @@ form.aui:not(.aui-legacy-forms) {
             }
 
             &:focus + .aui-form-glyph::after {
-                .aui-radio-focus-size();
-                .aui-radio-focus-position();
+                #aui-forms.aui-radio-checkbox-outline-size();
+                .aui-radio-outline-position();
 
                 content: "";
 
@@ -209,10 +218,6 @@ form.aui:not(.aui-legacy-forms) {
                 border-radius: @aui-form-button-size;
                 background-color: transparent;
             }
-
-            &:focus + .aui-form-glyph::before {
-                border-color: @button-focus-border-color;
-            }
         }
     }
 
@@ -269,25 +274,17 @@ form.aui:not(.aui-legacy-forms) {
                 }
             }
 
-            &:focus + .aui-form-glyph::before {
-                border-color: @button-focus-border-color;
-            }
-        }
-    }
+            &:focus + .aui-form-glyph::after {
+                #aui-forms.aui-radio-checkbox-outline-size();
+                .aui-checkbox-outline-position();
 
-    //
-    // Focus styles
-    //
+                content: "";
 
-    .aui-radio-focus-size() {
-        display: inline-block;
-        width: @aui-form-button-size;
-        height: @aui-form-button-size;
-    }
-    .aui-radio-focus-position() {
-        position: absolute;
-        left: @radio-offset-left;
-        top: @radio-offset-top - 1px;
+                border: @button-focus-border;
+                border-radius: @checkbox-border-radius;
+                background-color: transparent;
+            }
+        }
     }
 
 }

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

@@ -32,6 +32,7 @@
 // Blues
 @ak-color-B50: #DEEBFF;
 @ak-color-B75: #B3D4FF;
+@ak-color-B90: #60a4ff;
 @ak-color-B100: #4C9AFF;
 @ak-color-B200: #2684FF;
 @ak-color-B300: #0065FF;

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

@@ -38,7 +38,9 @@
 @aui-form-transition-time: 0.2s;
 
 @aui-form-button-size: 10px;
+@aui-form-button-border-width: 2px;
 @aui-form-button-focus-border-width: 2px;
+@aui-form-radio-checkbox-outline-padding-space: 2px;
 
 #aui-forms {
     .aui-input-field-style(normal) {
@@ -73,6 +75,12 @@
         width: @aui-form-button-size;
         height: @aui-form-button-size;
     }
+
+    .aui-radio-checkbox-outline-size() {
+        display: inline-block;
+        width: @aui-form-button-size + @aui-form-button-border-width * 2 + (@aui-form-radio-checkbox-outline-padding-space * 2);
+        height: @aui-form-button-size + @aui-form-button-border-width * 2 + (@aui-form-radio-checkbox-outline-padding-space * 2);
+    }
 }
 
 #aui-legacy-forms {

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

@@ -6,5 +6,7 @@
 @aui-label-border-color: var(--aui-label-bg-color);
 @aui-label-hover-bg-color: var(--aui-label-hover-bg-color);
 @aui-label-hover-border-color: var(--aui-label-hover-bg-color);
+@aui-label-closable-bg-color: var(--aui-label-close-hover-bg-color);
+@aui-label-closable-text-color: var(--aui-label-close-hover-text-color);
 
 @aui-label-border-radius: @aui-border-radius-smallish;

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

@@ -167,8 +167,8 @@
         --aui-label-link-color: inherit;
         --aui-label-bg-color: @ak-color-N20;
         --aui-label-hover-bg-color: @ak-color-N20;
-        --aui-label-close-hover-bg-color: @ak-color-R75;
-        --aui-label-close-hover-text-color: @ak-color-N800;
+        --aui-label-close-hover-bg-color: @ak-color-R50;
+        --aui-label-close-hover-text-color: @ak-color-R500;
 
         // Forms
         --aui-form-placeholder-text-color: @ak-color-N300;
@@ -210,8 +210,8 @@
         --aui-form-checkbox-active-bg-color: @ak-color-B50;
         --aui-form-checkbox-active-border-color: @ak-color-B50;
         --aui-form-checkbox-active-icon-color: @ak-color-B400;
-        --aui-form-radio-unchecked-bg-color: @ak-color-N10;
-        --aui-form-radio-unchecked-border-color: @ak-color-N40;
+        --aui-form-radio-unchecked-bg-color: @ak-color-N20;
+        --aui-form-radio-unchecked-border-color: @ak-color-N200;
 
         // Toggle
         --aui-toggle-default-bg-color: @ak-color-N200;
@@ -374,7 +374,7 @@
         --aui-border: @ak-color-N50;
         --aui-border-strong: @ak-color-N100;
         --aui-focus: @ak-color-B100;
-        --aui-link-color: @ak-color-B100;
+        --aui-link-color: @ak-color-B90;
         --aui-link-decoration: none;
         --aui-link-hover-color: @ak-color-B75;
         --aui-link-active-color: @ak-color-B200;
@@ -516,10 +516,10 @@
         // "Labels" (e.g., page tags, selected values in components, etc.)
         --aui-label-text-color: @ak-color-N800;
         --aui-label-link-color: @ak-color-N800;
-        --aui-label-bg-color: @ak-color-N70;
+        --aui-label-bg-color: @ak-color-N50;
         --aui-label-hover-bg-color: @ak-color-N80;
-        --aui-label-close-hover-bg-color: @ak-color-R400;
-        --aui-label-close-hover-text-color: @ak-color-N30;
+        --aui-label-close-hover-bg-color: @ak-color-R50;
+        --aui-label-close-hover-text-color: @ak-color-R500;
 
         // Forms
         --aui-form-placeholder-text-color: @ak-color-N200;
@@ -561,8 +561,8 @@
         --aui-form-checkbox-active-bg-color: @ak-color-B50;
         --aui-form-checkbox-active-border-color: @ak-color-B50;
         --aui-form-checkbox-active-icon-color: @ak-color-B200;
-        --aui-form-radio-unchecked-bg-color: @ak-color-N10;
-        --aui-form-radio-unchecked-border-color: @ak-color-N70;
+        --aui-form-radio-unchecked-bg-color: @ak-color-N20;
+        --aui-form-radio-unchecked-border-color: @ak-color-N200;
 
         // Toggle
         --aui-toggle-default-bg-color: @ak-color-N90;
@@ -868,8 +868,8 @@
         --aui-label-link-color: var(--ds-link);
         --aui-label-bg-color: var(--ds-background-neutral, @ak-color-N20);
         --aui-label-hover-bg-color: var(--ds-background-neutral, @ak-color-N20);
-        --aui-label-close-hover-bg-color: var(--ds-background-accent-red-subtle, @ak-color-R75);
-        --aui-label-close-hover-text-color: var(--ds-icon-accent-gray, @ak-color-N800);
+        --aui-label-close-hover-bg-color: var(--ds-background-danger, @ak-color-R50);
+        --aui-label-close-hover-text-color: var(--ds-text-danger, @ak-color-R500);
 
         // Forms
         --aui-form-placeholder-text-color: var(--ds-text-subtlest, @ak-color-N300);
@@ -877,9 +877,9 @@
         --aui-form-label-text-color: var(--ds-text-subtle, @ak-color-N200);
         --aui-form-error-text-color: var(--ds-text-danger, @ak-color-R400);
         --aui-form-description-text-color: var(--ds-text-subtlest, @ak-color-N200);
-        --aui-form-disabled-field-bg-color: var(--ds-text-disabled, @ak-color-N20);
-        --aui-form-disabled-field-text-color: var(--ds-text-subtlest, @ak-color-N80);
-        --aui-form-disabled-field-label-color: var(--ds-text-subtle, @ak-color-N80);
+        --aui-form-disabled-field-bg-color: var(--ds-background-disabled, @ak-color-N20);
+        --aui-form-disabled-field-text-color: var(--ds-text-disabled, @ak-color-N80);
+        --aui-form-disabled-field-label-color: var(--ds-text-disabled, @ak-color-N80);
         --aui-form-field-border-color: var(--ds-border-input, @ak-color-N40);
         --aui-form-field-hover-border-color: var(--ds-border-focused, @ak-color-N40);
         --aui-form-field-default-text-color: var(--ds-text, @ak-color-N800);
@@ -912,7 +912,7 @@
         --aui-form-checkbox-active-border-color: var(--ds-border-accent-blue, @ak-color-B50);
         --aui-form-checkbox-active-icon-color: var(--ds-icon-information, @ak-color-B400);
         --aui-form-radio-unchecked-bg-color: var(--ds-background-input, @ak-color-N10);
-        --aui-form-radio-unchecked-border-color: var(--ds-border-input, @ak-color-N40);
+        --aui-form-radio-unchecked-border-color: var(--ds-border-bold, @ak-color-N100);
 
         // Toggle
         --aui-toggle-default-bg-color: var(--ds-background-neutral-bold, @ak-color-N200);

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

@@ -9,5 +9,7 @@
 @aui-z-blanket: @aui-z-layer-min - 500; // so it appears below modals
 @aui-z-skip: @aui-z-layer-min + 1000; // so they appear above modals
 @aui-z-flag-container: @aui-z-layer-min + 1000; // so they appear above modals
-@aui-z-select2: @aui-z-layer-min + 3; // so it can paint an "overlay" behind its suggestion dropdown
+// default auiSelect2 z-index, so it can paint an "overlay" behind its suggestion dropdown
+// overridden by select2.js based on layer z-index
+@aui-z-select2: @aui-z-layer-min + 3;
 @aui-z-tooltip: @aui-z-layer-min + 2000; // so they appear over the top of pretty much everything

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

@@ -7,13 +7,15 @@
 
 // Those selectors rely on how Design Tokens library stores information about currently activated theme:
 @theme-preference-not-set: ~'html:not([data-theme])';
-@light-mode-enabled: ~'html[data-color-mode="light"]';
-@dark-mode-enabled: ~'html[data-color-mode="dark"]';
-@original-light-theme-enabled: ~'@{light-mode-enabled}[data-theme~="light:original"]';
-@original-dark-theme-enabled: ~'@{dark-mode-enabled}[data-theme~="dark:original"]';
+@light-mode-enabled: ~'[data-color-mode="light"]';
+@dark-mode-enabled: ~'[data-color-mode="dark"]';
+@original-light-theme-enabled: ~'html@{light-mode-enabled}[data-theme~="light:original"]';
+@original-dark-theme-enabled: ~'html@{dark-mode-enabled}[data-theme~="dark:original"]';
 @original-mode-enabled: ~'@{theme-preference-not-set}, @{original-light-theme-enabled}, @{original-dark-theme-enabled}';
 // Original is used as basis because it's just easier to understand
 @design-tokens-mode-enabled: ~'html:not(@{original-mode-enabled})';
+@design-tokens-light-theme-enabled: ~'@{design-tokens-mode-enabled}@{light-mode-enabled}';
+@design-tokens-dark-theme-enabled: ~'@{design-tokens-mode-enabled}@{dark-mode-enabled}';
 
 
 @{design-tokens-mode-enabled} {
@@ -38,7 +40,7 @@
             @rules();
         }
 
-        @{design-tokens-mode-enabled} @{light-mode-enabled} & {
+        @{design-tokens-light-theme-enabled} & {
             @rules();
         }
     }
@@ -48,7 +50,7 @@
             @rules();
         }
 
-        @{design-tokens-mode-enabled} @{dark-mode-enabled} & {
+        @{design-tokens-dark-theme-enabled} & {
             @rules();
         }
     }