@kaizen/components 1.68.4 → 1.68.6

package/locales/th.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "ไปที่หน้าแรก"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "ดูข้อมูลเพิ่มเติม:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "ซ่อนข้อมูล:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "การดำเนินการเพิ่มเติม"

package/locales/tl.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "Pumunta sa Home"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "Tingnan ang iba pang impormasyon"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "Itago ang impormasyon:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Karagdagang mga aksiyon"

package/locales/tr.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "Ana Sayfaya Git"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "Daha fazla bilgi görüntüleyin:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "Bilgileri gizleyin:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Ek eylemler"

package/locales/uk.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "Перейти на головну"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "Переглянути додаткову інформацію:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "Приховати інформацію:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Додаткові дії"

package/locales/vi.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "Vào Trang chủ"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "Xem thêm thông tin:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "Ẩn thông tin:"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Các hành động bổ sung"

package/locales/zh-TW.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "前往首頁"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "檢視更多資訊："
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "隱藏資訊："
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "其他行動"

package/locales/zh.json

@@ -164,6 +164,14 @@
     "description" : "Home button label",
     "message" : "转到主页"
   },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "查看更多信息："
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "隐藏信息："
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "附加操作"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.68.4",
+  "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/Tile/TileGrid/_docs/TileGrid.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { expect, waitFor, within } from "@storybook/test"
 import { InformationTile } from "~components/Tile"
 import { TileGrid } from "../index"
 
@@ -10,21 +11,21 @@ const meta = {
     children: (
       <>
         <InformationTile
-          title="Title"
+          title="Title A"
           metadata="Side A"
-          information="Side B"
+          information="Side A - Back"
           footer={<>Footer</>}
         />
         <InformationTile
-          title="Title"
-          metadata="Side A"
-          information="Side B"
+          title="Title B"
+          metadata="Side B"
+          information="Side B - Back"
           footer={<>Footer</>}
         />
         <InformationTile
-          title="Title"
-          metadata="Side A"
-          information="Side B"
+          title="Title C"
+          metadata="Side C"
+          information="Side C - Back"
           footer={<>Footer</>}
         />
       </>
@@ -45,3 +46,35 @@ export const Playground: Story = {
     },
   },
 }
+
+// Test for multiple tiles, flipping one doesn't flip others
+export const FlipOneNotOthers: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement)
+
+    await step("initial render complete", async () => {
+      await waitFor(() => {
+        canvas.getByRole("button", {
+          name: "View more information: Title A",
+        })
+      })
+    })
+
+    await step("Can focus to button", async () => {
+      await waitFor(() => {
+        const buttonWithInfoLabel = canvas.getByRole("button", {
+          name: "View more information: Title A",
+        })
+        buttonWithInfoLabel.click()
+      })
+    })
+
+    await step("Check other tiles", async () => {
+      await waitFor(() => {
+        expect(canvas.getByText("Side A - Back")).toBeInTheDocument()
+        expect(canvas.getByText("Title B")).toBeInTheDocument()
+        expect(canvas.getByText("Title C")).toBeInTheDocument()
+      })
+    })
+  },
+}