@kaizen/components 1.68.5 → 1.68.6

package/dist/types/__actions__/Button/v3/Button.d.ts

@@ -18,6 +18,11 @@ type ButtonBaseProps = Omit<RACButtonProps, "children"> & {
     iconPosition?: "start" | "end";
     /** Controls if the button inherits width from its parent. @default "false" */
     isFullWidth?: boolean;
+    /**
+     * Controls the reversed style of Button
+     * @deprecated Use the ReversedColors Provider instead. This is here to support gradual migration to the ReversedColors Provider and will take precedence if a value is provided. {@link https://cultureamp.design/?path=/docs/actions-button-button-v3-api-specification--docs#variants}
+     */
+    isReversed?: boolean;
 };
 export type ButtonProps = ButtonBaseProps & PendingButtonProps;
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.68.5",
+  "version": "1.68.6",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

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

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

package/src/DateRangePicker/DateRangePicker.module.scss

@@ -26,7 +26,7 @@ $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;
@@ -34,10 +34,6 @@ $placeholder-opacity: 0.7;
   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 */

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

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

package/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,14 +108,7 @@ $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;
   }
 }
 
@@ -130,14 +116,7 @@ $input-with-icon-padding: calc(
   .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;
   }
 }
 

package/src/LikertScaleLegacy/LikertScaleLegacy.module.scss

@@ -39,55 +39,17 @@ $blue-fifth: $color-blue-500;
   -webkit-animation: pop cubic-bezier(0, 0.94, 0.32, 1) 0.7s 1;
 }
 
-@mixin right-likert-item($height) {
-  border-top-right-radius: $height;
-  border-bottom-right-radius: $height;
-}
-
-@mixin left-likert-item($height) {
-  border-top-left-radius: $height;
-  border-bottom-left-radius: $height;
-}
-
 @mixin fill($height) {
-  &:first-child .likertItemFill {
-    @include left-likert-item($height);
-
-    [dir="rtl"] & {
-      border-radius: 0;
-
-      @include right-likert-item($height);
-    }
-
-    &::after {
-      @include left-likert-item($height);
-
-      [dir="rtl"] & {
-        border-radius: 0;
-
-        @include right-likert-item($height);
-      }
-    }
+  &:first-child .likertItemFill,
+  &:first-child .likertItemFill::after {
+    border-start-start-radius: $height;
+    border-end-start-radius: $height;
   }
 
-  &:last-child .likertItemFill {
-    @include right-likert-item($height);
-
-    [dir="rtl"] & {
-      border-radius: 0;
-
-      @include left-likert-item($height);
-    }
-
-    &::after {
-      @include right-likert-item($height);
-
-      [dir="rtl"] & {
-        border-radius: 0;
-
-        @include left-likert-item($height);
-      }
-    }
+  &:last-child .likertItemFill,
+  &:last-child .likertItemFill::after {
+    border-start-end-radius: $height;
+    border-end-end-radius: $height;
   }
 }
 
@@ -168,8 +130,7 @@ $blue-fifth: $color-blue-500;
 }
 
 .likertItem {
-  margin-right: 2px;
-  margin-left: 2px;
+  margin-inline: 2px;
   font-size: 1px;
   line-height: 1;
   padding: 0;
@@ -178,27 +139,14 @@ $blue-fifth: $color-blue-500;
   width: 18.5%; // 5 columns
   position: relative;
 
-  &[dir="rtl"],
-  [dir="rtl"] & {
-    &:first-child {
-      margin-left: 2px;
-    }
-
-    &:last-child {
-      margin-right: 2px;
-    }
-  }
-
   @include fill($block-height);
 
   &:first-child {
-    margin-right: 2px;
-    margin-left: 0;
+    margin-inline-start: 0;
   }
 
   &:last-child {
-    margin-left: 2px;
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 
   // Hack to bridge the gaps between items so mouse always hovers on something

package/src/Tag/_docs/Tag.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls , Meta } from "@storybook/blocks"
+import { Canvas, Controls , Meta, Unstyled } from "@storybook/blocks"
 import { InlineNotification } from "~components/Notification"
 import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as TagStories from "./Tag.stories"
@@ -14,11 +14,12 @@ import * as TagStories from "./Tag.stories"
 
 />
 
-
-<InlineNotification type="cautionary" persistent>
-  {`This version of the Tag will soon be deprecated and will be removed in the next major release.
-  Import Tag from "@kaizen/components/future" for the latest version and veiw our migration guide in the Future folder` }
-</InlineNotification>
+<Unstyled>
+  <InlineNotification type="cautionary" persistent>
+    {`This version of the Tag will soon be deprecated and will be removed in the next major release.
+    Import Tag from "@kaizen/components/future" for the latest version and veiw our migration guide in the Future folder` }
+  </InlineNotification>
+</Unstyled>
 
 <KAIOInstallation exportNames="Tag" />
 

package/src/TextField/_docs/TextField.mdx

@@ -34,7 +34,7 @@ Composed of <LinkTo pageId="components-label">Label</LinkTo>, <LinkTo pageId="co
 <Canvas of={TextFieldStories.Description} />
 
 ### Icon
-<Canvas of={TextFieldStories.Icon} />
+<Canvas of={TextFieldStories.IconStory} />
 
 ### Validation
 <Canvas of={TextFieldStories.Validation} />

package/src/TitleBlockZen/subcomponents/NavigationTabs.module.scss

@@ -24,13 +24,7 @@
   letter-spacing: $typography-heading-4-letter-spacing;
   text-decoration: none;
   white-space: nowrap;
-  margin-right: $spacing-md;
-
-  &[dir="rtl"],
-  [dir="rtl"] & {
-    margin-left: $spacing-md;
-    margin-right: 0;
-  }
+  margin-inline-end: $spacing-md;
 
   &:hover {
     color: $color-white;
@@ -46,13 +40,7 @@
   }
 
   @include title-block-under-1440 {
-    margin-right: $spacing-xs;
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      margin-left: $spacing-xs;
-      margin-right: 0;
-    }
+    margin-inline-end: $spacing-xs;
   }
 
   @media (max-width: 1189px) {

package/src/TitleBlockZen/subcomponents/TitleBlockMenuItem.module.scss

@@ -16,7 +16,7 @@
   box-sizing: border-box;
   background: none;
   border: 2px transparent solid;
-  text-align: left;
+  text-align: start;
   padding: 6px calc(#{$spacing-sm} - 2px);
   margin: 0 $spacing-xs;
   min-height: calc(1.75 * #{$spacing-md});
@@ -59,10 +59,6 @@
   &:focus-visible {
     border-color: $color-blue-500;
   }
-
-  [dir="rtl"] & {
-    text-align: right;
-  }
 }
 
 .menuItem--disabled {

package/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.scss

@@ -78,13 +78,7 @@ $focus-ring-offset: 1px;
   .thumb {
     position: relative;
     right: auto;
-    left: calc(#{$spacing-md} * 1.1);
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      right: calc(#{$spacing-md} * 1.1);
-      left: auto;
-    }
+    inset-inline-start: calc(#{$spacing-md} * 1.1);
   }
 
   .checkIcon {
@@ -103,13 +97,7 @@ $focus-ring-offset: 1px;
   .thumb {
     position: relative;
     right: auto;
-    left: calc(#{$spacing-md} * -0.05);
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      right: calc(#{$spacing-md} * -0.05);
-      left: auto;
-    }
+    inset-inline-start: calc(#{$spacing-md} * -0.05);
   }
 }
 

package/src/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.css

@@ -79,17 +79,11 @@
   border: solid var(--spacing-1) var(--color-gray-300);
   margin: 0;
   border-radius: var(--border-solid-border-radius);
-  left: 100%;
+  inset-inline-start: 100%;
 
   /* sets fron the bottom to the centre of the dot */
   top: calc(100% - calc(var(--progress-stepper-indicator-size) / 2));
   transform: translateX(-50%);
-
-  [dir="rtl"] & {
-    left: unset;
-    right: 100%;
-    transform: translateX(50%);
-  }
 }
 
 .stepperDescription {

package/src/__actions__/Button/v3/Button.tsx

@@ -26,6 +26,11 @@ type ButtonBaseProps = Omit<RACButtonProps, "children"> & {
   iconPosition?: "start" | "end"
   /** Controls if the button inherits width from its parent. @default "false" */
   isFullWidth?: boolean
+  /**
+   * Controls the reversed style of Button
+   * @deprecated Use the ReversedColors Provider instead. This is here to support gradual migration to the ReversedColors Provider and will take precedence if a value is provided. {@link https://cultureamp.design/?path=/docs/actions-button-button-v3-api-specification--docs#variants}
+   */
+  isReversed?: boolean
 }
 
 export type ButtonProps = ButtonBaseProps & PendingButtonProps
@@ -45,11 +50,13 @@ export const Button = forwardRef(
       isPending,
       hasHiddenPendingLabel: propsHasHiddenPendingLabel = false,
       pendingLabel,
+      isReversed,
       ...restProps
     }: ButtonProps,
     ref: React.ForwardedRef<HTMLButtonElement>
   ) => {
-    const isReversed = useReversedColors()
+    const shouldUseReverse = useReversedColors()
+    const isReversedVariant = isReversed ?? shouldUseReverse
     const pendingProps: PendingButtonProps = isPending
       ? {
           isPending,
@@ -71,7 +78,7 @@ export const Button = forwardRef(
           styles[size],
           hasHiddenLabel && styles[`${size}IconButton`],
           isDisabled && styles.isDisabled,
-          isReversed ? styles[`${variant}Reversed`] : styles[variant],
+          isReversedVariant ? styles[`${variant}Reversed`] : styles[variant],
           isFullWidth && styles.fullWidth,
           className
         )}

package/src/__actions__/Button/v3/_docs/Button--api-specification.mdx

@@ -25,7 +25,7 @@ The following example and table showcases the essential props that enable the co
 
 <Canvas of={exampleStories.Playground} />
 
-<Controls of={exampleStories.Playground} className="mb-64" include={["children", "hasHiddenLabel", "className",  "size", "variant", "onPress", "icon", "iconPosition", "isFullWidth", "isDisabled", "isPending","pendingLabel", "hasHiddenPendingLabel" ]} />
+<Controls of={exampleStories.Playground} className="mb-64" include={["children", "hasHiddenLabel", "className",  "size", "variant", "isReversed", "onPress", "icon", "iconPosition", "isFullWidth", "isDisabled", "isPending","pendingLabel", "hasHiddenPendingLabel" ]} />
 
 ## Buttons and links
 
@@ -43,7 +43,7 @@ This is built on top of [React Aria's Button component](https://react-spectrum.a
 
 <Canvas of={exampleStories.ButtonVariants} />
 
-Reversed variants are handled via the `ReversedColors` Provider - read more on this in the [reversed colors section](#reversed-colors).
+Reversed variants are handled via the `ReversedColors` Provider.
 
 <DocsStory of={exampleStories.ButtonVariantsReversed} expanded={false} />
 

package/src/__actions__/Menu/v1/subcomponents/MenuDropdown/MenuDropdown.module.scss

@@ -16,11 +16,7 @@ $dropdown-index: 1000;
   max-height: 22rem;
   overflow: auto;
   padding: $spacing-xs 0;
-  text-align: left;
-
-  [dir="rtl"] & {
-    text-align: right;
-  }
+  text-align: start;
 }
 
 .defaultWidth {

package/src/__actions__/Menu/v1/subcomponents/MenuItem/MenuItem.module.scss

@@ -14,7 +14,7 @@
   box-sizing: border-box;
   background: none;
   border: 2px transparent solid;
-  text-align: left;
+  text-align: start;
   padding: 6px calc(#{$spacing-sm} - 2px);
   margin: 0 $spacing-xs;
   min-height: calc(1.75 * #{$spacing-md});
@@ -57,10 +57,6 @@
   &:focus-visible {
     border-color: $color-blue-500;
   }
-
-  [dir="rtl"] & {
-    text-align: right;
-  }
 }
 
 .menuItem--disabled {

package/src/__future__/Icon/Icon.module.css

@@ -32,22 +32,18 @@
   --icon-fill: 1;
 }
 
-.shouldMirrorInRTL {
-  [dir="rtl"] & {
-    transform: scale(-1, 1);
-  }
+[dir="rtl"] .shouldMirrorInRTL {
+  transform: scale(-1, 1);
 }
 
-.iconLTR {
-  [dir="rtl"] & {
-    display: none;
-  }
+[dir="rtl"] .iconLTR {
+  display: none;
 }
 
 .iconRTL {
   display: none;
+}
 
-  [dir="rtl"] & {
-    display: inherit;
-  }
+[dir="rtl"] .iconRTL {
+  display: inherit;
 }