@kaizen/components 2.0.6 → 2.1.0

package/locales/zh.json

@@ -224,9 +224,9 @@
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "显示{field}的建议"
   },
-  "singleSelect.clearButtonAlt" : {
-    "description" : "Alt text for the clear selection button",
-    "message" : "清除{field}选择"
+  "singleSelect.clearButtonAlt_v2" : {
+    "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.",
+    "message" : "清除选择：{field}"
   },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "2.0.6",
+  "version": "2.1.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

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/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 },
   )