refactor(styles): use logical operators where possible (#5345)

cultureamp · Dec 4, 2024 · 2e98e43 · 2e98e43
1 parent 5775e4d
commit 2e98e43
Show file tree

Hide file tree

Showing 16 changed files with 49 additions and 263 deletions.
diff --git a/.changeset/tall-clouds-hammer.md b/.changeset/tall-clouds-hammer.md
@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+Refactor styles to not use `[dir="rtl"] &`.
diff --git a/packages/components/src/AvatarGroup/AvatarGroup.module.scss b/packages/components/src/AvatarGroup/AvatarGroup.module.scss
@@ -19,6 +19,7 @@ $avatar-lg: 4.5rem;
 }
 
 .AvatarCounter {
+  direction: ltr;
   align-items: center;
   background: $color-gray-300;
   border: 3px solid $color-white;
@@ -28,10 +29,6 @@ $avatar-lg: 4.5rem;
   display: flex;
   justify-content: center;
   overflow: hidden;
-
-  [dir="rtl"] & {
-    direction: ltr;
-  }
 }
 
 .small {

diff --git a/...ages/components/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.module.scss b/...ages/components/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.module.scss
@@ -14,13 +14,9 @@ $input-disabled-opacity: 0.3;
   border: $border-solid-border-width $border-solid-border-style transparent;
   border-radius: $border-solid-border-radius;
   position: relative;
-  right: -0.35rem;
+  inset-inline-end: -0.35rem;
   top: -40%;
 
-  [dir="rtl"] & {
-    right: 0.25rem;
-  }
-
   :focus {
     outline: none;
   }

diff --git a/packages/components/src/DateRangePicker/DateRangePicker.module.scss b/packages/components/src/DateRangePicker/DateRangePicker.module.scss
@@ -26,18 +26,14 @@ $placeholder-opacity: 0.7;
   font-weight: $typography-paragraph-body-font-weight;
   line-height: 1.5;
   letter-spacing: $typography-paragraph-body-letter-spacing;
-  text-align: left;
+  text-align: start;
   background-color: $color-white;
   background-clip: padding-box;
   border: $border-solid-border-width $border-solid-border-style $color-gray-500;
   border-radius: $border-solid-border-radius;
   margin-top: $spacing-6;
   padding: 0 $button-base-padding-horizontal;
 
-  [dir="rtl"] & {
-    text-align: right;
-  }
-
   &:focus-visible:not([disabled]),
   &:hover:not([disabled]) {
     background-color: $color-gray-200;
@@ -63,14 +59,7 @@ $placeholder-opacity: 0.7;
   }
 
   .value {
-    padding-right: $button-base-padding-horizontal;
-    padding-left: 1.75rem;
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      padding-right: 1.75rem;
-      padding-left: $button-base-padding-horizontal;
-    }
+    padding-inline: 1.75rem $button-base-padding-horizontal;
   }
 }
 
@@ -93,14 +82,7 @@ $placeholder-opacity: 0.7;
 
     color: $color-purple-800;
     opacity: $disabled-opacity;
-    right: auto;
-    left: $spacing-sm;
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      right: $spacing-sm;
-      left: auto;
-    }
+    inset-inline: $spacing-sm auto;
   }
 
   &:focus-within:not(.disabled),
@@ -111,14 +93,8 @@ $placeholder-opacity: 0.7;
   }
 
   .button {
-    padding-right: $button-base-padding-horizontal;
-    padding-left: calc(#{$spacing-md} + #{$button-icon-size});
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      padding-right: calc(#{$spacing-md} + #{$button-icon-size});
-      padding-left: $button-base-padding-horizontal;
-    }
+    padding-inline: calc(#{$spacing-md} + #{$button-icon-size})
+      $button-base-padding-horizontal;
   }
 }
 /* stylelint-enable no-descending-specificity */
diff --git a/...ges/components/src/Filter/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.module.scss b/...ges/components/src/Filter/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.module.scss
@@ -17,10 +17,6 @@ $menu-container-max-height: 312px;
   box-shadow: $shadow-large-box-shadow;
   padding: $spacing-sm 0;
   margin-top: $spacing-xs;
-  text-align: left;
+  text-align: start;
   width: $menu-container-width;
-
-  [dir="rtl"] & {
-    text-align: right;
-  }
 }
diff --git a/packages/components/src/GuidanceBlock/GuidanceBlock.module.css b/packages/components/src/GuidanceBlock/GuidanceBlock.module.css
@@ -97,20 +97,13 @@
 
   @media (width >= 1024px) {
     padding: 0 var(--spacing-12);
-    text-align: left;
+    text-align: start;
   }
 
   @media (width <= 767px) {
     margin: var(--spacing-12);
     max-width: 100%;
   }
-
-  [dir="rtl"] & {
-    @media (width >= 1024px) {
-      padding: 0 var(--spacing-12);
-      text-align: right;
-    }
-  }
 }
 
 .descriptionAndActions {
@@ -144,10 +137,6 @@
     width: 100%;
     margin-top: var(--spacing-6);
   }
-
-  [dir="rtl"] & svg {
-    transform: rotate(180deg);
-  }
 }
 
 .hidden {
@@ -202,12 +191,7 @@
   }
 
   .illustrationWrapper {
-    margin-right: var(--spacing-12);
-
-    [dir="rtl"] & {
-      margin-left: var(--spacing-12);
-      margin-right: inherit;
-    }
+    margin-inline-end: var(--spacing-12);
 
     @media (768px <= width <= 1023px) {
       padding: 0;
@@ -223,7 +207,7 @@
   }
 
   .descriptionContainer {
-    text-align: left;
+    text-align: start;
     max-width: unset;
     min-width: 320px;
 
@@ -234,18 +218,10 @@
     @media (width <= 767px) {
       margin: 0;
     }
-
-    [dir="rtl"] & {
-      text-align: right;
-
-      @media (width >= 1024px) {
-        padding: 0;
-      }
-    }
   }
 
   .buttonContainer {
-    padding-left: var(--spacing-12);
+    padding-inline-start: var(--spacing-12);
     justify-content: flex-start;
     width: unset;
     min-width: unset;
@@ -254,11 +230,6 @@
       flex-direction: row-reverse;
     }
 
-    [dir="rtl"] & {
-      padding-left: 0;
-      padding-right: var(--spacing-12);
-    }
-
     > * {
       width: unset;
     }
@@ -283,10 +254,6 @@
     .descriptionContainer {
       text-align: center;
       min-width: unset;
-
-      [dir="rtl"] & {
-        text-align: center;
-      }
     }
 
     .buttonContainer {
@@ -299,11 +266,7 @@
 
   &.centerContent.smallScreenTextAlignment {
     .descriptionContainer {
-      text-align: left;
-
-      [dir="rtl"] & {
-        text-align: right;
-      }
+      text-align: start;
     }
   }
 }

diff --git a/packages/components/src/Input/Input/Input.module.scss b/packages/components/src/Input/Input/Input.module.scss
@@ -98,14 +98,7 @@ $input-with-icon-padding: calc(
   .startIconAdornment {
     @include vertically-center-icon;
 
-    right: auto;
-    left: $spacing-sm;
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      right: $spacing-sm;
-      left: auto;
-    }
+    inset-inline: $spacing-sm auto;
   }
 
   &.withDisabled {
@@ -115,29 +108,15 @@ $input-with-icon-padding: calc(
   }
 
   .input {
-    padding-right: $input-base-padding-horizontal;
-    padding-left: $input-with-icon-padding;
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      padding-right: $input-with-icon-padding;
-      padding-left: $input-base-padding-horizontal;
-    }
+    padding-inline: $input-with-icon-padding $input-base-padding-horizontal;
   }
 }
 
 .withEndIconAdornment {
   .endIconAdornment {
     @include vertically-center-icon;
 
-    right: $spacing-sm;
-    left: auto;
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      right: auto;
-      left: $spacing-sm;
-    }
+    inset-inline: auto $spacing-sm;
   }
 
   &.withDisabled {
@@ -147,27 +126,13 @@ $input-with-icon-padding: calc(
   }
 
   .input {
-    padding-right: $input-with-icon-padding;
-    padding-left: $input-base-padding-horizontal;
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      padding-right: $input-base-padding-horizontal;
-      padding-left: $input-with-icon-padding;
-    }
+    padding-inline: $input-base-padding-horizontal $input-with-icon-padding;
   }
 }
 
 .withStartIconAdornment.withEndIconAdornment {
   .input {
-    padding-right: $input-with-icon-padding;
-    padding-left: $input-with-icon-padding;
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      padding-right: $input-with-icon-padding;
-      padding-left: $input-with-icon-padding;
-    }
+    padding-inline: $input-with-icon-padding $input-with-icon-padding;
   }
 }