@kaizen/components 1.68.4 → 1.68.6

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

@@ -87,3 +87,61 @@ export const InfoButtonLabel: Story = {
     })
   },
 }
+
+export const DoesNotStealFocusOnInitialRender: 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",
+        })
+      })
+    })
+
+    await step("Can focus to button", async () => {
+      await waitFor(() => {
+        const buttonWithInfoLabel = canvas.getByRole("button", {
+          name: "View more information: Title",
+        })
+        expect(buttonWithInfoLabel).not.toHaveFocus()
+      })
+    })
+  },
+}
+
+export const FocusOnFlip: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement)
+    const buttonWithInfoLabel = await canvas.findByRole("button", {
+      name: "View more information: Title",
+    })
+
+    await step("initial render complete", async () => {
+      expect(buttonWithInfoLabel).toBeInTheDocument()
+    })
+
+    await step("Can focus to button", async () => {
+      await waitFor(() => {
+        buttonWithInfoLabel.click()
+      })
+    })
+
+    const returnButton = canvas.getByRole("button", {
+      name: "Hide information: Title",
+    })
+
+    await step("Can click on info button again", async () => {
+      await waitFor(() => {
+        returnButton.click()
+      })
+    })
+
+    await step("Info button has focus again", async () => {
+      await waitFor(() => {
+        expect(buttonWithInfoLabel).toHaveFocus()
+      })
+    })
+  },
+}

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

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, useState } from "react"
+import React, { HTMLAttributes, useState, useRef, useEffect } from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
 import classnames from "classnames"
 import { AllowedHeadingTags, Heading } from "~components/Heading"
@@ -57,7 +57,28 @@ export const GenericTile = ({
   ...restProps
 }: GenericTileProps): JSX.Element => {
   const [isFlipped, setIsFlipped] = useState<boolean>(false)
+  const [isDocumentReady, setIsDocumentReady] = useState<boolean>(false)
+
   const { formatMessage } = useIntl()
+  const infoButtonRef = useRef<HTMLButtonElement>(null)
+  const infoButtonReturnRef = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    setIsDocumentReady(true)
+  }, [])
+
+  useEffect(() => {
+    if (!isDocumentReady) {
+      setIsDocumentReady(true)
+      return
+    }
+
+    if (isFlipped) {
+      infoButtonReturnRef.current!.focus()
+    } else {
+      infoButtonRef.current!.focus()
+    }
+  }, [isFlipped])
 
   const translatedInfoLabel = formatMessage({
     id: "kzGenericTile.infoButtonLabel",
@@ -97,6 +118,7 @@ export const GenericTile = ({
             onClick={(): void => setIsFlipped(true)}
             disabled={isFlipped}
             aria-hidden={isFlipped}
+            ref={infoButtonRef}
           />
         </div>
       )}
@@ -162,6 +184,7 @@ export const GenericTile = ({
             onClick={(): void => setIsFlipped(false)}
             disabled={!isFlipped}
             aria-hidden={!isFlipped}
+            ref={infoButtonReturnRef}
           />
         </div>
         <div className={styles.information}>

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

package/src/__future__/Tag/Tag/_docs/Tag.mdx

@@ -9,7 +9,6 @@ import * as TagStories from "./Tag.stories"
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__future__/Tag"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3293283155/Tag"
-
 />
 
 <KAIOInstallation exportNames="Tag" isFuture />
@@ -45,7 +44,7 @@ Determines the color of the background, text, and icon. This can be used to conv
 An optional icon can be passed via this prop. The icon will be rendered on the left of `children`
 in LTR, and on the right of `children` in RTL. For a list of icons, see [Icons](?path=/story/components-icons--sticker-sheet-default)
 
-<Canvas of={TagStories.Icon} />
+<Canvas of={TagStories.IconStory} />
 
 ### `classNameOverride`
 
@@ -60,4 +59,3 @@ Allows classnames to be attached to the outermost element of Tag.
 ### Migrating to future Tag
 
 See our [full guide](?path=/docs/components-tag-future-tag-migration-guide--docs) here to migrate to the future release of `Tag`.
-