@kaizen/components 0.0.0-canary-test-cherry-picked-updates-20250702235156 → 0.0.0-canary-ssr-generic-modal-1-20250709023540

package/src/__next__/Tabs/subcomponents/TabPanel/TabPanel.module.css

@@ -1,12 +1,14 @@
-.tabPanel {
-  border: 2px solid transparent;
+@layer kz-components {
+  .tabPanel {
+    border: 2px solid transparent;
 
-  &:focus {
-    outline: none;
-  }
+    &:focus {
+      outline: none;
+    }
 
-  &:focus-visible {
-    border-color: var(--color-blue-500);
-    border-radius: var(--border-focus-ring-border-radius);
+    &:focus-visible {
+      border-color: var(--color-blue-500);
+      border-radius: var(--border-focus-ring-border-radius);
+    }
   }
 }

package/src/__next__/Tag/RemovableTag/RemovableTag.module.scss

@@ -1,7 +1,9 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.removableTag {
-  padding: $spacing-4 $spacing-4 $spacing-4 $spacing-8;
-  padding-block: $spacing-4;
-  padding-inline: $spacing-8 $spacing-4;
+@layer kz-components {
+  .removableTag {
+    padding: $spacing-4 $spacing-4 $spacing-4 $spacing-8;
+    padding-block: $spacing-4;
+    padding-inline: $spacing-8 $spacing-4;
+  }
 }

package/src/__next__/Tag/RemovableTag/subcomponents/RemoveButton.module.scss

@@ -2,33 +2,35 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '../../../../../styles/utils/button-reset';
 
-.removeButton {
-  @include button-reset;
+@layer kz-components {
+  .removeButton {
+    @include button-reset;
 
-  position: relative;
-  display: inline-flex;
-  border-radius: 50%;
-  color: rgba($color-purple-800-rgb, 0.7);
+    position: relative;
+    display: inline-flex;
+    border-radius: 50%;
+    color: rgba($color-purple-800-rgb, 0.7);
 
-  &:focus,
-  &:focus-visible {
-    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-      var(--color-blue-500);
-    outline-offset: 1px;
-  }
+    &:focus,
+    &:focus-visible {
+      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+        var(--color-blue-500);
+      outline-offset: 1px;
+    }
 
-  &::before {
-    position: absolute;
-    content: '';
-    inset: -5px;
-    border-radius: 50%;
-  }
+    &::before {
+      position: absolute;
+      content: '';
+      inset: -5px;
+      border-radius: 50%;
+    }
 
-  &:hover,
-  &:focus,
-  &:focus-visible {
-    background-color: rgba($color-gray-600-rgb, 0.2);
-    cursor: pointer;
-    color: $color-purple-800;
+    &:hover,
+    &:focus,
+    &:focus-visible {
+      background-color: rgba($color-gray-600-rgb, 0.2);
+      cursor: pointer;
+      color: $color-purple-800;
+    }
   }
 }

package/src/__next__/Tag/Tag/Tag.module.scss

@@ -2,78 +2,80 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/typography';
 
-.tag {
-  display: inline-flex;
-  align-items: center;
-  padding: $spacing-4 $spacing-8;
-  gap: $spacing-4;
-  border-radius: 28px;
-  font-family: $typography-paragraph-intro-lede-font-family;
-  font-size: $typography-paragraph-small-font-size;
-  font-weight: $typography-paragraph-small-font-weight;
-  line-height: $typography-paragraph-small-line-height;
-  white-space: nowrap;
-}
+@layer kz-components {
+  .tag {
+    display: inline-flex;
+    align-items: center;
+    padding: $spacing-4 $spacing-8;
+    gap: $spacing-4;
+    border-radius: 28px;
+    font-family: $typography-paragraph-intro-lede-font-family;
+    font-size: $typography-paragraph-small-font-size;
+    font-weight: $typography-paragraph-small-font-weight;
+    line-height: $typography-paragraph-small-line-height;
+    white-space: nowrap;
+  }
 
-.iconContainer {
-  display: inline-flex;
-}
+  .iconContainer {
+    display: inline-flex;
+  }
 
-.gray {
-  background-color: $color-gray-300;
-  color: $color-purple-800;
-}
+  .gray {
+    background-color: $color-gray-300;
+    color: $color-purple-800;
+  }
 
-.blue {
-  background-color: $color-blue-100;
-  color: $color-blue-700;
+  .blue {
+    background-color: $color-blue-100;
+    color: $color-blue-700;
 
-  .iconContainer {
-    color: $color-blue-500;
+    .iconContainer {
+      color: $color-blue-500;
+    }
   }
-}
 
-.green {
-  background-color: $color-green-100;
-  color: $color-green-700;
+  .green {
+    background-color: $color-green-100;
+    color: $color-green-700;
 
-  .iconContainer {
-    color: $color-green-500;
+    .iconContainer {
+      color: $color-green-500;
+    }
   }
-}
-
-.yellow {
-  background-color: $color-yellow-100;
-  color: $color-yellow-700;
 
-  .iconContainer {
+  .yellow {
+    background-color: $color-yellow-100;
     color: $color-yellow-700;
+
+    .iconContainer {
+      color: $color-yellow-700;
+    }
   }
-}
 
-.orange {
-  background-color: $color-orange-100;
-  color: $color-orange-700;
+  .orange {
+    background-color: $color-orange-100;
+    color: $color-orange-700;
 
-  .iconContainer {
-    color: $color-orange-500;
+    .iconContainer {
+      color: $color-orange-500;
+    }
   }
-}
 
-.red {
-  background-color: $color-red-100;
-  color: $color-red-700;
+  .red {
+    background-color: $color-red-100;
+    color: $color-red-700;
 
-  .iconContainer {
-    color: $color-red-500;
+    .iconContainer {
+      color: $color-red-500;
+    }
   }
-}
 
-.purple {
-  background-color: $color-purple-100;
-  color: $color-purple-700;
+  .purple {
+    background-color: $color-purple-100;
+    color: $color-purple-700;
 
-  .iconContainer {
-    color: $color-purple-500;
+    .iconContainer {
+      color: $color-purple-500;
+    }
   }
 }

package/src/__next__/Tooltip/OverlayArrow.module.scss

@@ -1,43 +1,45 @@
 @import '~@kaizen/design-tokens/sass/shadow';
 @import '~@kaizen/design-tokens/sass/color';
 
-.overlayArrow {
-  display: flex;
-
-  // for correct arrow positioning with rounded corners we need to do bit trickery here
-  // the positioning is done in js in RAC and works by first getting size of arrow without data-placement, and isn't recomputed after update
-  // so we first set padding on arrow from all sides (that'll be used for start position computation)
-  // and then we remove it from the oposite axis
-  padding: 8px;
-
-  &[data-placement='top'],
-  &[data-placement='bottom'] {
-    padding: 0 8px;
-  }
-
-  &[data-placement='left'],
-  &[data-placement='right'] {
-    padding: 8px 0;
-  }
-
-  path {
-    fill: $color-purple-800;
-    box-shadow: $shadow-small-box-shadow;
-  }
-
-  &[data-placement='right'] svg {
-    transform: rotate(90deg);
-  }
-
-  &[data-placement='bottom'] svg {
-    transform: rotate(180deg);
-  }
-
-  &[data-placement='left'] svg {
-    transform: rotate(270deg);
-  }
-
-  &.reversed path {
-    fill: $color-white;
+@layer kz-components {
+  .overlayArrow {
+    display: flex;
+
+    // for correct arrow positioning with rounded corners we need to do bit trickery here
+    // the positioning is done in js in RAC and works by first getting size of arrow without data-placement, and isn't recomputed after update
+    // so we first set padding on arrow from all sides (that'll be used for start position computation)
+    // and then we remove it from the oposite axis
+    padding: 8px;
+
+    &[data-placement='top'],
+    &[data-placement='bottom'] {
+      padding: 0 8px;
+    }
+
+    &[data-placement='left'],
+    &[data-placement='right'] {
+      padding: 8px 0;
+    }
+
+    path {
+      fill: $color-purple-800;
+      box-shadow: $shadow-small-box-shadow;
+    }
+
+    &[data-placement='right'] svg {
+      transform: rotate(90deg);
+    }
+
+    &[data-placement='bottom'] svg {
+      transform: rotate(180deg);
+    }
+
+    &[data-placement='left'] svg {
+      transform: rotate(270deg);
+    }
+
+    &.reversed path {
+      fill: $color-white;
+    }
   }
 }

package/src/__next__/Tooltip/Tooltip.module.scss

@@ -5,51 +5,53 @@
 @import '~@kaizen/design-tokens/sass/typography';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.tooltip {
-  max-width: 200px;
-  padding: $spacing-8 $spacing-12;
-  color: $color-white;
-  text-align: center;
-  font-family: $typography-paragraph-extra-small-font-family;
-  font-size: $typography-paragraph-extra-small-font-size;
-  font-weight: $typography-paragraph-extra-small-font-weight;
-  letter-spacing: $typography-paragraph-extra-small-letter-spacing;
-  line-height: $typography-paragraph-extra-small-line-height;
-  border-radius: $border-solid-border-radius;
-  box-shadow: $shadow-small-box-shadow;
-  background-color: $color-purple-800;
-  text-wrap: pretty;
+@layer kz-components {
+  .tooltip {
+    max-width: 200px;
+    padding: $spacing-8 $spacing-12;
+    color: $color-white;
+    text-align: center;
+    font-family: $typography-paragraph-extra-small-font-family;
+    font-size: $typography-paragraph-extra-small-font-size;
+    font-weight: $typography-paragraph-extra-small-font-weight;
+    letter-spacing: $typography-paragraph-extra-small-letter-spacing;
+    line-height: $typography-paragraph-extra-small-line-height;
+    border-radius: $border-solid-border-radius;
+    box-shadow: $shadow-small-box-shadow;
+    background-color: $color-purple-800;
+    text-wrap: pretty;
 
-  /* fixes FF gap */
-  transform: translate3d(0, 0, 0);
+    /* fixes FF gap */
+    transform: translate3d(0, 0, 0);
 
-  &.reversed {
-    background-color: $color-white;
-    color: $color-purple-800;
-  }
+    &.reversed {
+      background-color: $color-white;
+      color: $color-purple-800;
+    }
 
-  &[data-placement='top'] {
-    --origin: translateY(4px);
-  }
+    &[data-placement='top'] {
+      --origin: translateY(4px);
+    }
 
-  &[data-placement='bottom'] {
-    --origin: translateY(-4px);
-  }
+    &[data-placement='bottom'] {
+      --origin: translateY(-4px);
+    }
 
-  &[data-placement='right'] {
-    --origin: translateX(-4px);
-  }
+    &[data-placement='right'] {
+      --origin: translateX(-4px);
+    }
 
-  &[data-placement='left'] {
-    --origin: translateX(4px);
-  }
+    &[data-placement='left'] {
+      --origin: translateX(4px);
+    }
 
-  &[data-entering] {
-    animation: slide $animation-duration-fast;
-  }
+    &[data-entering] {
+      animation: slide $animation-duration-fast;
+    }
 
-  &[data-exiting] {
-    animation: slide $animation-duration-fast reverse $animation-easing-function-ease-in;
+    &[data-exiting] {
+      animation: slide $animation-duration-fast reverse $animation-easing-function-ease-in;
+    }
   }
 }
 

package/src/__next__/Tooltip/_docs/Tooltip--migration-guide.mdx

@@ -0,0 +1,62 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Components/Tooltip/Migration guide" />
+
+# Tooltip migration guide
+
+## Audience
+
+This guide is relevant for Kaizen All-In-One (KAIO) v1 consumers.
+
+## Purpose
+
+This guide provides instructions for migrating tooltip usage from the `deprecated` (`@kaizen/components`) `Tooltip` component to the `next` (`@kaizen/components/next`) `Tooltip` component.
+
+This migration is a prerequisite for [migrating to KAIO v2](/docs/releases-upcoming-major-releases--docs).
+
+## Key API changes
+
+The `next` tooltip separates its functionality into two distinct components:
+
+- `TooltipTrigger` component wraps the `Tooltip` component and its trigger element, and controls open and close interactions.
+- `Tooltip` component provides the tooltip's content and controls its placement.
+
+Other notable changes:
+
+- `animationDuration` prop is retired
+- `children` prop becomes `TooltipTrigger.Children`
+- `display` prop is retired
+- `isInitiallyVisible` prop becomes `Tooltip.defaultOpen`
+- `mood` prop is retired
+  - This change aligns with a broader move towards more judicious use of colour
+- `portalSelector` prop is retired
+  - Where needed, [PortalProvider](https://react-spectrum.adobe.com/react-aria/PortalProvider.html) can be used to control portalling behaviour
+- `position` prop becomes `Tooltip.placement`, and values are mapped as follows:
+  - `above` becomes `top`
+  - `below` becomes `bottom`
+  - `left` becomes `start`
+  - `right` becomes `end`
+- `text` prop becomes `Tooltip.Children`
+
+## Migration example
+
+### Before
+
+```tsx
+<Tooltip text="Content" position="above">
+  <Button>Trigger</Button>
+</Tooltip>
+```
+
+### After
+
+```tsx
+<TooltipTrigger>
+  <Button>Trigger</Button>
+  <Tooltip placement="top">Content</Tooltip>
+</TooltipTrigger>
+```
+
+## More information
+
+More information about the `next` `Tooltip` component can be found at [API Specification](/docs/components-tooltip-tooltip-next-api-specification--docs) and [Usage Guidelines](/docs/components-tooltip-tooltip-next-usage-guidelines--docs).

package/src/__next__/Tooltip/_docs/Tooltip.spec.stories.tsx

@@ -45,23 +45,29 @@ export const OnButton: Story = {
     const button = canvas.queryByRole('button') ?? canvas.getByRole('link')
 
     await step('Hover shows', async () => {
-      await waitFor(() => userEvent.unhover(button))
+      await waitFor(() => userEvent.click(canvasElement)) // needed to refocus the browser window
+
       await userEvent.hover(button)
-      const tooltip = canvas.findByRole('tooltip')
-      await expect(await tooltip).toBeInTheDocument()
-      await expect((await tooltip).checkVisibility()).toBe(true)
+      await expect(await canvas.findByRole('tooltip')).toBeInTheDocument()
+      await expect((await canvas.findByRole('tooltip')).checkVisibility()).toBe(true)
       await expect(button).toHaveAttribute('aria-describedby', canvas.getByRole('tooltip').id)
       await userEvent.unhover(button)
     })
 
     await step('Focus shows', async () => {
+      await waitFor(() => userEvent.click(canvasElement)) // needed to refocus the browser window
+
       await userEvent.tab() // focus
-      await waitFor(() => expect(canvas.getByRole('tooltip')).toBeVisible())
+      await expect((await canvas.findByRole('tooltip')).checkVisibility()).toBe(true)
+      await expect(await canvas.findByRole('tooltip')).toBeInTheDocument()
       await userEvent.tab() // unfocus
-      await waitFor(() => expect(canvas.queryByRole('tooltip')).toBeNull())
+      waitFor(() => expect(canvas.queryByRole('tooltip')).toBeNull())
+      waitFor(async () => expect(await canvas.queryByText('Tooltip content')).toBeNull())
     })
 
     await step('Escape closes', async () => {
+      await waitFor(() => userEvent.click(canvasElement)) // needed to refocus the browser window
+
       await userEvent.tab() // focus
       await waitFor(() => expect(canvas.getByRole('tooltip')).toBeVisible())
       await userEvent.keyboard('{Escape}')

package/src/utils/AppearanceAnim.module.scss

@@ -1,15 +1,17 @@
-// Sync with ./AppearanceAnim.tsx
-$anim-duration-ms: 0.2s;
+@layer kz-components {
+  // Sync with ./AppearanceAnim.tsx
+  $anim-duration-ms: 0.2s;
 
-.defaultHiddenState {
-  opacity: 0%;
-  pointer-events: none;
-  transition: opacity $anim-duration-ms ease-out;
-  will-change: opacity;
-  display: inline;
-}
+  .defaultHiddenState {
+    opacity: 0%;
+    pointer-events: none;
+    transition: opacity $anim-duration-ms ease-out;
+    will-change: opacity;
+    display: inline;
+  }
 
-.visibleState {
-  opacity: 100%;
-  pointer-events: initial;
+  .visibleState {
+    opacity: 100%;
+    pointer-events: initial;
+  }
 }