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

package/src/__next__/Select/subcomponents/SelectToggle/SelectToggle.module.scss

@@ -4,131 +4,133 @@
 @import '~@kaizen/design-tokens/sass/typography';
 @import '../../../../../styles/utils/button-reset';
 
-.iconWrapper {
-  line-height: 1;
-}
+@layer kz-components {
+  .iconWrapper {
+    line-height: 1;
+  }
 
-.icon {
-  color: $color-gray-500;
-}
+  .icon {
+    color: $color-gray-500;
+  }
+
+  .selectToggle {
+    @include button-reset;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    position: relative;
+    display: inline-flex;
+    flex: 1;
+    justify-content: space-between;
+    align-items: center;
+    height: $spacing-xl;
+    width: 100%;
+    min-width: 0;
+    margin-top: $spacing-xs;
+    border: $border-solid-border-width $border-solid-border-style $color-gray-500;
+    border-radius: $border-solid-border-radius;
+    background-color: $color-white;
+    padding-block: calc(#{$spacing-12} - #{$border-solid-border-width});
+    padding-inline: 0.875rem $spacing-12;
+    font-family: $typography-paragraph-body-font-family;
+    font-weight: $typography-paragraph-body-font-weight;
+    font-size: $typography-paragraph-body-font-size;
+    line-height: $typography-paragraph-body-line-height;
+    letter-spacing: $typography-paragraph-body-letter-spacing;
+    color: $color-purple-800;
+    white-space: nowrap;
+
+    &:hover,
+    &:active,
+    &:focus {
+      .icon {
+        color: $color-gray-600;
+      }
+    }
+
+    &:active,
+    &:hover {
+      background-color: $color-gray-200;
+      border-color: $color-gray-600;
+    }
 
-.selectToggle {
-  @include button-reset;
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  position: relative;
-  display: inline-flex;
-  flex: 1;
-  justify-content: space-between;
-  align-items: center;
-  height: $spacing-xl;
-  width: 100%;
-  min-width: 0;
-  margin-top: $spacing-xs;
-  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
-  border-radius: $border-solid-border-radius;
-  background-color: $color-white;
-  padding-block: calc(#{$spacing-12} - #{$border-solid-border-width});
-  padding-inline: 0.875rem $spacing-12;
-  font-family: $typography-paragraph-body-font-family;
-  font-weight: $typography-paragraph-body-font-weight;
-  font-size: $typography-paragraph-body-font-size;
-  line-height: $typography-paragraph-body-line-height;
-  letter-spacing: $typography-paragraph-body-letter-spacing;
-  color: $color-purple-800;
-  white-space: nowrap;
-
-  &:hover,
-  &:active,
-  &:focus {
-    .icon {
-      color: $color-gray-600;
+    &:focus {
+      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+        var(--color-blue-500);
+      outline-offset: 1px;
+      background-color: $color-gray-200;
+      border-color: $color-gray-600;
     }
   }
 
-  &:active,
-  &:hover {
-    background-color: $color-gray-200;
-    border-color: $color-gray-600;
+  .placeholder {
+    color: rgb($color-purple-800-rgb, 0.7);
   }
 
-  &:focus {
-    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-      var(--color-blue-500);
-    outline-offset: 1px;
-    background-color: $color-gray-200;
-    border-color: $color-gray-600;
+  .error {
+    border: $border-solid-border-width $border-solid-border-style $color-red-500;
   }
-}
 
-.placeholder {
-  color: rgba($color-purple-800-rgb, 0.7);
-}
+  .caution {
+    border: $border-solid-border-width $border-solid-border-style $color-yellow-600;
+  }
 
-.error {
-  border: $border-solid-border-width $border-solid-border-style $color-red-500;
-}
+  .disabled {
+    border: $border-solid-border-width $border-solid-border-style $color-gray-300;
+    background-color: $color-gray-100;
+    color: $color-gray-500;
+    pointer-events: none;
+  }
 
-.caution {
-  border: $border-solid-border-width $border-solid-border-style $color-yellow-600;
-}
+  .reversed {
+    border: $border-solid-border-width $border-solid-border-style rgba($color-white-rgb, 0.8);
+    background-color: transparent;
+    color: $color-white;
 
-.disabled {
-  border: $border-solid-border-width $border-solid-border-style $color-gray-300;
-  background-color: $color-gray-100;
-  color: $color-gray-500;
-  pointer-events: none;
-}
+    &.placeholder {
+      color: rgba($color-white-rgb, 0.65);
+    }
 
-.reversed {
-  border: $border-solid-border-width $border-solid-border-style rgba($color-white-rgb, 0.8);
-  background-color: transparent;
-  color: $color-white;
+    &.selectToggle .icon {
+      color: rgb(255, 255, 255, 0.8);
+    }
 
-  &.placeholder {
-    color: rgba($color-white-rgb, 0.65);
-  }
+    &:active,
+    &:hover,
+    &:focus {
+      background-color: rgba($color-white-rgb, 0.1);
+      border: $border-solid-border-width $border-solid-border-style $color-white;
 
-  &.selectToggle .icon {
-    color: rgb(255, 255, 255, 0.8);
-  }
+      .icon {
+        color: $color-white;
+      }
+    }
 
-  &:active,
-  &:hover,
-  &:focus {
-    background-color: rgba($color-white-rgb, 0.1);
-    border: $border-solid-border-width $border-solid-border-style $color-white;
+    &:focus {
+      outline-color: var(--color-blue-300);
+    }
 
-    .icon {
-      color: $color-white;
+    .error {
+      border-color: $color-red-300;
     }
-  }
 
-  &:focus {
-    outline-color: var(--color-blue-300);
+    .caution {
+      border-color: $color-yellow-400;
+    }
   }
 
-  .error {
-    border-color: $color-red-300;
+  .reversed.disabled {
+    background-color: transparent;
+    border-color: rgba($color-white-rgb, 0.3);
+    color: rgba($color-white-rgb, 0.3);
   }
 
-  .caution {
-    border-color: $color-yellow-400;
+  .value {
+    width: 100%;
+    text-align: start;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-inline-end: var(--spacing-12);
   }
 }
-
-.reversed.disabled {
-  background-color: transparent;
-  border-color: rgba($color-white-rgb, 0.3);
-  color: rgba($color-white-rgb, 0.3);
-}
-
-.value {
-  width: 100%;
-  text-align: start;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding-inline-end: var(--spacing-12);
-}

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

@@ -2,9 +2,17 @@ import { Meta } from '@storybook/blocks'
 
 <Meta title="Components/Tabs/Migration guide" />
 
-# Next Tabs migration guide
+# Tabs migration guide
 
-A brief guide on how and why to migrate from Kaizen's current `Tabs` to the `next` release.
+## Audience
+
+This guide is relevant for Kaizen All-In-One (KAIO) v1 consumers.
+
+## Purpose
+
+This guide provides instructions for migrating tabs usage from the `deprecated` (`@kaizen/components`) `Tabs` component to the `next` (`@kaizen/components/next`) `Tabs` component.
+
+This migration is a prerequisite for [migrating to KAIO v2](/docs/releases-upcoming-major-releases--docs).
 
 ## Why the change?
 

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

@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
-import { expect, userEvent, within } from '@storybook/test'
+import { expect, userEvent, waitFor, within } from '@storybook/test'
 import { Text } from '~components/Text'
-import { Tab, TabList, TabPanel, Tabs } from '../index'
+import { Tab, TabList, TabPanel, Tabs, type Key } from '../index'
 
 const meta = {
   title: 'Components/Tabs/Tabs (next)/Tabs (next) tests',
@@ -116,3 +116,48 @@ export const ArrowsShowingAndHidingRTL: Story = {
     expect(leftArrow).not.toBeInTheDocument()
   },
 }
+
+export const AsyncLoaded: Story = {
+  render: () => {
+    const [selectedKey, setSelectedKey] = useState<Key>(0)
+
+    const [showSecondTab, setShowSecondTab] = React.useState(false)
+    React.useEffect(() => {
+      const timer = setTimeout(() => setShowSecondTab(true), 1000)
+      return () => clearTimeout(timer)
+    }, [])
+    return (
+      <div style={{ maxWidth: '300px' }}>
+        <Tabs selectedKey={selectedKey} onSelectionChange={setSelectedKey}>
+          <TabList aria-label="Tabs" data-testid="sb-arrows">
+            <Tab id="one">Conversation</Tab>
+            {showSecondTab && <Tab id="two">Personal notes</Tab>}
+          </TabList>
+          <TabPanel id="one" className="p-24">
+            <Text variant="body">Content 1</Text>
+          </TabPanel>
+          <TabPanel id="two" className="p-24">
+            <Text variant="body">Content 2</Text>
+          </TabPanel>
+        </Tabs>
+      </div>
+    )
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+    expect(canvas.queryByTestId('kz-tablist-right-arrow')).not.toBeInTheDocument()
+    await waitFor(() => userEvent.click(canvasElement))
+    await new Promise((r) => setTimeout(r, 2000))
+
+    await step('Check if second tab is loaded', async () => {
+      await waitFor(() => {
+        expect(canvas.queryByText('Personal notes')).toBeInTheDocument()
+      })
+
+      await waitFor(async () => {
+        const rightTab = await canvas.findByTestId('sb-arrows-kz-tablist-right-arrow')
+        expect(rightTab).toBeInTheDocument()
+      })
+    })
+  },
+}

package/src/__next__/Tabs/_docs/Tabs.stories.tsx

@@ -66,11 +66,22 @@ export const Playground: Story = {
 }
 
 export const Controlled: Story = {
-  render: (args) => {
+  render: () => {
     const [selectedKey, setSelectedKey] = useState<Key>(0)
     return (
       <>
-        <Tabs {...args} selectedKey={selectedKey} onSelectionChange={setSelectedKey} />
+        <Tabs selectedKey={selectedKey} onSelectionChange={setSelectedKey}>
+          <TabList aria-label="Tabs">
+            <Tab id="one">Tab 1</Tab>
+            <Tab id="two">Tab 2</Tab>
+          </TabList>
+          <TabPanel id="one" className="p-24">
+            <Text variant="body">Content 1</Text>
+          </TabPanel>
+          <TabPanel id="two" className="p-24">
+            <Text variant="body">Content 2</Text>
+          </TabPanel>
+        </Tabs>
         <Button label="Switch to tab 2" onClick={(): void => setSelectedKey('two')} />
       </>
     )

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

@@ -1,98 +1,100 @@
-.tab {
-  display: inline-flex;
-  align-items: center;
-  border: 2px solid transparent;
-  border-bottom: 0;
-  border-top-left-radius: var(--border-borderless-border-radius);
-  border-top-right-radius: var(--border-borderless-border-radius);
-  background: var(--color-white);
-  white-space: nowrap;
-  text-decoration: none;
-  padding: var(--spacing-md) var(--spacing-md);
-  margin: 0;
-  font-family: var(--typography-heading-4-font-family);
-  font-size: var(--typography-heading-4-font-size);
-  font-weight: var(--typography-heading-4-font-weight);
-  line-height: var(--typography-heading-4-line-height);
-  letter-spacing: var(--typography-heading-4-letter-spacing);
-  color: var(--color-purple-800);
-  cursor: default;
+@layer kz-components {
+  .tab {
+    display: inline-flex;
+    align-items: center;
+    border: 2px solid transparent;
+    border-bottom: 0;
+    border-top-left-radius: var(--border-borderless-border-radius);
+    border-top-right-radius: var(--border-borderless-border-radius);
+    background: var(--color-white);
+    white-space: nowrap;
+    text-decoration: none;
+    padding: var(--spacing-md) var(--spacing-md);
+    margin: 0;
+    font-family: var(--typography-heading-4-font-family);
+    font-size: var(--typography-heading-4-font-size);
+    font-weight: var(--typography-heading-4-font-weight);
+    line-height: var(--typography-heading-4-line-height);
+    letter-spacing: var(--typography-heading-4-letter-spacing);
+    color: var(--color-purple-800);
+    cursor: default;
 
-  &:focus {
-    outline: none;
-  }
+    &:focus {
+      outline: none;
+    }
 
-  &:focus-visible {
-    color: var(--color-blue-500);
-    border-color: var(--color-blue-500);
-  }
+    &:focus-visible {
+      color: var(--color-blue-500);
+      border-color: var(--color-blue-500);
+    }
 
-  &[data-disabled] {
-    opacity: 0.3;
-  }
+    &[data-disabled] {
+      opacity: 0.3;
+    }
+
+    &:not(:first-child) {
+      margin-inline-start: var(--spacing-xs);
+    }
 
-  &:not(:first-child) {
-    margin-inline-start: var(--spacing-xs);
+    &:not([data-disabled]):hover {
+      background: var(--color-blue-200);
+      color: var(--color-blue-500);
+    }
+
+    &:not([data-disabled]):active {
+      background: var(--color-blue-100);
+    }
   }
 
-  &:not([data-disabled]):hover {
-    background: var(--color-blue-200);
+  .tab[data-selected] {
+    position: relative;
     color: var(--color-blue-500);
-  }
 
-  &:not([data-disabled]):active {
-    background: var(--color-blue-100);
+    &::before {
+      content: '';
+      display: block;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+      background-color: currentcolor;
+      height: 5px;
+      width: 100%;
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
   }
-}
-
-.tab[data-selected] {
-  position: relative;
-  color: var(--color-blue-500);
 
-  &::before {
-    content: '';
-    display: block;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    background-color: currentcolor;
-    height: 5px;
-    width: 100%;
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
+  .badge {
+    margin-inline-start: var(--spacing-sm);
+    display: inline-flex;
+    align-items: center;
   }
-}
 
-.badge {
-  margin-inline-start: var(--spacing-sm);
-  display: inline-flex;
-  align-items: center;
-}
+  @media (forced-colors: active) {
+    .tab {
+      border: 2px solid transparent;
 
-@media (forced-colors: active) {
-  .tab {
-    border: 2px solid transparent;
+      &:focus-visible::after {
+        content: '';
+        position: absolute;
+        background: transparent;
+        border-radius: var(--border-focus-ring-border-radius);
+        border-width: var(--border-focus-ring-border-width);
+        border-style: var(--border-focus-ring-border-style);
+        border-color: transparent;
+        inset: -2px;
+      }
+    }
 
-    &:focus-visible::after {
+    .tab[data-selected]::before {
+      /* High contrast also doesn't see the pseudo element created to show the active tab. */
       content: '';
       position: absolute;
-      background: transparent;
-      border-radius: var(--border-focus-ring-border-radius);
-      border-width: var(--border-focus-ring-border-width);
-      border-style: var(--border-focus-ring-border-style);
-      border-color: transparent;
-      inset: -2px;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-bottom: 2px solid transparent;
     }
   }
-
-  .tab[data-selected]::before {
-    /* High contrast also doesn't see the pseudo element created to show the active tab. */
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-bottom: 2px solid transparent;
-  }
 }

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

@@ -1,67 +1,71 @@
-.container {
-  position: relative;
-}
+@layer kz-components {
+  .container {
+    position: relative;
+  }
 
-.tabList {
-  border-bottom: 1px solid var(--color-gray-300);
-  padding: var(--spacing-6) 0 0;
-  width: 100%;
-  height: 100%;
-  overflow-x: scroll;
-  white-space: nowrap;
-  scrollbar-width: none;
-  scroll-behavior: smooth;
-}
+  .tabList {
+    border-bottom: 1px solid var(--color-gray-300);
+    padding: var(--spacing-6) 0 0;
+    width: 100%;
+    height: 100%;
+    overflow-x: scroll;
+    white-space: nowrap;
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+  }
 
-.noPadding {
-  padding: 0;
-}
+  .noPadding {
+    padding: 0;
+  }
 
-.leftArrow,
-.rightArrow {
-  --icon-size: 24;
+  .leftArrow,
+  .rightArrow {
+    --icon-size: 24;
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  z-index: 10000;
-  background: var(--color-white);
-  inset-block: 0 1px;
-  width: 48px;
-  cursor: default;
-  user-select: none;
-}
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+
+    /* from $ca-z-index-fixed */
+    z-index: 1030;
+    background: var(--color-white);
+    inset-block: 0 1px;
+    width: 48px;
+    cursor: default;
+    user-select: none;
+  }
 
-/*
+  /*
  * Note: we're purposefully using directional properties instead of start/end for positioning and styling related to the carousel arrows
 */
-.leftArrow {
-  left: 0;
-}
+  .leftArrow {
+    left: 0;
+  }
 
-.leftArrow,
-.leftArrow:hover {
-  border-right: 1px solid var(--color-gray-300);
-}
+  .leftArrow,
+  .leftArrow:hover {
+    border-right: 1px solid var(--color-gray-300);
+  }
 
-.rightArrow {
-  right: 0;
-}
+  .rightArrow {
+    right: 0;
+  }
 
-.rightArrow,
-.rightArrow:hover {
-  border-left: 1px solid var(--color-gray-300);
-}
+  .rightArrow,
+  .rightArrow:hover {
+    border-left: 1px solid var(--color-gray-300);
+  }
 
-.leftArrow:hover,
-.rightArrow:hover {
-  background: var(--color-blue-200);
-  color: var(--color-blue-500);
-}
+  .leftArrow:hover,
+  .rightArrow:hover {
+    background: var(--color-blue-200);
+    color: var(--color-blue-500);
+  }
 
-.leftArrow:active,
-.rightArrow:active {
-  background: var(--color-blue-100);
-  color: var(--color-blue-500);
+  .leftArrow:active,
+  .rightArrow:active {
+    background: var(--color-blue-100);
+    color: var(--color-blue-500);
+  }
 }

package/src/__next__/Tabs/subcomponents/TabList/TabList.tsx

@@ -75,7 +75,7 @@ export const TabList = (props: TabListProps): JSX.Element => {
         setLeftArrowEnabled(false)
       },
       {
-        threshold: 0.75,
+        threshold: 0.8,
         root: containerElement,
       },
     )
@@ -90,7 +90,7 @@ export const TabList = (props: TabListProps): JSX.Element => {
         setRightArrowEnabled(false)
       },
       {
-        threshold: 0.75,
+        threshold: 0.8,
         root: containerElement,
       },
     )
@@ -100,7 +100,7 @@ export const TabList = (props: TabListProps): JSX.Element => {
       firstTabObserver.disconnect()
       lastTabObserver.disconnect()
     }
-  }, [isDocumentReady, containerElement, isRTL])
+  }, [isDocumentReady, containerElement, isRTL, tabListContext?.collection.size])
 
   useEffect(() => {
     if (!isDocumentReady) {