@kaizen/components 1.78.0 → 1.79.0

package/src/Filter/FilterMultiSelect/subcomponents/LoadMoreButton/LoadMoreButton.module.scss

@@ -1,5 +1,7 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.container {
-  padding: $spacing-sm $spacing-sm 0;
+@layer kz-components {
+  .container {
+    padding: $spacing-sm $spacing-sm 0;
+  }
 }

package/src/Filter/FilterMultiSelect/subcomponents/MenuLayout/MenuFooter/MenuFooter.module.scss

@@ -1,9 +1,11 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.footer {
-  border-top: 1px solid rgba($color-gray-600-rgb, 0.1);
-  gap: $spacing-xs;
-  display: flex;
-  padding: $spacing-sm $spacing-sm 0;
+@layer kz-components {
+  .footer {
+    border-top: 1px solid rgba($color-gray-600-rgb, 0.1);
+    gap: $spacing-xs;
+    display: flex;
+    padding: $spacing-sm $spacing-sm 0;
+  }
 }

package/src/Filter/FilterMultiSelect/subcomponents/MenuLayout/MenuLoadingSkeleton/MenuLoadingSkeleton.module.scss

@@ -1,10 +1,12 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.loadingInput {
-  margin-bottom: $spacing-sm;
-}
+@layer kz-components {
+  .loadingInput {
+    margin-bottom: $spacing-sm;
+  }
 
-.loadingContainer {
-  margin-left: $spacing-sm;
-  margin-right: $spacing-sm;
+  .loadingContainer {
+    margin-left: $spacing-sm;
+    margin-right: $spacing-sm;
+  }
 }

package/src/Filter/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.module.scss

@@ -3,20 +3,22 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '~@kaizen/design-tokens/sass/color';
 
-// figma hard coded: https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%E2%9D%A4%EF%B8%8F-UI-Kit%3A-Heart?node-id=22814%3A96966
-$menu-container-width: 294px;
-$menu-container-max-height: 312px;
+@layer kz-components {
+  // figma hard coded: https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%E2%9D%A4%EF%B8%8F-UI-Kit%3A-Heart?node-id=22814%3A96966
+  $menu-container-width: 294px;
+  $menu-container-max-height: 312px;
 
-.menuPopup {
-  position: absolute;
-  z-index: 1000; // from $ca-z-index-dropdown
-  box-sizing: border-box;
-  background: $color-white;
-  color: $color-purple-800;
-  border-radius: $border-solid-border-radius;
-  box-shadow: $shadow-large-box-shadow;
-  padding: $spacing-sm 0;
-  margin-top: $spacing-xs;
-  text-align: start;
-  width: $menu-container-width;
+  .menuPopup {
+    position: absolute;
+    z-index: 1000; // from $ca-z-index-dropdown
+    box-sizing: border-box;
+    background: $color-white;
+    color: $color-purple-800;
+    border-radius: $border-solid-border-radius;
+    box-shadow: $shadow-large-box-shadow;
+    padding: $spacing-sm 0;
+    margin-top: $spacing-xs;
+    text-align: start;
+    width: $menu-container-width;
+  }
 }

package/src/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.module.scss

@@ -3,110 +3,112 @@
 @import '~@kaizen/design-tokens/sass/typography';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-$iconAndBadgeHeight: $spacing-md;
-
-.icon {
-  line-height: 1;
-  height: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2);
-  width: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2);
-  border: $border-solid-border-width $border-solid-border-style;
-  border-color: $color-gray-500;
-  border-radius: $border-solid-border-radius;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-}
+@layer kz-components {
+  $iconAndBadgeHeight: $spacing-md;
+
+  .icon {
+    line-height: 1;
+    height: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2);
+    width: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2);
+    border: $border-solid-border-width $border-solid-border-style;
+    border-color: $color-gray-500;
+    border-radius: $border-solid-border-radius;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
 
-.option {
-  height: fit-content;
-  align-items: flex-start;
-  display: inline-grid;
-  grid-template-columns: $spacing-md 1fr auto;
-  gap: $spacing-xs;
-  padding: $spacing-xs;
-  position: relative;
-  font-family: $typography-paragraph-body-font-family;
-  font-size: $typography-paragraph-body-font-size;
-  letter-spacing: $typography-paragraph-body-letter-spacing;
-  font-weight: $typography-paragraph-body-font-weight;
-  line-height: $typography-paragraph-body-line-height;
-  border: $border-solid-border-width $border-solid-border-style;
-  border-color: $border-borderless-border-color;
-  border-radius: $border-solid-border-radius;
-  cursor: default;
-
-  &:hover,
-  &:active,
-  &:focus {
-    background-color: $color-blue-100;
-
-    .badge {
-      background-color: $color-white;
+  .option {
+    height: fit-content;
+    align-items: flex-start;
+    display: inline-grid;
+    grid-template-columns: $spacing-md 1fr auto;
+    gap: $spacing-xs;
+    padding: $spacing-xs;
+    position: relative;
+    font-family: $typography-paragraph-body-font-family;
+    font-size: $typography-paragraph-body-font-size;
+    letter-spacing: $typography-paragraph-body-letter-spacing;
+    font-weight: $typography-paragraph-body-font-weight;
+    line-height: $typography-paragraph-body-line-height;
+    border: $border-solid-border-width $border-solid-border-style;
+    border-color: $border-borderless-border-color;
+    border-radius: $border-solid-border-radius;
+    cursor: default;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $color-blue-100;
+
+      .badge {
+        background-color: $color-white;
+      }
+
+      .icon {
+        border-color: $color-gray-600;
+        background-color: $color-gray-200;
+      }
     }
 
-    .icon {
-      border-color: $color-gray-600;
-      background-color: $color-gray-200;
+    &.isFocused,
+    &:focus-visible {
+      background-color: $color-blue-100;
+
+      &::after {
+        $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
+
+        content: '';
+        position: absolute;
+        background: transparent;
+        border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-500;
+        border-radius: $border-focus-ring-border-radius;
+        inset: calc(-1 * #{$focus-ring-offset});
+        z-index: 1; // show border when sibling option is hovered
+      }
     }
-  }
-
-  &.isFocused,
-  &:focus-visible {
-    background-color: $color-blue-100;
 
-    &::after {
-      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
-
-      content: '';
-      position: absolute;
-      background: transparent;
-      border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-500;
-      border-radius: $border-focus-ring-border-radius;
-      inset: calc(-1 * #{$focus-ring-offset});
-      z-index: 1; // show border when sibling option is hovered
+    &:focus {
+      outline: none; // cancel browser style
     }
   }
 
-  &:focus {
-    outline: none; // cancel browser style
-  }
-}
-
-.isDisabled {
-  opacity: 30%;
-  background: none;
+  .isDisabled {
+    opacity: 30%;
+    background: none;
 
-  &:hover {
-    .icon {
-      border-color: $color-gray-500;
-    }
+    &:hover {
+      .icon {
+        border-color: $color-gray-500;
+      }
 
-    .badge {
-      background-color: $color-gray-300;
+      .badge {
+        background-color: $color-gray-300;
+      }
     }
   }
-}
 
-.badgeContainer {
-  // Must be the same height as .icon, so they align vertically
-  height: $iconAndBadgeHeight;
-  display: flex;
-  align-items: center;
-}
+  .badgeContainer {
+    // Must be the same height as .icon, so they align vertically
+    height: $iconAndBadgeHeight;
+    display: flex;
+    align-items: center;
+  }
 
-.isSelected {
-  font-weight: $typography-paragraph-bold-font-weight;
+  .isSelected {
+    font-weight: $typography-paragraph-bold-font-weight;
 
-  &.icon {
-    background-color: $color-gray-500;
-    color: $color-white;
-  }
+    &.icon {
+      background-color: $color-gray-500;
+      color: $color-white;
+    }
 
-  &:hover,
-  &:active,
-  &:focus {
-    .icon {
-      background-color: $color-gray-600;
+    &:hover,
+    &:active,
+    &:focus {
+      .icon {
+        background-color: $color-gray-600;
+      }
     }
   }
 }

package/src/Filter/FilterMultiSelect/subcomponents/NoResults/NoResults.module.scss

@@ -1,3 +1,5 @@
-.container {
-  padding: 1.125rem; // There's no spacing token for 18px -_-
+@layer kz-components {
+  .container {
+    padding: 1.125rem; // There's no spacing token for 18px -_-
+  }
 }

package/src/Filter/FilterMultiSelect/subcomponents/SearchInput/SearchInput.module.scss

@@ -1,6 +1,8 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.inputSearchContainer {
-  position: relative;
-  margin: 0 $spacing-sm;
+@layer kz-components {
+  .inputSearchContainer {
+    position: relative;
+    margin: 0 $spacing-sm;
+  }
 }

package/src/Filter/FilterMultiSelect/subcomponents/SectionDivider/SectionDivider.module.scss

@@ -1,3 +1,5 @@
-.divider {
-  margin: 0.5rem 0;
+@layer kz-components {
+  .divider {
+    margin: 0.5rem 0;
+  }
 }

package/src/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/SelectionControlButton.module.scss

@@ -4,66 +4,68 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '../../../../../styles/utils/button-reset';
 
-$focus-ring-offset: 1px;
+@layer kz-components {
+  $focus-ring-offset: 1px;
 
-.button {
-  @include button-reset;
+  .button {
+    @include button-reset;
 
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  position: relative;
-  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;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    position: relative;
+    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;
-  }
+    &:focus {
+      outline: none;
+    }
 
-  &:hover,
-  &:active,
-  &:focus {
-    &:not(.isDisabled) {
-      background-color: $color-blue-100;
+    &:hover,
+    &:active,
+    &:focus {
+      &:not(.isDisabled) {
+        background-color: $color-blue-100;
+      }
     }
-  }
 
-  &:focus-visible::after {
-    $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
+    &:focus-visible::after {
+      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
 
-    content: '';
-    position: absolute;
-    background: transparent;
-    border-radius: $border-focus-ring-border-radius;
-    border-width: $border-focus-ring-border-width;
-    border-style: $border-focus-ring-border-style;
-    border-color: $color-blue-500;
-    inset: calc(-1 * #{$focus-ring-offset});
-  }
+      content: '';
+      position: absolute;
+      background: transparent;
+      border-radius: $border-focus-ring-border-radius;
+      border-width: $border-focus-ring-border-width;
+      border-style: $border-focus-ring-border-style;
+      border-color: $color-blue-500;
+      inset: calc(-1 * #{$focus-ring-offset});
+    }
 
-  // TODO: copied from Calendar button since the design is not settled
-  &.isDisabled {
-    pointer-events: none;
-    color: rgba($color-purple-800-rgb, 0.3);
-    opacity: 100%;
+    // TODO: copied from Calendar button since the design is not settled
+    &.isDisabled {
+      pointer-events: none;
+      color: rgba($color-purple-800-rgb, 0.3);
+      opacity: 100%;
 
-    &:focus {
-      outline: none;
-      border: 2px solid transparent;
-    }
+      &:focus {
+        outline: none;
+        border: 2px solid transparent;
+      }
 
-    &:focus-visible::after {
-      border-color: $color-gray-400;
+      &:focus-visible::after {
+        border-color: $color-gray-400;
+      }
     }
   }
 }

package/src/Filter/FilterMultiSelect/subcomponents/Trigger/RemovableFilterTrigger/RemovableFilterTrigger.module.css

@@ -1,3 +1,5 @@
-.filterButtonRemovable {
-  width: 100%;
+@layer kz-components {
+  .filterButtonRemovable {
+    width: 100%;
+  }
 }

package/src/Filter/FilterSelect/FilterSelect.module.css

@@ -1,8 +1,10 @@
-/*  This a temporary fix to increase specificity, until we figure out why this CSS is being compiled later than the padding in the FilterContents sub-component */
-.filterContents.filterContents {
-  box-sizing: border-box;
-  min-width: 12.25rem; /* 196px */
-  max-width: 25rem; /* 400px */
-  overflow: auto;
-  padding: unset; /* Padding is added by <SelectPopoverContents> */
+@layer kz-components {
+  /*  This a temporary fix to increase specificity, until we figure out why this CSS is being compiled later than the padding in the FilterContents sub-component */
+  .filterContents.filterContents {
+    box-sizing: border-box;
+    min-width: 12.25rem; /* 196px */
+    max-width: 25rem; /* 400px */
+    overflow: auto;
+    padding: unset; /* Padding is added by <SelectPopoverContents> */
+  }
 }

package/src/Focusable/Focusable.module.scss

@@ -1,3 +1,5 @@
-.focusableWrapper {
-  display: inline-flex;
+@layer kz-components {
+  .focusableWrapper {
+    display: inline-flex;
+  }
 }