@kaizen/components 1.67.1 → 1.67.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.67.1",
+  "version": "1.67.2",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -119,8 +119,8 @@
     "svgo": "^3.3.2",
     "tslib": "^2.7.0",
     "tsx": "^4.19.1",
-    "@kaizen/package-bundler": "1.1.7",
-    "@kaizen/design-tokens": "10.8.0"
+    "@kaizen/design-tokens": "10.8.0",
+    "@kaizen/package-bundler": "1.1.7"
   },
   "peerDependencies": {
     "@cultureamp/i18n-react-intl": "^2.5.9",

package/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 {

package/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 {

package/src/Filter/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;

package/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 {

package/src/Input/InputRange/InputRange.module.scss

@@ -74,9 +74,9 @@ input[type="range"].ratingScaleRange {
   }
 
   &::-webkit-slider-runnable-track {
-    @include track;
-
     margin: $spacing-sm 0;
+
+    @include track;
   }
 
   &::-moz-range-track {
@@ -84,10 +84,10 @@ input[type="range"].ratingScaleRange {
   }
 
   &::-webkit-slider-thumb {
-    @include thumb;
-
     -webkit-appearance: none;
     margin-top: calc((#{$thumb-height-with-border}/ 2) * -1);
+
+    @include thumb;
   }
 
   &::-moz-range-thumb {

package/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 {

package/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;

package/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));
   }
 }
 

package/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));
   }
 }
 

package/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 {

package/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));
   }
 }
 

package/src/Notification/subcomponents/GenericNotification/_mixins.scss

@@ -282,13 +282,16 @@ $notification-slide-right: transform 300ms ease-out;
 }
 
 %ca-notification__cancel {
+  cursor: pointer;
   appearance: none;
-  background: transparent;
-  border: none;
-  font: inherit;
+  transition: none;
+  transform: none;
   margin: 0;
   padding: 0;
-  transition: none;
+  border: none;
+  background: transparent;
+  font: inherit;
+  color: $color-purple-800;
 
   .icon {
     opacity: 70%;
@@ -319,10 +322,6 @@ $notification-slide-right: transform 300ms ease-out;
     }
   }
 
-  cursor: pointer;
-  color: $color-purple-800;
-  transform: none;
-
   &:active {
     transform: translateY(1px);
   }

package/src/RichTextEditor/RichTextEditor/RichTextEditor.module.scss

@@ -6,8 +6,6 @@
 @import "../mixins";
 
 .editor > :global(.ProseMirror) {
-  @include content-styles;
-
   border-radius: $border-solid-border-radius;
   padding: $spacing-sm calc(#{$spacing-xs} * 3);
   position: relative;
@@ -15,6 +13,8 @@
     background-color $animation-duration-immediate,
     border-color $animation-duration-immediate;
 
+  @include content-styles;
+
   &:hover,
   &:focus-visible {
     border-color: $color-gray-600;

package/src/Select/Select.module.scss

@@ -47,15 +47,15 @@ $focus-border-color: $color-blue-500;
   }
 
   .control {
-    &.disabled {
-      opacity: 30%;
-    }
-
     min-height: $input-height;
     border: $border-solid-border-width $border-solid-border-style
       $color-gray-500;
     border-radius: $border-solid-border-radius;
 
+    &.disabled {
+      opacity: 30%;
+    }
+
     &:hover {
       border-color: $color-gray-600;
       background-color: $color-gray-100;
@@ -148,12 +148,12 @@ $focus-border-color: $color-blue-500;
   }
 
   .selectedOption {
+    font-weight: $typography-paragraph-bold-font-weight;
+    color: $color-blue-500;
+
     &:not(.focusedOption) {
       background-color: transparent;
     }
-
-    font-weight: $typography-paragraph-bold-font-weight;
-    color: $color-blue-500;
   }
 
   .disabledOption {

package/src/Table/Table.module.scss

@@ -14,7 +14,9 @@ $row-height-data-variant: 48px;
   text-decoration: none;
   color: $color-purple-800;
   display: block;
+}
 
+@mixin anchor-reset-pseudo-states {
   &:hover,
   &:active,
   &:focus {
@@ -94,6 +96,8 @@ $row-height-data-variant: 48px;
   // Ensures that the 100% doesn't go outside of the `headerRowCell` width
   box-sizing: border-box;
 
+  @include anchor-reset-pseudo-states;
+
   &:focus-visible {
     outline: none;
     position: relative;
@@ -161,8 +165,12 @@ $row-height-data-variant: 48px;
 
 .card {
   @include button-reset;
+  // These css properties are required for when the rows are anchor elements
+  @include anchor-reset;
 
-  background: $color-white;
+  // This is an optical hack to stop the card shadow from overlapping over
+  // the proceeding cards
+  box-shadow: 0 4px 6px rgba(53, 55, 74, 0.04);
   border: solid 1px rgba($color-purple-700-rgb, 0.1);
   transition:
     box-shadow $animation-duration-rapid,
@@ -170,13 +178,9 @@ $row-height-data-variant: 48px;
     margin $animation-duration-rapid,
     padding $animation-duration-rapid,
     width $animation-duration-rapid;
+  background: $color-white;
 
-  // This is an optical hack to stop the card shadow from overlapping over
-  // the proceeding cards
-  box-shadow: 0 4px 6px rgba(53, 55, 74, 0.04);
-
-  // These css properties are required for when the rows are anchor elements
-  @include anchor-reset;
+  @include anchor-reset-pseudo-states;
 
   &:not(:first-child) {
     margin-top: -1px;

package/src/TextArea/TextArea.module.scss

@@ -91,15 +91,15 @@ $input-disabled-border-alpha: 50%;
 
 // Reversed (Dark Backgrounds)
 .textarea.reversed {
+  border-color: rgba($color-white-rgb, 0.65);
+  background: transparent;
+  color: $color-white;
+
   @include form-input-focus-state {
     background: rgba($color-white-rgb, 0.1);
     border-color: $color-white;
   }
 
-  border-color: rgba($color-white-rgb, 0.65);
-  background: transparent;
-  color: $color-white;
-
   @include form-input-placeholder {
     line-height: 1.5;
     color: $color-white;

package/src/TextField/TextField.module.scss

@@ -1,49 +1,23 @@
-@import "~@kaizen/design-tokens/sass/color";
 @import "../../styles/utils/animation";
-@import "../../styles/utils/legacy/layout";
-@import "../../styles/utils/legacy/type";
-
-@mixin input-icon($color, $reversed) {
-  color: $color;
-
-  .withReversed & {
-    color: $reversed;
-  }
-}
 
 .input {
-  margin-top: $spacing-6;
+  margin-top: var(--spacing-6);
 }
 
-$input-disabled-opacity: 0.3;
+.icon {
+  color: var(--textfield-icon-color);
 
-///////////////////////////////////////////////////
-// VALIDATION STYLES
-///////////////////////////////////////////////////
-.success {
-  @include input-icon($color-green-500, $color-green-400);
   @include ca-animation-fade(in);
-
-  &.disabled {
-    @include input-icon(
-      rgba($color-green-500-rgb, $input-disabled-opacity),
-      rgba($color-green-400-rgb, $input-disabled-opacity)
-    );
-  }
 }
 
-.error {
-  @include input-icon($color-red-100, $color-purple-700);
-  @include ca-animation-fade(in);
-}
+.success {
+  --textfield-icon-color: var(--color-green-500);
 
-.caution {
-  @include input-icon($color-yellow-200, $color-purple-700);
-  @include ca-animation-fade(in);
+  .reversed & {
+    --textfield-icon-color: var(--color-green-400);
+  }
 }
 
-.message {
-  &.disabled {
-    opacity: $input-disabled-opacity;
-  }
+.disabled {
+  opacity: 0.3;
 }

package/src/TextField/TextField.tsx

@@ -62,10 +62,7 @@ export const TextField = ({
       id={`${id}-field-group`}
       data-testid={`${id}-field-group`}
       inline={inline}
-      classNameOverride={classnames(
-        styles.withLabel,
-        disabled && styles.withDisabled
-      )}
+      classNameOverride={classnames(reversed && styles.reversed)}
     >
       <Label
         id={`${id}-field-label`}
@@ -88,6 +85,7 @@ export const TextField = ({
           status === "success" && (
             <div
               className={classnames(
+                styles.icon,
                 styles.success,
                 disabled && styles.disabled
               )}

package/src/TextField/_docs/TextField.stickersheet.stories.tsx

@@ -34,7 +34,7 @@ const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <StickerSheet isReversed={isReversed}>
       <StickerSheet.Header
-        headings={["Default", "Hover", "Active", "Focus"]}
+        headings={["Default", "Hover", "Active", "Focus", "Disabled"]}
         hasVerticalHeadings
       />
       <StickerSheet.Body>
@@ -71,6 +71,14 @@ const StickerSheetTemplate: StickerSheetStory = {
               validationMessage="A valid question"
               data-sb-pseudo-styles="focus"
             />
+            <TextFieldExampleGroup
+              reversed={isReversed}
+              labelText="TextField"
+              description="A short description"
+              status={status}
+              validationMessage="A valid question"
+              disabled
+            />
           </StickerSheet.Row>
         ))}
       </StickerSheet.Body>

package/src/Tile/subcomponents/GenericTile/GenericTile.module.scss

@@ -13,19 +13,18 @@ $tilePaddingTop: $spacing-xl;
 }
 
 .tile {
+  position: relative;
   width: $tileWidth;
-
-  [data-tile-grid] & {
-    width: auto;
-  }
-
   height: $tileHeight;
-  position: relative;
-  box-shadow: $shadow-small-box-shadow;
-  background-color: $color-white;
   transition: transform $ca-duration-slow $ca-default;
   transform-style: preserve-3d;
+  box-shadow: $shadow-small-box-shadow;
   border-radius: 7px;
+  background-color: $color-white;
+
+  [data-tile-grid] & {
+    width: auto;
+  }
 
   @include ca-media-mobile {
     width: 100%;