@linzjs/lui 24.15.0 → 24.16.1

package/dist/scss/Components/LuiFormElements/LuiSelectInput/LuiSelectInput.scss

@@ -19,6 +19,7 @@
 .LuiSelect-select {
   @include fonts.font-regular();
   margin-bottom: 0;
+  background: colors.$snow;
   border: 1px solid colors.$silver;
   border-radius: MiscVars.$borderRadius;
   display: block;

package/dist/scss/Elements/Buttons/buttons.scss

@@ -23,8 +23,7 @@ $btnLine-height: 24px;
   padding: toRem(7px) spacing.$unit-xs * 2; //magic number to allow for 1px border to add to height
   border: none;
   border-radius: misc.$borderRadius;
-  transition: background-color 0.3s, color 0.3s, height 0.3s, border 0.3s,
-    fill 0.3s;
+  transition: background-color 0.3s, height 0.3s, border 0.3s, fill 0.3s;
 
   i,
   svg * {
@@ -76,7 +75,7 @@ button {
   $btnBgColActive,
   $borderColActive
 ) {
-  &:hover {
+  &:hover:where(:not([aria-busy])) {
     background-color: $btnBgColHover;
     cursor: pointer;
     color: $btnTxtColHover;
@@ -89,7 +88,7 @@ button {
     }
   }
 
-  &:disabled {
+  &:disabled:where(:not([aria-busy])) {
     color: colors.$disabled-color;
     background: colors.$disabled-bg-color;
     border-color: colors.$disabled-color-dark;
@@ -105,6 +104,21 @@ button {
     }
   }
 
+  &[aria-busy] {
+    &:hover {
+      cursor: progress;
+    }
+
+    &:not(:active) {
+      transition: none;
+
+      i,
+      svg * {
+        transition: none;
+      }
+    }
+  }
+
   &:active:enabled {
     background-color: $btnBgColActive;
     cursor: pointer;
@@ -122,6 +136,62 @@ button {
   }
 }
 
+@mixin button-intent-builder(
+  $btnTxtCol,
+  $btnBgCol,
+  $btnBorderCol,
+  $btnTxtColHover,
+  $btnBgColHover,
+  $btnBorderColHover,
+  $btnTxtColActive,
+  $btnBgColActive,
+  $btnBorderColActive
+) {
+  &:not(:disabled) {
+    color: $btnTxtCol;
+  }
+
+  &:where([aria-busy]) {
+    color: $btnTxtCol;
+  }
+
+  &:not(:disabled),
+  &[aria-busy] {
+    background-color: $btnBgCol;
+    border-color: $btnBorderCol;
+
+    i,
+    svg * {
+      color: $btnTxtCol;
+      fill: $btnTxtCol;
+    }
+  }
+
+  &:hover:enabled {
+    background-color: $btnBgColHover;
+    border-color: $btnBorderColHover;
+    color: $btnTxtColHover;
+
+    i,
+    svg * {
+      color: $btnTxtColHover;
+      fill: $btnTxtColHover;
+    }
+  }
+
+  &:active:enabled {
+    background-color: $btnBgColActive;
+    border-color: $btnBorderColActive;
+    color: rgba($btnTxtColActive, 0.9);
+
+    i,
+    svg * {
+      color: rgba($btnTxtColActive, 0.9);
+      fill: rgba($btnTxtColActive, 0.9);
+    }
+  }
+}
+
 a.lui-button {
   @include button();
   display: inline-block;
@@ -137,7 +207,7 @@ a.lui-button {
       spacing.$unit-sm; // magic numbers to account for border
 
     .LuiIcon {
-      margin: 3px 0 -7px 12px; // magic numbers to allow the resize to work but to be fixed by future LUI buttons
+      margin: 3px 0 -7px 11px; // magic numbers to allow the resize to work but to be fixed by future LUI buttons
     }
 
     i {
@@ -176,8 +246,7 @@ a.lui-button {
     );
   }
 
-  &-secondary,
-  &-warning {
+  &-secondary {
     // var $btnTxtCol, $btnBgCol, $borderCol, $myStrokeWeight : 2px, $myBtnLineHeight : 40px
     @include button-builder(colors.$sea, #fff, colors.$sea);
     // var $btnTxtColHover, $btnBgColHover, $borderColHover, $btnTxtColActive, $btnBgColActive, $borderColActive
@@ -190,26 +259,27 @@ a.lui-button {
       colors.$secondary-active-btn
     );
 
-    i,
-    svg * {
-      color: colors.$sea;
-    }
-
-    &:hover i {
-      color: colors.$sea;
+    &.lui-button-danger {
+      @include button-intent-builder(
+        colors.$error,
+        colors.$white,
+        colors.$error,
+        colors.$error,
+        colors.$error-bg,
+        colors.$error,
+        colors.$error-bg,
+        colors.$error,
+        colors.$error
+      );
     }
-  }
 
-  &-warning {
     i,
     svg * {
-      fill: colors.$warning;
-      color: colors.$warning;
+      color: colors.$sea;
     }
 
-    &:hover i {
-      fill: colors.$warning-focus;
-      color: colors.$warning-focus;
+    &:hover:where(:not([aria-busy])) i {
+      color: colors.$sea;
     }
   }
 
@@ -230,21 +300,35 @@ a.lui-button {
       #fff
     );
 
+    &.lui-button-danger {
+      @include button-intent-builder(
+        colors.$error,
+        transparent,
+        transparent,
+        colors.$error,
+        colors.$error-bg,
+        colors.$error-bg,
+        colors.$error-bg,
+        colors.$error,
+        colors.$error,
+      );
+    }
+
     & {
       @include fonts.font-regular();
       border: none;
       margin: 2px; //account for the slightly smaller button size;
     }
 
-    &:hover {
+    &:hover:where(:not([aria-busy])) {
       border: none;
     }
 
-    &:active:enabled {
+    &:active:enabled:where(:not([aria-busy])) {
       border: none;
     }
 
-    &:disabled {
+    &:disabled:where(:not([aria-busy])) {
       color: colors.$disabled-color;
       background: none;
       text-decoration: none;
@@ -252,7 +336,6 @@ a.lui-button {
 
       &:hover {
         cursor: not-allowed;
-        border: none;
       }
 
       i,
@@ -264,33 +347,38 @@ a.lui-button {
   }
 
   &-success {
-    // var $btnTxtCol, $btnBgCol, $borderCol, $myStrokeWeight : 2px, $myBtnLineHeight : 40px
-    @include button-builder(#fff, colors.$green-btn, colors.$green-btn);
-    // var $btnTxtColHover, $btnBgColHover, $borderColHover, $btnTxtColActive, $btnBgColActive, $borderColActive
-    @include button-states-builder(
-      #fff,
+    @include button-intent-builder(
+      colors.$white,
+      colors.$green-btn,
+      colors.$green-btn,
+      colors.$white,
       colors.$green-hover,
       colors.$green-hover,
-      $reversed-btn-active-txt,
+      colors.$white,
       colors.$green-active,
       colors.$green-active
     );
   }
 
-  &-error {
-    // var $btnTxtCol, $btnBgCol, $borderCol, $myStrokeWeight : 2px, $myBtnLineHeight : 40px
-    @include button-builder(#fff, colors.$error, colors.$error);
-    // var $btnTxtColHover, $btnBgColHover, $borderColHover, $btnTxtColActive, $btnBgColActive, $borderColActive
-    @include button-states-builder(
-      #fff,
+  &-error, &.lui-button-primary.lui-button-danger {
+    @include button-intent-builder(
+      colors.$white,
+      colors.$error,
+      colors.$error,
+      colors.$white,
       colors.$error-hover-btn,
       colors.$error-hover-btn,
-      $reversed-btn-active-txt,
+      colors.$white,
       colors.$error-active-btn,
       colors.$error-active-btn
     );
   }
 
+  &-success, &-error {
+    line-height: $btnLine-height;
+    font-weight: 600;
+  }
+
   &-reversed-no-bg {
     // var $btnTxtCol, $btnBgCol, $borderCol, $myStrokeWeight : 2px, $myBtnLineHeight : 40px
     @include button-builder(#fff, transparent, transparent);
@@ -309,7 +397,7 @@ a.lui-button {
       top: 13px !important; // overwrite the base btn icon positioning without reworking mulitple classes
     }
 
-    &:disabled {
+    &:disabled:where(:not([aria-busy])) {
       color: $disabled-reversed-no-bg-btn-txt;
       background: none;
       border: 0;
@@ -319,10 +407,10 @@ a.lui-button {
         color: $disabled-reversed-no-bg-btn-txt;
         fill: $disabled-reversed-no-bg-btn-txt;
       }
+    }
 
-      &:hover {
-        cursor: not-allowed;
-      }
+    &:disabled:hover {
+      cursor: not-allowed;
     }
   }
 
@@ -338,6 +426,21 @@ a.lui-button {
       none,
       none
     );
+
+    &.lui-button-danger {
+      @include button-intent-builder(
+        colors.$error,
+        transparent,
+        colors.$error,
+        colors.$error-hover-btn,
+        transparent,
+        colors.$error-hover-btn,
+        colors.$error-active-btn,
+        transparent,
+        colors.$error-active-btn
+      );
+    }
+
     // border bottom mimics what we have for text link styling
     //border-bottom: 1px solid;
     & {
@@ -367,12 +470,11 @@ a.lui-button {
       }
     }
 
-    &:disabled {
+    &:disabled:where(:not([aria-busy])) {
       color: colors.$disabled-color;
       background: none;
       //border: 0;
       text-decoration: underline;
-
       &:hover {
         cursor: not-allowed;
       }
@@ -383,12 +485,30 @@ a.lui-button {
         fill: colors.$gray;
       }
     }
+
+    &[aria-busy]:hover {
+      cursor: progress;
+    }
   }
 
   &-plain-text {
     // var $btnTxtCol, $btnBgCol, $borderCol
     @include button-builder(inherit, transparent, #fff, 0);
 
+    &.lui-button-danger {
+      @include button-intent-builder(
+        colors.$error,
+        transparent,
+        colors.$error,
+        colors.$error,
+        transparent,
+        colors.$error,
+        colors.$error,
+        transparent,
+        colors.$error,
+      );
+    }
+
     & {
       // remove the padding and margin off the buttons - used for text only buttons
       padding: 0;
@@ -406,7 +526,7 @@ a.lui-button {
       fill: colors.$fuscous;
     }
 
-    &:disabled {
+    &:disabled:where(:not([aria-busy])) {
       color: colors.$disabled-color;
       background: none;
       border: 0;
@@ -421,6 +541,10 @@ a.lui-button {
         fill: colors.$disabled-color;
       }
     }
+
+    &[aria-busy]:hover {
+      cursor: progress;
+    }
   }
 
   &-icon-only {
@@ -474,9 +598,11 @@ a.lui-button {
     svg * {
       color: #fff;
     }
-    &:disabled,
-    &:disabled:hover {
+    &:disabled:where(:not([aria-busy])),
+    &:disabled:hover:where(:not([aria-busy])) {
       color: $disabled-reversed-no-bg-btn-txt;
+      background-color: transparent;
+      border: 0;
 
       i,
       svg * {
@@ -484,7 +610,7 @@ a.lui-button {
         fill: $disabled-reversed-no-bg-btn-txt;
       }
     }
-    &:hover {
+    &:hover:where(:not([aria-busy])) {
       i,
       svg * {
         color: colors.$spray;
@@ -497,6 +623,26 @@ a.lui-button {
     color: colors.$txt-link;
   }
 
+  &[aria-busy] {
+    position: relative;
+  }
+
+  &[aria-busy]:has(.lui-button-loading-spinner) {
+    color: transparent;
+
+    > *:not(.lui-button-loading-spinner) {
+      visibility: hidden;
+    }
+  }
+
+  &-loading-spinner {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   &.lui-button-sm {
     padding: toRem(3px) spacing.$unit-xs;
 
@@ -600,7 +746,11 @@ a.lui-button {
     }
 
     &.lui-button-icon-right {
-      padding: toRem(11px) spacing.$unit-sm toRem(11px) spacing.$px; // magic numbers to account for border
+      padding: toRem(11px) spacing.$unit-sm toRem(11px) toRem(16px); // magic numbers to account for border
+
+      .LuiIcon {
+        margin: 0 0 toRem(-7px) toRem(8px);
+      }
 
       i {
         position: relative;
@@ -686,7 +836,7 @@ a.lui-button {
         fill: colors.$white;
       }
       //style selected button when disabled
-      &:disabled {
+      &:disabled:where(:not([aria-busy])) {
         background-color: colors.$disabled-color;
         color: colors.$white;
         &.lui-button-icon-only svg * {
@@ -695,7 +845,7 @@ a.lui-button {
       }
     }
 
-    &:hover {
+    &:hover:where(:not([aria-busy])) {
       background: colors.$sea;
       cursor: pointer;
       color: colors.$white;
@@ -706,11 +856,13 @@ a.lui-button {
       // make sure the button sits above the others so the outline is not cut off on focus
       position: relative;
     }
-    &:disabled {
+    &:disabled:where(:not([aria-busy])) {
       background-color: colors.$disabled-bg-color;
       border: 1px solid colors.$disabled-color-dark;
       color: colors.$disabled-color;
-      cursor: not-allowed;
+      &:disabled:hover {
+        cursor: not-allowed;
+      }
       &.lui-button-icon-only svg * {
         fill: colors.$disabled-color;
       }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "24.15.0",
+  "version": "24.16.1",
   "license": "MIT",
   "repository": {
     "type": "git",