@atlassian/aui 9.12.3 → 9.12.5

package/package.json

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

package/src/js/aui/flag.js

@@ -31,7 +31,7 @@ function flag (flagOptions) {
     if (options.close === 'auto') {
         makeCloseable($flag);
 
-        if ($flag.attr('aui-focus-trap') === 'false') {
+        if ($flag.attr('role') === 'alert') {
             makeAutoClosable($flag, options.duration);
         }
     } else if (options.close === 'manual') {
@@ -42,7 +42,7 @@ function flag (flagOptions) {
     insertFlag($flag);
 
     setTimeout(function () {
-        if ($flag.attr('aui-focus-trap') === 'true') {
+        if (($flag.attr('role') === 'alertdialog')) {
             getFocusManager.global.enter($flag);
         }
     }, 0)
@@ -90,11 +90,14 @@ function renderFlagElement ({ body, title, close, type, ariaLive, ariaLabel, ari
 
     return $('<div class="aui-flag"></div>')
         .attr({
-            'aui-focus-trap': `${isFocusable}`,
             'aria-label': escapeHtml(ariaLabel),
             'aria-hidden': 'false',
             'aria-live': escapeHtml(ariaLive),
             'role': ariaRole,
+            ...(isFocusable ? {
+                'data-aui-focus-selector': FOCUSABLE_QUERY.split(', ').map((item) => `.aui-message ${item}`).join(', '),
+                'data-aui-focus': 'true',
+            } : {}),
             ...(!!ariaDescription ? {'aria-description': escapeHtml(ariaDescription)} : {}),
         })
         .append($message);
@@ -127,7 +130,7 @@ function makeAutoClosable ($flag, duration) {
 function closeFlag ($flagToClose) {
     const flag = $flagToClose.get(0);
 
-    if ($flagToClose.attr('aui-focus-trap')) {
+    if ($flagToClose.attr('role') === 'alertdialog') {
         getFocusManager.global.exit($flagToClose);
     }
 
@@ -137,7 +140,6 @@ function closeFlag ($flagToClose) {
     flag.style.display = 'none';
     flag.dispatchEvent(new CustomEvent('aui-flag-close', { bubbles: true }));
 
-
     return flag;
 }
 

package/src/less/adg-header-quicksearch.less

@@ -44,6 +44,7 @@
     input {
         background: @bg-color;
         border: @aui-form-field-border-width solid @border-color;
+        #aui-forms.with-design-tokens-dependent-border-width();
         border-radius: @border-radius;
         box-shadow: none;
         box-sizing: border-box;
@@ -97,7 +98,7 @@
 
     input {
         &:focus {
-            #aui.with-focus-border();
+            #aui.with-focus-ring(@width: 1px, @inset: true, @set-border-color: true);
 
             background: @focus-bg-color;
             color: @focus-text-color;

package/src/less/aui-select2.less

@@ -87,6 +87,7 @@
 
 .aui-select2-drop {
     border: @aui-form-field-border-width solid @aui-button-border-color;
+    #aui-forms.with-design-tokens-dependent-border-width();
 }
 
 .select2-drop.select2-drop-above .select2-search input {
@@ -104,7 +105,7 @@
     input {
         //padding for the icon
         padding-right: (@icon-offset/2) + @aui-icon-size-small;
-        #aui.with-focus-border();
+        #aui.with-focus-ring(@inset: true);
         border-radius: @aui-select2-form-field-border-radius;
         //we need to use important because jquery plugin uses important as well :(
         background: none !important;
@@ -270,7 +271,7 @@
     font-family: inherit;
     font-size: 14px;
     height: 1.4285714285714em; /* 20px - using ems so the fields increase in line with user specified font-sizes */
-    line-height: 1.4285714285714;
+    line-height: @aui-form-field-line-height;
     margin: 0;
     padding: 0;
 }
@@ -392,7 +393,7 @@
     display: inline-block;
     filter: none;
     height: 2.1428571428571em; /* 30px - using ems so the fields increase in line with user specified font-sizes */
-    line-height: 1.4285714285714;
+    line-height: @aui-form-field-line-height;
     margin: 0;
     padding: 4px 10px;
     text-decoration: none;

package/src/less/form-notification.less

@@ -1,5 +1,6 @@
 @import (reference) './imports/global';
 @import (reference) './imports/aui-theme/components/forms';
+@import (reference) './imports/mixins/shadows';
 /*
     Icons.
 */
@@ -42,9 +43,11 @@ form.aui {
     .select {
         &[data-aui-notification-error] {
             border-color: @aui-notification-error-color;
+            #aui.with-box-shadow(@aui-notification-error-color, @inset: true, @width: 1px);
         }
         &[data-aui-notification-success] {
             border-color: @aui-notification-success-color;
+            #aui.with-box-shadow(@aui-notification-success-color, @inset: true, @width: 1px);
         }
     }
 }

package/src/less/forms-current.less

@@ -73,7 +73,9 @@ form.aui:not(.aui-legacy-forms) {
     .select {
         #aui.transition(background-color @aui-form-transition-time ease-in-out);
         #aui.transition(border-color @aui-form-transition-time ease-in-out);
+        #aui.transition(box-shadow @aui-form-transition-time ease-in-out);
         border: @aui-form-field-border-width solid @aui-form-field-border-color;
+        #aui-forms.with-design-tokens-dependent-border-width();
         border-radius: @aui-form-field-border-radius;
         box-sizing: border-box;
         font-size: inherit;
@@ -85,7 +87,9 @@ form.aui:not(.aui-legacy-forms) {
     .aui-select2-container .select2-choices {
         #aui.transition(background-color @aui-form-transition-time ease-in-out);
         #aui.transition(border-color @aui-form-transition-time ease-in-out);
+        #aui.transition(box-shadow @aui-form-transition-time ease-in-out);
         border: @aui-form-field-border-width solid var(--aui-select2-field-border-color);
+        #aui-forms.with-design-tokens-dependent-border-width();
         border-radius: @aui-form-field-border-radius;
         box-sizing: border-box;
         font-size: inherit;
@@ -104,7 +108,7 @@ form.aui:not(.aui-legacy-forms) {
     .select,
     .aui-select2-container .select2-choices {
         height: @aui-form-field-height;
-        line-height: 1.4285714285714;
+        line-height: @aui-form-field-line-height;
         padding: 3px 4px;
     }
 
@@ -112,7 +116,7 @@ form.aui:not(.aui-legacy-forms) {
     .select[size],
     .multi-select {
         height: auto;
-        line-height: 1.4285714285714;
+        line-height: @aui-form-field-line-height;
         margin: 0;
         padding: 3px 4px;
     }
@@ -144,23 +148,24 @@ form.aui:not(.aui-legacy-forms) {
             #aui-forms.aui-input-field-style(focus);
         }
     }
+    .select,
+    .multi-select
+    {
+        &:focus {
+            #aui.with-focus-ring(@width: 1px, @inset: false, @set-border-color: true);
+        }
+    }
     .text,
     .password,
     .textarea,
-    .select,
-    .multi-select,
     .aui-select2-container .select2-choices {
-        // Forms get a custom "border-as-focus" style, because:
-        // a) the form field doesn't "grow" in size,
-        // b) the "focus ring" is impossible to clip when it's a border, and
-        // c) it's more in line with how Atlaskit does it.
         &:focus {
-            #aui.with-focus-border(@aui-focus-ring-color, @aui-form-field-border-width);
+            #aui.with-focus-ring(@width: 1px, @inset: true, @set-border-color: true);
         }
     }
 
     .aui-select2-container.select2-container-active .select2-choices {
-        #aui.with-focus-border();
+        #aui.with-focus-ring(@width: 1px, @inset: false, @set-border-color: true);
     }
 
     .button,

package/src/less/forms-legacy.less

@@ -37,7 +37,7 @@ form.aui.aui-legacy-forms {
     .select,
     .aui-select2-container .select2-choices {
         height: @aui-form-field-height;
-        line-height: 1.4285714285714;
+        line-height: @aui-form-field-line-height;
         padding: 4px 5px;
     }
 
@@ -45,7 +45,7 @@ form.aui.aui-legacy-forms {
     .select[size],
     .multi-select {
         height: auto;
-        line-height: 1.4285714285714;
+        line-height: @aui-form-field-line-height;
         margin: 0;
         padding: 4px 5px;
     }
@@ -89,7 +89,7 @@ form.aui.aui-legacy-forms {
     }
 
     .aui-select2-container.select2-container-active .select2-choices {
-        #aui.with-focus-border();
+        #aui.with-focus-ring(@width: 1px, @inset: true, @set-border-color: true);
     }
 
     .aui-select2-container.select2-container-multi .select2-choices {

package/src/less/forms.less

@@ -243,7 +243,7 @@ form.aui .button {
     #aui-buttons.aui-button-base();
     #aui-buttons.aui-button-style(normal);
     height: @aui-form-field-height;
-    line-height: 1.4285714285714;
+    line-height: @aui-form-field-line-height;
     margin: 0;
     padding: @aui-button-padding-y @aui-button-padding-x;
     text-decoration: none;

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

@@ -26,6 +26,7 @@
 
 @aui-form-field-border-radius: @aui-border-radius-smallish;
 @aui-form-field-border-width: 2px;
+@aui-form-field-border-width-dt: 1px;
 
 @aui-form-field-width-default: 250px;
 @aui-form-field-width-short: 75px;
@@ -34,6 +35,7 @@
 @aui-form-field-width-long: 500px;
 @aui-form-field-width-full: none;
 @aui-form-field-height: unit((30px / @aui-font-size-medium), em); // 30px - using ems so the fields increase in line with user specified font-sizes
+@aui-form-field-line-height: 1.4285714285714; // 20px
 
 @aui-form-transition-time: 0.2s;
 
@@ -81,6 +83,14 @@
         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);
     }
+
+    .with-design-tokens-dependent-border-width() {
+        border-width: @aui-form-field-border-width;
+
+        #aui-themes.when-design-tokens({
+            border-width: @aui-form-field-border-width-dt;
+        });
+    }
 }
 
 #aui-legacy-forms {

package/src/less/imports/mixins/focus.less

@@ -1,26 +1,16 @@
 @import (reference) '../aui-theme/core/colors';
+@import (reference) './shadows';
 
 @aui-focus-ring-color: var(--aui-focus);
 
 #aui {
-    .with-focus-ring(@color: @aui-focus-ring-color; @outline-width: 2px; @inset: false) {
+    .with-focus-ring(@width: 2px; @inset: false; @set-border-color: false) {
         outline-style: none;
-        & when (@inset = true) {
-            box-shadow+: inset 0 0 0 @outline-width @color;
-        }
-        & when (@inset = false) {
-            box-shadow+: 0 0 0 @outline-width @color;
-        }
-    }
 
-    .with-focus-border(@color: @aui-focus-ring-color, @outline-width: 2px) {
-        outline: none;
-        border-width: @outline-width;
-        border-color: @color;
+        #aui.with-box-shadow(@aui-focus-ring-color, @width, @inset);
 
-        &:focus-visible {
-            // Undoing the implementation in .with-focus-ring() mixin
-            box-shadow: unset;
+        & when (@set-border-color = true) {
+            border-color: @aui-focus-ring-color;
         }
     }
 

package/src/less/imports/mixins/shadows.less

@@ -46,4 +46,13 @@
             });
         }
     }
+
+    .with-box-shadow(@color; @width: 2px; @inset: false) {
+        & when (@inset = true) {
+            box-shadow+: inset 0 0 0 @width @color;
+        }
+        & when (@inset = false) {
+            box-shadow+: 0 0 0 @width @color;
+        }
+    }
 }