@kaizen/components 0.0.0-canary-debug-tab-20251015223744 → 0.0.0-canary-container-query-titleblock-20251105031251

package/src/RichTextEditor/utils/commands/listIsActive.spec.ts

@@ -20,7 +20,7 @@ describe('listIsActive()', () => {
     })
     let currentState = testEditorStateWitList
 
-    dispatchTransaction(simulateSelectionByText('Bullet List Item Node'))
+    dispatchTransaction(simulateSelectionByText('Bullet list Item Node'))
     dispatchTransaction((editorState: EditorState) => {
       currentState = editorState
       return true
@@ -40,7 +40,7 @@ describe('listIsActive()', () => {
     })
     let currentState = testEditorStateWitList
 
-    dispatchTransaction(simulateSelectionByText('Bullet List Item Node'))
+    dispatchTransaction(simulateSelectionByText('Bullet list Item Node'))
     dispatchTransaction((editorState: EditorState) => {
       currentState = editorState
       return true

package/src/RichTextEditor/utils/core/hooks/useRichTextEditor.spec.tsx

@@ -150,4 +150,15 @@ describe('useRichTextEditor()', () => {
       expect(editor.children[0]).toHaveAttribute('contenteditable', 'true')
     })
   })
+
+  it('is removed from DOM when unmounted', async () => {
+    const { unmount } = render(<Scenario />)
+
+    const editor = screen.getByTestId('testid--editor')
+    expect(editor).toBeInTheDocument()
+
+    unmount()
+
+    expect(screen.queryByTestId('testid--editor')).not.toBeInTheDocument()
+  })
 })

package/src/RichTextEditor/utils/core/hooks/useRichTextEditor.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { type EditorState } from 'prosemirror-state'
 import { createRichTextEditor } from '../createRichTextEditor'
 import { type CommandOrTransaction } from '../types'
@@ -71,17 +71,23 @@ export const useRichTextEditor = (
 
   const editorRef = useCallback(
     (node: HTMLElement) => {
-      if (node !== null) {
-        const instance = createRichTextEditor({
-          node,
-          initialEditorState: editorState,
-          onChange: setEditorState,
-          isEditable: () => editableStatusRef.current,
-          attributes,
-        })
-        destroyEditorRef.current = instance.destroy
-        dispatchTransactionRef.current = instance.dispatchTransaction
+      if (node === null) {
+        if (destroyEditorRef.current) {
+          destroyEditorRef.current()
+          destroyEditorRef.current = undefined
+        }
+        return
       }
+
+      const instance = createRichTextEditor({
+        node,
+        initialEditorState: editorState,
+        onChange: setEditorState,
+        isEditable: () => editableStatusRef.current,
+        attributes,
+      })
+      destroyEditorRef.current = instance.destroy
+      dispatchTransactionRef.current = instance.dispatchTransaction
     },
 
     // Including editorState in the dependencies here will cause an endless
@@ -91,15 +97,5 @@ export const useRichTextEditor = (
     [setEditorState, editableStatusRef],
   )
 
-  // Tear down ProseMirror when the consuming component is unmounted
-  useEffect(
-    () => () => {
-      if (destroyEditorRef.current) {
-        destroyEditorRef.current()
-      }
-    },
-    [destroyEditorRef],
-  )
-
   return [editorRef, editorState, dispatchTransaction, setEditableStatus]
 }

package/src/SingleSelect/SingleSelect.tsx

@@ -81,6 +81,8 @@ export type SingleSelectProps<Option extends SingleSelectOption = SingleSelectOp
 } & OverrideClassName<Omit<AriaSelectProps<Option>, OmittedAriaSelectProps>>
 
 /**
+ * @deprecated SingleSelect is deprecated in v3 and will be replaced in v4.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-select--docs Storybook}
  */

package/src/SingleSelect/_docs/SingleSelect--api-specification.mdx

@@ -1,11 +1,13 @@
 import { Canvas, Meta, Controls, ArgTypes, DocsStory } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
+import { ResourceLinks, KAIOInstallation, LinkTo, ReplacementNotice } from '~storybook/components'
 import * as SingleSelectStories from './SingleSelect.stories'
 
-<Meta title="Components/SingleSelect/API Specification" />
+<Meta title="Components/SingleSelect (Deprecated)/API Specification" />
 
 # SingleSelect
 
+<ReplacementNotice isFuture={true} />
+
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/SingleSelect"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A37837&mode=dev"

package/src/SingleSelect/_docs/SingleSelect--usage-guidelines.mdx

@@ -1,11 +1,19 @@
 import { Canvas, DocsStory, Meta, Controls } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation, DosAndDonts, DoOrDont } from '~storybook/components'
+import {
+  ResourceLinks,
+  KAIOInstallation,
+  DosAndDonts,
+  DoOrDont,
+  ReplacementNotice,
+} from '~storybook/components'
 import * as SingleSelectStories from './SingleSelect.stories'
 
-<Meta title="Components/SingleSelect/Usage Guidelines" />
+<Meta title="Components/SingleSelect (Deprecated)/Usage Guidelines" />
 
 # SingleSelect
 
+<ReplacementNotice isFuture={true} />
+
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/SingleSelect"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A37837&mode=dev"

package/src/SingleSelect/_docs/SingleSelect.stickersheet.stories.tsx

@@ -14,7 +14,7 @@ import {
 const IS_CHROMATIC = isChromatic()
 
 export default {
-  title: 'Components/SingleSelect',
+  title: 'Components/SingleSelect (Deprecated)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/SingleSelect/_docs/SingleSelect.stories.tsx

@@ -10,7 +10,7 @@ import { type SingleSelectOption } from '../types'
 import { groupedMockItems, mixedMockItemsDisabled, singleMockItems } from './mockData'
 
 const meta = {
-  title: 'Components/SingleSelect',
+  title: 'Components/SingleSelect (Deprecated)',
   component: SingleSelect,
   argTypes: {
     items: {

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

@@ -66,49 +66,39 @@ export const TabList = (props: TabListProps): JSX.Element => {
       return
     }
 
-    let firstTabObserver: IntersectionObserver | null = null
-    let lastTabObserver: IntersectionObserver | null = null
+    const firstTabObserver = new IntersectionObserver(
+      (entries) => {
+        if (!entries[0].isIntersecting) {
+          setLeftArrowEnabled(true)
+          return
+        }
+        setLeftArrowEnabled(false)
+      },
+      {
+        threshold: 0.8,
+        root: containerElement,
+      },
+    )
+    firstTabObserver.observe(isRTL ? tabs[tabs.length - 1] : tabs[0])
 
-    requestAnimationFrame(() => {
-      const tabList = tabListRef.current
-      if (!tabList) {
-        return
-      }
-
-      firstTabObserver = new IntersectionObserver(
-        (entries) => {
-          if (!entries[0].isIntersecting) {
-            setLeftArrowEnabled(true)
-            return
-          }
-          setLeftArrowEnabled(false)
-        },
-        {
-          threshold: 0.8,
-          root: containerElement,
-        },
-      )
-      firstTabObserver.observe(isRTL ? tabs[tabs.length - 1] : tabs[0])
-
-      lastTabObserver = new IntersectionObserver(
-        (entries) => {
-          if (!entries[0].isIntersecting) {
-            setRightArrowEnabled(true)
-            return
-          }
-          setRightArrowEnabled(false)
-        },
-        {
-          threshold: 0.8,
-          root: containerElement,
-        },
-      )
-      lastTabObserver.observe(isRTL ? tabs[0] : tabs[tabs.length - 1])
-    })
+    const lastTabObserver = new IntersectionObserver(
+      (entries) => {
+        if (!entries[0].isIntersecting) {
+          setRightArrowEnabled(true)
+          return
+        }
+        setRightArrowEnabled(false)
+      },
+      {
+        threshold: 0.8,
+        root: containerElement,
+      },
+    )
+    lastTabObserver.observe(isRTL ? tabs[0] : tabs[tabs.length - 1])
 
     return () => {
-      firstTabObserver?.disconnect()
-      lastTabObserver?.disconnect()
+      firstTabObserver.disconnect()
+      lastTabObserver.disconnect()
     }
   }, [isDocumentReady, containerElement, isRTL, tabListContext?.collection.size])
 

package/src/Tile/InformationTile/InformationTile.tsx

@@ -4,6 +4,8 @@ import { GenericTile, type GenericTileProps } from '../subcomponents/GenericTile
 export type InformationTileProps = GenericTileProps
 
 /**
+ * @deprecated InformationTile is deprecated in v3 and will be removed in v4.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#InformationTile%3A Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-tiles-informationtile--docs Storybook}
  */

package/src/Tile/InformationTile/_docs/InformationTile.mdx

@@ -1,11 +1,13 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import { ResourceLinks, KAIOInstallation, RemovalNotice } from '~storybook/components'
 import * as InformationTileStories from './InformationTile.stories'
 
 <Meta of={InformationTileStories} />
 
 # InformationTile
 
+<RemovalNotice />
+
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tile/InformationTile"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A37846&t=QliptwSIGF2YVAnx-1"

package/src/Tile/InformationTile/_docs/InformationTile.stickersheet.stories.tsx

@@ -4,7 +4,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { InformationTile, type InformationTileProps } from '../index'
 
 export default {
-  title: 'Components/Tiles/InformationTile',
+  title: 'Components/Tiles/InformationTile (Deprecated)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Tile/InformationTile/_docs/InformationTile.stories.tsx

@@ -3,7 +3,7 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { InformationTile } from '../index'
 
 const meta = {
-  title: 'Components/Tiles/InformationTile',
+  title: 'Components/Tiles/InformationTile (Deprecated)',
   component: InformationTile,
   args: {
     title: 'Title',

package/src/Tile/MultiActionTile/MultiActionTile.tsx

@@ -20,6 +20,8 @@ const renderActions = (primaryAction: TileAction, secondaryAction?: TileAction):
 )
 
 /**
+ * @deprecated MultiActionTile is deprecated in v3 and will be removed in v4.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#MultiActionTile.1 Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-tiles-multiactiontile--docs Storybook}
  */

package/src/Tile/MultiActionTile/_docs/MultiActionTile.mdx

@@ -1,11 +1,13 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import { ResourceLinks, KAIOInstallation, RemovalNotice } from '~storybook/components'
 import * as MultiActionTileStories from './MultiActionTile.stories'
 
 <Meta of={MultiActionTileStories} />
 
 # MultiActionTile
 
+<RemovalNotice />
+
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tile/MultiActionTile"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A37846&t=QliptwSIGF2YVAnx-1"

package/src/Tile/MultiActionTile/_docs/MultiActionTile.stickersheet.stories.tsx

@@ -4,7 +4,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { MultiActionTile, type MultiActionTileProps } from '../index'
 
 export default {
-  title: 'Components/Tiles/MultiActionTile',
+  title: 'Components/Tiles/MultiActionTile (Deprecated)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Tile/MultiActionTile/_docs/MultiActionTile.stories.tsx

@@ -3,7 +3,7 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { MultiActionTile } from '../index'
 
 const meta = {
-  title: 'Components/Tiles/MultiActionTile',
+  title: 'Components/Tiles/MultiActionTile (Deprecated)',
   component: MultiActionTile,
   args: {
     title: 'Title',

package/src/Tile/TileGrid/TileGrid.tsx

@@ -14,6 +14,8 @@ export interface TileGridProps extends OverrideClassName<HTMLAttributes<HTMLULis
 }
 
 /**
+ * @deprecated TileGrid is deprecated in v3 and will be removed in v4.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#TileGrid Guidance} |
  * {@link https://cultureamp.design/storybook/?path=/docs/components-tiles-tilegrid--docs Storybook}
  */

package/src/Tile/TileGrid/_docs/TileGrid.mdx

@@ -1,11 +1,13 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import { ResourceLinks, KAIOInstallation, RemovalNotice } from '~storybook/components'
 import * as TileGridStories from './TileGrid.stories'
 
 <Meta of={TileGridStories} />
 
 # TileGrid
 
+<RemovalNotice />
+
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tile/TileGrid"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#TileGrid"

package/src/Tile/TileGrid/_docs/TileGrid.stickersheet.stories.tsx

@@ -5,7 +5,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { TileGrid } from '../index'
 
 export default {
-  title: 'Components/Tiles/TileGrid',
+  title: 'Components/Tiles/TileGrid (Deprecated)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Tile/TileGrid/_docs/TileGrid.stories.tsx

@@ -5,7 +5,7 @@ import { InformationTile } from '~components/Tile'
 import { TileGrid } from '../index'
 
 const meta = {
-  title: 'Components/Tiles/TileGrid',
+  title: 'Components/Tiles/TileGrid (Deprecated)',
   component: TileGrid,
   args: {
     children: (

package/src/TitleBlock/TitleBlock.module.scss

@@ -53,6 +53,7 @@
 
   .adminVariant .titleRow {
     background-color: $color-white;
+    margin-bottom: 3px; // needed to correctly position the active tab label :after element
   }
 
   %titleBlockInner {
@@ -207,7 +208,7 @@
       max-width: 100%;
     }
 
-    @media (min-width: $layout-breakpoints-large) {
+    @container (min-width: #{$layout-breakpoints-large}) {
       display: block;
     }
 
@@ -535,12 +536,14 @@
       }
     }
 
-    @media only screen and (max-width: $breadcrumb-breakpoint-width) {
-      position: relative;
-      transform: translateY(0);
-      margin-inline: 0 var(--spacing-12);
+    @media only screen {
+      @container (max-width: #{$breadcrumb-breakpoint-width}) {
+        position: relative;
+        transform: translateY(0);
+        margin-inline: 0 var(--spacing-12);
 
-      @include ca-position($start: 0);
+        @include ca-position($start: 0);
+      }
     }
 
     @include title-block-medium-and-small {
@@ -580,8 +583,10 @@
       @include ca-position($start: $ca-grid);
     }
 
-    @media only screen and (min-width: $breadcrumb-breakpoint-width) {
-      @include ca-position($start: calc(#{$breadcrumb-circle-width} - #{$ca-grid}));
+    @media only screen {
+      @container (min-width: #{$breadcrumb-breakpoint-width}) {
+        @include ca-position($start: calc(#{$breadcrumb-circle-width} - #{$ca-grid}));
+      }
     }
 
     &:hover,

package/src/TitleBlock/_docs/{TitkeBlock--usage-guidelines.mdx → TitleBlock--usage-guidelines.mdx}

@@ -4,7 +4,7 @@ import * as TitleBlockStories from './TitleBlock.stories'
 
 <Meta title="Components/TitleBlock/Usage Guidelines" />
 
-# SingleSelect
+# TitleBlock
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/TitleBlock"
@@ -34,3 +34,11 @@ A consistent pattern to allow users to navigate and complete tasks easily.
 ### Long titles
 
 <Canvas of={TitleBlockStories.HasLongTitle} />
+
+### Admin Variant
+
+<Canvas of={TitleBlockStories.AdminVariant} />
+
+### Education Variant
+
+<Canvas of={TitleBlockStories.EducationVariant} />

package/src/TitleBlock/_docs/TitleBlock.stories.tsx

@@ -31,6 +31,7 @@ const meta = {
   component: TitleBlock,
   parameters: {
     chromatic: { disable: false },
+    layout: 'fullscreen',
   },
   args: {
     title: 'Page title',
@@ -145,6 +146,76 @@ export const HasLongTitle: Story = {
   args: { title: 'A long title with over thirty characters' },
 }
 
+export const AdminVariant: Story = {
+  parameters: {
+    viewport: {
+      viewports: {
+        default: {
+          name: 'Above or equal to 1366',
+          styles: { width: '1366px', height: '800px' },
+          type: 'desktop',
+        },
+        under1366: {
+          name: 'Under 1366',
+          styles: { width: '1365px', height: '800px' },
+          type: 'desktop',
+        },
+      },
+      defaultViewport: 'default',
+    },
+    chromatic: {
+      disable: false,
+      viewports: [1365, 1366],
+    },
+  },
+  args: {
+    variant: 'admin',
+    navigationTabs: [
+      <NavigationTab key="1" variant="admin" text="Label" href="#" active />,
+      <NavigationTab key="2" variant="admin" text="Label" href="#" />,
+      <NavigationTab key="3" variant="admin" text="Label" href="#" />,
+      <NavigationTab key="4" variant="admin" text="Label" href="#" />,
+      <NavigationTab key="5" variant="admin" text="Label" href="#" />,
+      <NavigationTab key="6" variant="admin" text="Label" href="#" />,
+    ],
+  },
+}
+
+export const EducationVariant: Story = {
+  parameters: {
+    viewport: {
+      viewports: {
+        default: {
+          name: 'Above or equal to 1366',
+          styles: { width: '1366px', height: '800px' },
+          type: 'desktop',
+        },
+        under1366: {
+          name: 'Under 1366',
+          styles: { width: '1365px', height: '800px' },
+          type: 'desktop',
+        },
+      },
+      defaultViewport: 'default',
+    },
+    chromatic: {
+      disable: false,
+      viewports: [1365, 1366],
+    },
+  },
+  args: {
+    variant: 'education',
+    navigationTabs: [
+      <NavigationTab key="1" variant="education" text="Label" href="#" active />,
+      <NavigationTab key="2" variant="education" text="Label" href="#" />,
+      <NavigationTab key="3" variant="education" text="Label" href="#" />,
+      <NavigationTab key="4" variant="education" text="Label" href="#" />,
+      <NavigationTab key="5" variant="education" text="Label" href="#" />,
+      <NavigationTab key="6" variant="education" text="Label" href="#" />,
+    ],
+  },
+}
+
 export const StickerSheetBreadcrumbs: Story = {
   name: 'Sticker Sheet (Breadcrumb)',
   parameters: {

package/src/TitleBlock/_mixins.scss

@@ -1,37 +1,37 @@
 @import '~@kaizen/design-tokens/sass/layout';
 
 @mixin title-block-under-1645 {
-  @media (max-width: 1644px) {
+  @container (max-width: 1644px) {
     @content;
   }
 }
 
 @mixin title-block-under-1440 {
-  @media (max-width: 1439px) {
+  @container (max-width: 1439px) {
     @content;
   }
 }
 
 @mixin title-block-under-1366 {
-  @media (max-width: 1365px) {
+  @container (max-width: 1365px) {
     @content;
   }
 }
 
 @mixin title-block-medium-and-small {
-  @media (max-width: calc(#{$layout-breakpoints-large} - 1px)) {
+  @container (max-width: calc(#{$layout-breakpoints-large} - 1px)) {
     @content;
   }
 }
 
 @mixin title-block-under-1024 {
-  @media (max-width: 1023px) {
+  @container (max-width: 1023px) {
     @content;
   }
 }
 
 @mixin title-block-small {
-  @media (max-width: $layout-breakpoints-medium - 1px) {
+  @container (max-width: calc(#{$layout-breakpoints-medium} - 1px)) {
     @content;
   }
 }

package/src/TitleBlock/subcomponents/NavigationTabs.module.scss

@@ -125,7 +125,6 @@
 
       &::before {
         background-color: $color-blue-500;
-        top: 3px;
 
         @include title-block-medium-and-small {
           top: auto;

package/src/__alpha__/SingleSelect/_docs/SingleSelect.spec.stories.tsx

@@ -87,7 +87,7 @@ export const XButtonClearsSelection: Story = {
     await userEvent.click(options[0])
 
     const clearButton = await screen.findByRole('button', {
-      name: 'Clear Choose a coffee selection',
+      name: 'Clear selection: Choose a coffee',
     })
     await waitFor(() => expect(clearButton).toBeVisible())
     await userEvent.click(clearButton)

package/src/__alpha__/SingleSelect/subcomponents/ComboBoxTrigger/ComboBoxTrigger.tsx

@@ -19,9 +19,10 @@ const ClearButton = ({ clearButtonRef, inputRef }: ClearButtonProps): JSX.Elemen
 
   const clearButtonAlt = formatMessage(
     {
-      id: 'singleSelect.clearButtonAlt',
-      defaultMessage: 'Clear {field} selection',
-      description: 'Alt text for the clear selection button',
+      id: 'singleSelect.clearButtonAlt_v2',
+      defaultMessage: 'Clear selection: {field}',
+      description:
+        'Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.',
     },
     { field: fieldLabel },
   )

package/src/__alpha__/SingleSelect/subcomponents/ListItem/ListItem.module.css

@@ -1,8 +1,4 @@
 @layer kz-components {
-  ul {
-    padding-inline-start: 0;
-  }
-
   .listItem {
     font-family: var(--typography-paragraph-body-font-family);
     font-weight: var(--typography-paragraph-body-font-weight);