@atlassian/aui 9.12.4 → 9.12.6

package/package.json

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

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

@@ -11,6 +11,7 @@
     @border-color: var(--aui-appheader-quicksearch-border-color);
     @text-color: var(--aui-appheader-quicksearch-text-color);
     @placeholder-color: var(--aui-appheader-quicksearch-placeholder-text-color);
+    @hover-bg-color: var(--aui-appheader-quicksearch-hover-bg-color);
     @focus-bg-color: var(--aui-appheader-quicksearch-focus-bg-color);
     @focus-text-color: var(--aui-appheader-quicksearch-focus-text-color);
     @width: 170px;
@@ -44,11 +45,12 @@
     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;
         color: @text-color;
-        height: unit((30 / @aui-font-size-medium), em); // 30px effective - need height in ems so that user-specified font-sizes apply
+        height: unit((32 / @aui-font-size-medium), em); // 32px effective - need height in ems so that user-specified font-sizes apply
         font-family: inherit;
         font-size: @aui-font-size-medium;
         padding: 0 @padding-left-right 0 @icon-gutter;
@@ -56,7 +58,11 @@
         width: @width;
 
         &::placeholder {
-            color: @placeholder-color;
+            opacity: 1;
+        }
+
+        &:hover {
+        background-color: @hover-bg-color;
         }
     }
 
@@ -97,7 +103,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-appheader.less

@@ -151,6 +151,14 @@ aui-header,
             }
         }
 
+        // Make hover shadow rounded for icon buttons
+        .aui-header-secondary > .aui-nav > li > a.aui-button-round {
+            height: auto;
+            border-radius: 100%;
+            padding: 4px;
+            margin: 0 unit((4 / @aui-font-size-medium), em);
+        }
+
         // Special-case padding to separate non-nav items from nav items.
         .aui-header-primary > .aui-nav > li > .aui-button,
         .aui-header-primary > .aui-nav > li > .aui-buttons {

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/aui-theme/core/colors.less

@@ -250,6 +250,7 @@
         --aui-appheader-quicksearch-border-color: transparent;
         --aui-appheader-quicksearch-text-color: @ak-color-B50;
         --aui-appheader-quicksearch-placeholder-text-color: @ak-color-N80;
+        --aui-appheader-quicksearch-hover-bg-color: var(--aui-appheader-quicksearch-bg-color);
         --aui-appheader-quicksearch-focus-bg-color: var(--aui-appheader-quicksearch-bg-color);
         --aui-appheader-quicksearch-focus-text-color: @ak-color-B50;
 
@@ -601,6 +602,7 @@
         --aui-appheader-quicksearch-border-color: transparent;
         --aui-appheader-quicksearch-text-color: @ak-color-B50;
         --aui-appheader-quicksearch-placeholder-text-color: @ak-color-N400;
+        --aui-appheader-quicksearch-hover-bg-color: var(--aui-appheader-quicksearch-bg-color);
         --aui-appheader-quicksearch-focus-bg-color: var(--aui-appheader-quicksearch-bg-color);
         --aui-appheader-quicksearch-focus-text-color: @ak-color-B50;
 
@@ -947,10 +949,12 @@
         --aui-appheader-item-focus-text-color: var(--ds-text, @ak-color-B50);
         --aui-appheader-item-active-bg-color: var(--ds-background-neutral-subtle-pressed, @ak-color-N90A);
         --aui-appheader-item-active-text-color: var(--ds-text, @ak-color-B50);
-        --aui-appheader-quicksearch-bg-color: var(--ds-background-neutral, @ak-color-N90A);
+        //--aui-appheader-quicksearch-bg-color: var(--ds-background-neutral, @ak-color-N90A);
+        --aui-appheader-quicksearch-bg-color: var(--ds-background-input, @ak-color-N90A);
         --aui-appheader-quicksearch-border-color: var(--ds-border-input);
         --aui-appheader-quicksearch-text-color: var(--ds-text-subtlest, @ak-color-B50);
         --aui-appheader-quicksearch-placeholder-text-color: var(--ds-text, @ak-color-N80);
+        --aui-appheader-quicksearch-hover-bg-color: var(--ds-background-input-hovered);
         --aui-appheader-quicksearch-focus-bg-color: var(--aui-appheader-quicksearch-bg-color);
         --aui-appheader-quicksearch-focus-text-color: var(--ds-text-subtlest, @ak-color-B50);
 

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;
+        }
+    }
 }