fix: fix sass deprecation errors (#5174)

cultureamp · Oct 17, 2024 · 52c8fc9 · 52c8fc9
1 parent 5ec320b
commit 52c8fc9
Show file tree

Hide file tree

Showing 27 changed files with 180 additions and 219 deletions.
diff --git a/.changeset/red-islands-enjoy.md b/.changeset/red-islands-enjoy.md
@@ -0,0 +1,9 @@
+---
+"@kaizen/components": patch
+---
+
+Fix sass deprecation warnings.
+
+Also fixes:
+- Button v1 right-to-left padding
+- TextField reversed success icon styles
diff --git a/packages/components/src/Avatar/Avatar.module.scss b/packages/components/src/Avatar/Avatar.module.scss
@@ -89,13 +89,13 @@ $avatar-xxl: 7.75rem;
 }
 
 .avatarImage {
-  .loading & {
-    display: none;
-  }
-
   width: 100%;
   height: 100%;
   object-fit: cover;
+
+  .loading & {
+    display: none;
+  }
 }
 
 .companyAvatarImage {

diff --git a/packages/components/src/Checkbox/Checkbox/Checkbox.module.scss b/packages/components/src/Checkbox/Checkbox/Checkbox.module.scss
@@ -10,11 +10,11 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
 
 // override bootstrap styles
 .checkbox.checkbox {
-  @include form-input-visually-hidden;
-
   width: $checkbox-size;
   height: $checkbox-size;
   margin: 0;
+
+  @include form-input-visually-hidden;
 }
 
 .checkbox:disabled {

diff --git a/...FilterMultiSelect/subcomponents/SelectionControlButton/SelectionControlButton.module.scss b/...FilterMultiSelect/subcomponents/SelectionControlButton/SelectionControlButton.module.scss
@@ -11,17 +11,20 @@ $focus-ring-offset: 1px;
 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  font-family: $typography-button-secondary-font-family;
-  font-weight: $typography-button-secondary-font-weight;
-  font-size: $typography-button-secondary-font-size;
-  line-height: $typography-button-secondary-line-height;
-  letter-spacing: $typography-button-secondary-letter-spacing;
   position: relative;
-  color: $color-blue-500;
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-xs;
   border: $border-solid-border-width $border-solid-border-style;
   border-color: $border-borderless-border-color;
   border-radius: $border-solid-border-radius;
   padding: $spacing-4 $spacing-8;
+  font-weight: $typography-button-secondary-font-weight;
+  font-family: $typography-button-secondary-font-family;
+  font-size: $typography-button-secondary-font-size;
+  line-height: $typography-button-secondary-line-height;
+  letter-spacing: $typography-button-secondary-letter-spacing;
+  color: $color-blue-500;
 
   &:focus {
     outline: none;
@@ -48,10 +51,6 @@ $focus-ring-offset: 1px;
     inset: calc(-1 * #{$focus-ring-offset});
   }
 
-  display: inline-flex;
-  gap: $spacing-xs;
-  align-items: center;
-
   // TODO: copied from Calendar button since the design is not settled
   &.isDisabled {
     pointer-events: none;

diff --git a/packages/components/src/GuidanceBlock/GuidanceBlock.module.scss b/packages/components/src/GuidanceBlock/GuidanceBlock.module.scss
@@ -178,6 +178,10 @@ $scene-illustration-size: 300px;
   @include button-reset;
 
   cursor: pointer;
+  position: absolute;
+  top: $spacing-sm;
+  right: $spacing-sm;
+  color: $color-purple-800;
 
   .icon {
     opacity: 70%;
@@ -207,11 +211,6 @@ $scene-illustration-size: 300px;
       }
     }
   }
-
-  position: absolute;
-  top: $spacing-sm;
-  right: $spacing-sm;
-  color: $color-purple-800;
 }
 
 .default {

diff --git a/packages/components/src/Input/InputRange/InputRange.module.scss b/packages/components/src/Input/InputRange/InputRange.module.scss
@@ -74,20 +74,20 @@ input[type="range"].ratingScaleRange {
   }
 
   &::-webkit-slider-runnable-track {
-    @include track;
-
     margin: $spacing-sm 0;
+
+    @include track;
   }
 
   &::-moz-range-track {
     @include track;
   }
 
   &::-webkit-slider-thumb {
-    @include thumb;
-
     -webkit-appearance: none;
     margin-top: calc((#{$thumb-height-with-border}/ 2) * -1);
+
+    @include thumb;
   }
 
   &::-moz-range-thumb {

diff --git a/packages/components/src/Input/InputSearch/InputSearch.module.scss b/packages/components/src/Input/InputSearch/InputSearch.module.scss
@@ -29,10 +29,6 @@ $classname--input: '.input[type="search"]';
 #{$classname--input} {
   @include form-input-reset;
 
-  @include form-input-placeholder {
-    opacity: 100%;
-  }
-
   display: flex;
   align-items: center;
   height: $input-height;
@@ -44,6 +40,10 @@ $classname--input: '.input[type="search"]';
   font-size: 1rem;
   line-height: 1.5;
 
+  @include form-input-placeholder {
+    opacity: 100%;
+  }
+
   &::-webkit-search-cancel-button {
     -webkit-appearance: none;
   }
@@ -113,14 +113,14 @@ $classname--input: '.input[type="search"]';
 // Default
 .default {
   #{$classname--input} {
+    border-color: $color-gray-500;
+    background-color: $color-white;
+    color: $color-purple-800;
+
     @include form-input-placeholder {
       color: $color-purple-800;
       opacity: $input-placeholder-opacity--default;
     }
-
-    border-color: $color-gray-500;
-    background-color: $color-white;
-    color: $color-purple-800;
   }
 
   .focusRing {
@@ -135,12 +135,12 @@ $classname--input: '.input[type="search"]';
   &:hover,
   &:focus-within {
     #{$classname--input} {
+      border-color: $color-gray-600;
+      background-color: $color-gray-200;
+
       @include form-input-placeholder {
         opacity: 100%;
       }
-
-      border-color: $color-gray-600;
-      background-color: $color-gray-200;
     }
 
     .startIconAdornment {
@@ -152,14 +152,14 @@ $classname--input: '.input[type="search"]';
 // Secondary
 .secondary {
   #{$classname--input} {
+    border-color: transparent;
+    background-color: $color-gray-200;
+    color: $color-purple-800;
+
     @include form-input-placeholder {
       color: $color-purple-800;
       opacity: $input-placeholder-opacity--default;
     }
-
-    border-color: transparent;
-    background-color: $color-gray-200;
-    color: $color-purple-800;
   }
 
   .focusRing {
@@ -174,12 +174,12 @@ $classname--input: '.input[type="search"]';
   &:hover,
   &:focus-within {
     #{$classname--input} {
+      border-color: transparent;
+      background-color: $color-gray-300;
+
       @include form-input-placeholder {
         opacity: 100%;
       }
-
-      border-color: transparent;
-      background-color: $color-gray-300;
     }
 
     .startIconAdornment {
@@ -191,13 +191,13 @@ $classname--input: '.input[type="search"]';
 // Reversed
 .reversed {
   #{$classname--input} {
+    background: rgba($color-white-rgb, 0.1);
+    color: $color-white;
+
     @include form-input-placeholder {
       color: $color-white;
       opacity: $input-placeholder-opacity--reversed;
     }
-
-    background: rgba($color-white-rgb, 0.1);
-    color: $color-white;
   }
 
   .focusRing {

diff --git a/packages/components/src/LikertScaleLegacy/LikertScaleLegacy.module.scss b/packages/components/src/LikertScaleLegacy/LikertScaleLegacy.module.scss
@@ -170,6 +170,13 @@ $blue-fifth: $color-blue-500;
 .likertItem {
   margin-right: 2px;
   margin-left: 2px;
+  font-size: 1px;
+  line-height: 1;
+  padding: 0;
+  overflow-x: visible;
+  display: inline-block;
+  width: 18.5%; // 5 columns
+  position: relative;
 
   &[dir="rtl"],
   [dir="rtl"] & {
@@ -184,14 +191,6 @@ $blue-fifth: $color-blue-500;
 
   @include fill($block-height);
 
-  font-size: 1px;
-  line-height: 1;
-  padding: 0;
-  overflow-x: visible;
-  display: inline-block;
-  width: 18.5%; // 5 columns
-  position: relative;
-
   &:first-child {
     margin-right: 2px;
     margin-left: 0;

diff --git a/packages/components/src/Modal/ContextModal/ContextModal.module.scss b/packages/components/src/Modal/ContextModal/ContextModal.module.scss
@@ -14,19 +14,19 @@
   }
 
   .animatingEnter & {
-    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
-
     animation-duration: $ca-duration-fast;
     animation-fill-mode: forwards;
     animation-timing-function: $ca-bounce-in;
+
+    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
   }
 
   .animatingLeave & {
-    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
-
     animation-duration: $ca-duration-rapid;
     animation-fill-mode: forwards;
     animation-timing-function: $ca-bounce-out;
+
+    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
   }
 }
 

diff --git a/packages/components/src/Modal/GenericModal/GenericModal.module.scss b/packages/components/src/Modal/GenericModal/GenericModal.module.scss
@@ -14,22 +14,22 @@
 }
 
 .backdropLayer {
-  @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
-
   position: fixed;
   background-color: #000;
   opacity: 50%;
   z-index: $ca-z-index-modal-backdrop;
-}
 
-.scrollLayer {
   @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
+}
 
+.scrollLayer {
   position: fixed;
   display: flex;
   align-items: center;
   z-index: $ca-z-index-modal;
   overflow-y: auto;
+
+  @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
 }
 
 .modalLayer {
@@ -84,11 +84,11 @@
   }
 
   [data-modal] {
-    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
-
     animation-duration: $ca-duration-fast;
     animation-fill-mode: forwards;
     animation-timing-function: $ca-bounce-in;
+
+    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
   }
 }
 
@@ -104,11 +104,11 @@
   }
 
   [data-modal] {
-    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
-
     animation-duration: $ca-duration-rapid;
     animation-fill-mode: forwards;
     animation-timing-function: $ca-bounce-out;
+
+    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
   }
 }
 

diff --git a/packages/components/src/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.module.scss b/packages/components/src/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.module.scss
@@ -3,10 +3,10 @@
 @import "../../../../../styles/utils/layers";
 
 .dismissButton {
-  @include ca-position($end: 0, $top: 0);
-
   position: absolute;
   z-index: $ca-z-index-popover;
+
+  @include ca-position($end: 0, $top: 0);
 }
 
 .layout {

diff --git a/packages/components/src/Modal/InputEditModal/InputEditModal.module.scss b/packages/components/src/Modal/InputEditModal/InputEditModal.module.scss
@@ -10,19 +10,19 @@
   max-width: 600px;
 
   .animatingEnter & {
-    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
-
     animation-duration: $ca-duration-fast;
     animation-fill-mode: forwards;
     animation-timing-function: $ca-bounce-in;
+
+    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
   }
 
   .animatingLeave & {
-    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
-
     animation-duration: $ca-duration-rapid;
     animation-fill-mode: forwards;
     animation-timing-function: $ca-bounce-out;
+
+    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
   }
 }