@kaizen/components 1.40.5 → 1.40.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.40.5",
+  "version": "1.40.6",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -63,8 +63,8 @@
     "prosemirror-view": "^1.33.1",
     "react-animate-height": "^3.2.3",
     "react-day-picker": "^8.10.0",
-    "react-focus-lock": "^2.9.7",
-    "react-focus-on": "^3.9.1",
+    "react-focus-lock": "^2.11.2",
+    "react-focus-on": "^3.9.2",
     "react-media": "^1.10.0",
     "react-popper": "^2.3.0",
     "react-select": "^5.8.0",

package/src/BrandMoment/_docs/ExampleHeaders.scss

@@ -19,6 +19,7 @@
   flex: 0 0 50%;
   display: flex;
   justify-content: flex-end;
+  gap: $spacing-8;
 }
 
 .logoLink {

package/src/BrandMoment/_docs/ExampleHeaders.tsx

@@ -15,14 +15,12 @@ export const MinimalBasic = (): JSX.Element => (
       </a>
     </div>
     <div className={styles.headerRight}>
-      <div className="mr-8">
-        <Button
-          href="#"
-          label="Exit"
-          icon={<CloseIcon role="presentation" />}
-          secondary
-        />
-      </div>
+      <Button
+        href="#"
+        label="Exit"
+        icon={<CloseIcon role="presentation" />}
+        secondary
+      />
       <div className={styles.logoContainer}>
         <img src={assetUrl("brand/enso-default.svg")} alt="Culture Amp" />
       </div>

package/src/DatePicker/DatePicker.tsx

@@ -268,6 +268,7 @@ export const DatePicker = ({
   return (
     <FocusOn
       scrollLock={false}
+      returnFocus={false}
       onDeactivation={handleReturnFocus}
       onClickOutside={(): void => setIsOpen(false)}
       onEscapeKey={(): void => setIsOpen(false)}

package/src/Slider/Slider.module.scss

@@ -11,6 +11,10 @@
   margin-bottom: $spacing-sm;
 }
 
+.label {
+  margin-bottom: $spacing-4;
+}
+
 @media (min-width: $layout-breakpoints-medium) {
   .labelInline {
     &.wrapper {

package/src/Slider/Slider.tsx

@@ -42,7 +42,7 @@ export const Slider = ({
         )}
       >
         <div className={styles.labelWrapper}>
-          <div className="mb-4">
+          <div className={styles.label}>
             <Label
               htmlFor={id}
               labelText={labelText}

package/src/Tile/MultiActionTile/MultiActionTile.module.scss

@@ -1,3 +1,9 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+
 .actions {
   display: flex;
 }
+
+.secondaryAction {
+  margin-inline-end: $spacing-8;
+}

package/src/Tile/MultiActionTile/MultiActionTile.tsx

@@ -18,7 +18,7 @@ const renderActions = (
 ): JSX.Element => (
   <div className={styles.actions}>
     {secondaryAction && (
-      <div className="mr-8">
+      <div className={styles.secondaryAction}>
         <Action action={secondaryAction} secondary />
       </div>
     )}

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

@@ -37,6 +37,10 @@ $tilePaddingTop: $spacing-xl;
   }
 }
 
+.titleMeta {
+  padding-top: $spacing-4;
+}
+
 .face {
   position: absolute;
   background-color: $color-white;

package/src/Tile/subcomponents/GenericTile/GenericTile.tsx

@@ -57,7 +57,7 @@ export const GenericTile = ({
         {title}
       </Heading>
       {metadata && (
-        <div className="pt-4">
+        <div className={styles.titleMeta}>
           <Text variant="small" color="dark-reduced-opacity">
             {metadata}
           </Text>

package/src/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx

@@ -6,6 +6,7 @@ import {
   SuccessIcon,
 } from "~components/Icon"
 import { Text } from "~components/Text"
+import { VisuallyHidden } from "~components/VisuallyHidden"
 import styles from "./ProgressStepper.module.scss"
 
 export type ProgressStepperProps = {
@@ -93,10 +94,10 @@ export const ProgressStepper = ({
               aria-current={isCurrentStep}
             >
               <div className={styles.stepContent}>
-                <span className="sr-only">
+                <VisuallyHidden>
                   {/* will need to be translated */}
                   {accessibleName}
-                </span>
+                </VisuallyHidden>
                 <Text
                   classNameOverride={styles.stepName}
                   variant="small"

package/src/Workflow/subcomponents/Header/components/Titles/Titles.tsx

@@ -1,6 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import { Heading } from "~components/Heading"
 import { Tag, DefaultTagProps } from "~components/Tag"
+import { VisuallyHidden } from "~components/VisuallyHidden"
 import { OverrideClassName } from "~types/OverrideClassName"
 import styles from "./Titles.module.scss"
 
@@ -36,7 +37,7 @@ export const Titles = ({
         color="dark-reduced-opacity"
       >
         {workflowName}
-        <span className="sr-only">:</span>
+        <VisuallyHidden>:</VisuallyHidden>
       </Heading>
       <span>{stepName}</span>
     </Heading>

package/src/__future__/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx

@@ -6,6 +6,7 @@ import {
   SuccessIcon,
 } from "~components/Icon"
 import { Text } from "~components/Text"
+import { VisuallyHidden } from "~components/VisuallyHidden"
 import styles from "./ProgressStepper.module.scss"
 
 export type Step = {
@@ -104,10 +105,10 @@ export const ProgressStepper = ({
               aria-current={isCurrentStep}
             >
               <div className={styles.stepContent}>
-                <span className="sr-only">
+                <VisuallyHidden>
                   {/* will need to be translated */}
                   {accessibleName}
-                </span>
+                </VisuallyHidden>
                 <Text
                   classNameOverride={styles.stepName}
                   variant="small"

package/src/__future__/Workflow/subcomponents/Header/components/Titles/Titles.tsx

@@ -1,6 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import { Heading } from "~components/Heading"
 import { Tag, DefaultTagProps } from "~components/Tag"
+import { VisuallyHidden } from "~components/VisuallyHidden"
 import { OverrideClassName } from "~types/OverrideClassName"
 import styles from "./Titles.module.scss"
 
@@ -36,7 +37,7 @@ export const Titles = ({
         color="dark-reduced-opacity"
       >
         {workflowName}
-        <span className="sr-only">:</span>
+        <VisuallyHidden>:</VisuallyHidden>
       </Heading>
       <span>{stepName}</span>
     </Heading>