@atlassian/aui 9.3.4 → 9.4.2

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

@@ -27,7 +27,6 @@
     #aui.box-sizing();
     min-width: @aui-sidebar-collapsed-width;
     position: absolute;
-    z-index: @aui-z-sidebar;
 
     // when the sidebar sits over the content
     &.aui-sidebar-fly-out {
@@ -56,11 +55,12 @@
         position: absolute;
         top: 0;
         bottom: auto;
+        // explicit z-index needed in order to appear over the top of page layout's #content and #footer on the sidebar's RHS.
+        // they use padding-left to "make space" for sidebar, meaning their background-color bleeds over the top of sidebar.
+        z-index: 1;
 
         &.aui-is-docked {
             position: fixed;
-            top: 0;
-            bottom: auto;
         }
     }
 
@@ -295,6 +295,8 @@
 #content .aui-sidebar + main,
 #content + #footer {
     .aui-page-sidebar & {
+        // needs to be padding, not margin, so that horizontal scrollbars are not drawn.
+        // future iterations of page layout should use grid or flexbox and carve out explicit space for sidebar.
         padding-left: var(--aui-sidebar-width);
     }
 

package/src/less/flag.less

@@ -6,7 +6,7 @@
     position: fixed;
     top: @gutter + 55px; // height of header plus some fudge.
     right: @gutter;
-    z-index: 4000;
+    z-index: @aui-z-flag-container;
 }
 
 .aui-flag {

package/src/less/forms-current.less

@@ -243,13 +243,14 @@ 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="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');
+    @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');
 
     select[disabled]:not([size]),
     .select:not([size]) {
         background-repeat: no-repeat;
-        background-position: 100% 50%;
+        background-position: calc(100% + 1.5px) 50%;
+        background-size: 25px;
     }
 
     select.select[disabled]:not([size]) {
@@ -259,7 +260,7 @@ form.aui:not(.aui-legacy-forms) {
     }
 
     select.select:not([size]) {
-        padding-right: 22px;
+        padding-right: 20px;
         background-image: @chevron-light;
     }
 

package/src/less/forms.less

@@ -6,7 +6,6 @@
 
 form.aui {
     margin: 20px 0 0 0;
-    position: relative;
 }
 
 form.aui:first-child {

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

@@ -1,4 +1,13 @@
-@aui-z-base: 2;
-@aui-z-sidebar: @aui-z-base + 1;
-@aui-z-header: @aui-z-sidebar + 1;
-@aui-z-skip: @aui-z-header + 1;
+// See layer.js and ZINDEX_AUI_LAYER_MIN, too.
+// All modern components' z-index values should be managed by the layer manager.
+@aui-z-layer-min: 3000;
+@aui-z-dropdown: @aui-z-layer-min;
+@aui-z-inline-dialog: @aui-z-layer-min;
+@aui-z-modal-dialog: @aui-z-layer-min;
+
+// Additional manually-configured indexes, because sometimes we need things to be above or below the base.
+@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
+@aui-z-tooltip: @aui-z-layer-min + 2000; // so they appear over the top of pretty much everything

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: @canvas-padding;
+        right: 3.5px;
         top: 50%;
         text-indent: 0; // Reset indentation set by split button
         width: @glyphsize;

package/src/less/inline-dialog.less

@@ -12,7 +12,6 @@ aui-inline-dialog {
 
     display: block;
     position: absolute;
-    z-index: 100;
 
     // Handle FOUC
     &:not([resolved]) {
@@ -159,7 +158,6 @@ aui-inline-dialog {
 .aui-inline-dialog {
     display: none;
     position: absolute;
-    z-index: 100;
 
     .aui-inline-dialog-contents,
     .contents {

package/src/less/layer.less

@@ -23,7 +23,7 @@
     position: fixed;
     top: 0;
     width: 100%;
-    z-index: 2500;
+    z-index: @aui-z-blanket;
 
     &:not([hidden]) {
         #aui.transition.fadeIn(@aui-blanket-fade-time, @aui-blanket-fade-delay);

package/src/less/messages.less

@@ -51,11 +51,6 @@ aui-message, .aui-message {
     }
 }
 
-.aui-popup .aui-message.closeable,
-.aui-dialog .aui-message.closeable {
-    z-index: 4000;
-}
-
 .aui-message-error {
     --aui-message-icolor: var(--aui-message-error-icon-color);
     --aui-message-ig: @aui-glyph-exclamation-circle;

package/src/less/single-select.less

@@ -136,8 +136,6 @@ 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);
         }
     }
 }