@kaizen/components 0.0.0-canary-guidance-block-codemod-20251215033932 → 0.0.0-canary-01-titleblock-20251216220648

package/src/TitleBlock/TitleBlock.tsx

@@ -8,7 +8,6 @@ import { Select } from '~components/Select'
 import { Tag } from '~components/Tag'
 import { useMediaQueries } from '~components/utils/useMediaQueries'
 import { MainActions } from './subcomponents/MainActions'
-import { MobileActions } from './subcomponents/MobileActions'
 import { SecondaryActions } from './subcomponents/SecondaryActions'
 import {
   type NavigationTabs,
@@ -18,7 +17,7 @@ import {
   type TitleBlockProps,
   type TitleBlockVariant,
 } from './types'
-import { createTabletOverflowMenuItems, isReversed } from './utils'
+import { isReversed } from './utils'
 import styles from './TitleBlock.module.scss'
 
 const renderTag = (surveyStatus: SurveyStatus): ReactNode => {
@@ -156,6 +155,9 @@ const Breadcrumb = ({
       <div className={styles.circle}>
         <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
       </div>
+      <div className={styles.staticIcon}>
+        <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
+      </div>
       <span
         className={styles.breadcrumbTextLink}
         data-automation-id={textAutomationId}
@@ -258,7 +260,6 @@ export const TitleBlock = ({
   sectionTitleDescriptionAutomationId = 'TitleBlock__SectionTitleDescription',
   breadcrumbAutomationId = 'TitleBlock__Breadcrumb',
   breadcrumbTextAutomationId = 'TitleBlock__BreadcrumbText',
-  autoHideMobileActionsMenu = false,
 }: TitleBlockProps): JSX.Element => {
   const hasNavigationTabs = navigationTabs && navigationTabs.length > 0
   const collapseNavigationArea =
@@ -343,19 +344,13 @@ export const TitleBlock = ({
                   </>
                 </div>
               </div>
-              {(primaryAction ??
-                defaultAction ??
-                secondaryActions ??
-                secondaryOverflowMenuItems) && (
+              {(primaryAction ?? defaultAction ?? secondaryActions) && (
                 <MainActions
                   primaryAction={primaryAction}
                   defaultAction={defaultAction}
+                  secondaryActions={secondaryActions}
+                  secondaryOverflowMenuItems={secondaryOverflowMenuItems}
                   reversed={isReversed(variant)}
-                  overflowMenuItems={createTabletOverflowMenuItems(
-                    secondaryActions,
-                    secondaryOverflowMenuItems,
-                  )}
-                  showOverflowMenu={isSmallOrMediumViewport}
                 />
               )}
             </div>
@@ -395,18 +390,6 @@ export const TitleBlock = ({
             </div>
           </div>
         </div>
-        <MobileActions
-          primaryAction={primaryAction}
-          defaultAction={defaultAction}
-          secondaryActions={secondaryActions}
-          secondaryOverflowMenuItems={secondaryOverflowMenuItems}
-          drawerHandleLabelIconPosition={
-            primaryAction && 'iconPosition' in primaryAction
-              ? primaryAction.iconPosition
-              : undefined
-          }
-          autoHide={autoHideMobileActionsMenu}
-        />
       </div>
     </>
   )

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

@@ -34,7 +34,7 @@ const meta = {
     layout: 'fullscreen',
   },
   args: {
-    title: 'Page title',
+    title: 'Page title Page title Page title ',
     surveyStatus: { text: 'Due July 8, 2030', status: 'default' },
     avatar: {
       avatarSrc: assetUrl('site/empty-state.png'),
@@ -112,15 +112,42 @@ export const Viewports: Story = {
           type: 'desktop',
         },
       },
-      defaultViewport: 'default',
+      // defaultViewport: 'default',
     },
     chromatic: {
       disable: false,
-      viewports: [1079, 1365, 1366],
+      viewports: [1079, 1365, 1366, 760, 360],
     },
   },
 }
 
+export const WithNoSecondaryOverflow: 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, 760, 360],
+    },
+  },
+  args: {
+    title: 'Test no secondary overflow menu items',
+    secondaryOverflowMenuItems: undefined,
+  },
+}
 export const HasLongTitle: Story = {
   parameters: {
     viewport: {
@@ -136,11 +163,11 @@ export const HasLongTitle: Story = {
           type: 'desktop',
         },
       },
-      defaultViewport: 'default',
+      // defaultViewport: 'default',
     },
     chromatic: {
       disable: false,
-      viewports: [1365, 1366],
+      viewports: [1365, 1366, 760, 360],
     },
   },
   args: { title: 'A long title with over thirty characters' },
@@ -156,21 +183,41 @@ export const LightVariant: Story = {
     viewport: {
       viewports: {
         default: {
-          name: 'Above or equal to 1366',
+          name: 'desktop (above or equal to 1366)',
           styles: { width: '1366px', height: '800px' },
           type: 'desktop',
         },
-        under1366: {
-          name: 'Under 1366',
+        desktopSm: {
+          name: 'desktop-sm (1024 - 1365)',
           styles: { width: '1365px', height: '800px' },
           type: 'desktop',
         },
+        tablet: {
+          name: 'tablet (672 - 1023)',
+          styles: { width: '1023px', height: '800px' },
+          type: 'desktop',
+        },
+        mobileResponsive: {
+          name: 'mobile-responsive (512 - 671)',
+          styles: { width: '671px', height: '800px' },
+          type: 'desktop',
+        },
+        mobile: {
+          name: 'mobile (361 - 512)',
+          styles: { width: '511px', height: '800px' },
+          type: 'desktop',
+        },
+        mobileXs: {
+          name: 'mobile (under 360)',
+          styles: { width: '360px', height: '800px' },
+          type: 'desktop',
+        },
       },
-      defaultViewport: 'default',
+      // defaultViewport: 'default',
     },
     chromatic: {
       disable: false,
-      viewports: [1365, 1366],
+      viewports: [1365, 1366, 760, 360],
     },
   },
   args: {
@@ -202,7 +249,7 @@ export const AdminVariant: Story = {
           type: 'desktop',
         },
       },
-      defaultViewport: 'default',
+      // defaultViewport: 'default',
     },
     chromatic: {
       disable: false,
@@ -237,7 +284,7 @@ export const EducationVariant: Story = {
           type: 'desktop',
         },
       },
-      defaultViewport: 'default',
+      // defaultViewport: 'default',
     },
     chromatic: {
       disable: false,

package/src/TitleBlock/_mixins.scss

@@ -35,3 +35,9 @@
     @content;
   }
 }
+
+@mixin title-block-xsmall {
+  @container (max-width: 511px) {
+    @content;
+  }
+}

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

@@ -8,11 +8,29 @@
     justify-content: flex-end;
     flex-grow: 1;
     flex-shrink: 0;
+    white-space: nowrap;
 
-    @include ca-margin($start: calc(#{$ca-grid} / 2));
+    .defaultActionButtonMinimized {
+      display: none;
+      margin-inline-end: 0;
+    }
 
     @include title-block-small {
-      display: none;
+      justify-content: flex-start;
+      padding-left: 2.75rem;
+
+      @media (max-width: 360px) {
+        .defaultActionButton {
+          display: none;
+          margin-inline-end: 0;
+        }
+
+        .defaultActionButtonMinimized {
+          display: flex;
+          margin-inline-end: 3px;
+          margin-left: -0.5rem;
+        }
+      }
     }
   }
 }

package/src/TitleBlock/subcomponents/MainActions.tsx

@@ -2,13 +2,14 @@ import React from 'react'
 import { Button, IconButton } from '~components/ButtonV1'
 import { Icon } from '~components/Icon'
 import { Menu, MenuList } from '~components/MenuV1'
-import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from '../constants'
+import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from '~components/TitleBlock'
 import {
   type DefaultActionProps,
   type PrimaryActionProps,
+  type SecondaryActionsProps,
   type TitleBlockMenuItemProps,
 } from '../types'
-import { isMenuGroupNotButton } from '../utils'
+import { createTabletOverflowMenuItems, isMenuGroupNotButton } from '../utils'
 import { TitleBlockMenuItem } from './TitleBlockMenuItem'
 import { Toolbar } from './Toolbar'
 import styles from './MainActions.module.scss'
@@ -17,18 +18,135 @@ type MainActionsProps = {
   primaryAction?: PrimaryActionProps
   defaultAction?: DefaultActionProps
   reversed?: boolean
-  overflowMenuItems?: TitleBlockMenuItemProps[]
+  secondaryActions?: SecondaryActionsProps
+  secondaryOverflowMenuItems?: TitleBlockMenuItemProps[]
   showOverflowMenu?: boolean
 }
 
+const renderSecondaryAndOverflowMenu = (
+  secondaryOverflowMenuItems?: TitleBlockMenuItemProps[],
+  reversed?: boolean,
+): JSX.Element | undefined => {
+  if (!secondaryOverflowMenuItems) return undefined
+  return (
+    <Menu
+      align="right"
+      button={
+        <IconButton
+          label={'Open secondary and overflow menu'}
+          reversed={reversed}
+          icon={<Icon name="more_horiz" isPresentational />}
+          id={TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}
+          classNameOverride={styles.overflowMenuButton}
+        />
+      }
+    >
+      <MenuList>
+        {secondaryOverflowMenuItems.map((menuItem, i) => (
+          <TitleBlockMenuItem key={i} {...menuItem} />
+        ))}
+      </MenuList>
+    </Menu>
+  )
+}
+
 export const MainActions = ({
   primaryAction,
   defaultAction,
+  secondaryActions,
+  secondaryOverflowMenuItems,
   reversed = false,
-  overflowMenuItems,
-  showOverflowMenu = false,
 }: MainActionsProps): JSX.Element => {
   let items
+
+  // Build combined secondary + overflow menu items once, to be spread into the toolbar items
+  const secondaryAndOverflowMenu: { key: string; node: JSX.Element }[] = []
+
+  // Convert defaultAction to menu item format and prepend to combined list
+  let defaultActionMenuItem: TitleBlockMenuItemProps | undefined
+  if (defaultAction) {
+    if ('component' in defaultAction) {
+      defaultActionMenuItem = defaultAction
+    } else if ('onClick' in defaultAction) {
+      defaultActionMenuItem = {
+        label: defaultAction.label,
+        icon: defaultAction.icon,
+        onClick: defaultAction.onClick,
+        disabled: defaultAction.disabled,
+      }
+    } else if ('href' in defaultAction) {
+      defaultActionMenuItem = {
+        label: defaultAction.label,
+        icon: defaultAction.icon,
+        href: defaultAction.href,
+        disabled: defaultAction.disabled,
+      }
+    }
+  }
+
+  const combinedSecondaryOverflowItems = createTabletOverflowMenuItems(
+    secondaryActions,
+    secondaryOverflowMenuItems,
+  )
+
+  // Prepend defaultAction to the combined list if it exists
+  const allMenuItems = defaultActionMenuItem
+    ? [defaultActionMenuItem, ...combinedSecondaryOverflowItems]
+    : combinedSecondaryOverflowItems
+
+  if (allMenuItems.length > 0) {
+    secondaryAndOverflowMenu.push({
+      key: 'overflowMenu',
+      node: renderSecondaryAndOverflowMenu(allMenuItems, reversed)!,
+    })
+  }
+
+  const defaultActionItem = defaultAction
+    ? [
+        {
+          key: 'defaultAction',
+          node: (
+            <Button
+              classNameOverride={styles.defaultActionButton}
+              {...{
+                ...defaultAction,
+                reversed: defaultAction.reversed ?? reversed,
+              }}
+              data-automation-id="title-block-default-action-button"
+              data-testid="title-block-default-action-button"
+            />
+          ),
+        },
+      ]
+    : []
+
+  const defaultActionItemMinimized = defaultAction
+    ? [
+        {
+          key: 'defaultActionMinimized',
+          node: (
+            <div className={styles.defaultActionButtonMinimized}>
+              <Menu
+                align="right"
+                button={
+                  <IconButton
+                    label={'Open default action overflow menu'}
+                    reversed={reversed}
+                    icon={<Icon name="more_horiz" isPresentational />}
+                    id={TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}
+                  />
+                }
+              >
+                <MenuList>
+                  {defaultActionMenuItem && <TitleBlockMenuItem {...defaultActionMenuItem} />}
+                </MenuList>
+              </Menu>
+            </div>
+          ),
+        },
+      ]
+    : []
+
   if (primaryAction && isMenuGroupNotButton(primaryAction)) {
     const menuContent = primaryAction.menuItems.map((item, idx) => (
       <TitleBlockMenuItem
@@ -40,23 +158,8 @@ export const MainActions = ({
     ))
 
     items = [
-      ...(defaultAction
-        ? [
-            {
-              key: 'defaultAction',
-              node: (
-                <Button
-                  {...{
-                    ...defaultAction,
-                    reversed: defaultAction.reversed ?? reversed,
-                  }}
-                  data-automation-id="title-block-default-action-button"
-                  data-testid="title-block-default-action-button"
-                />
-              ),
-            },
-          ]
-        : []),
+      ...defaultActionItem,
+      ...defaultActionItemMinimized,
       ...(primaryAction
         ? [
             {
@@ -93,23 +196,8 @@ export const MainActions = ({
     ]
   } else {
     items = [
-      ...(defaultAction
-        ? [
-            {
-              key: 'defaultAction',
-              node: (
-                <Button
-                  {...{
-                    ...defaultAction,
-                    reversed: defaultAction.reversed ?? reversed,
-                  }}
-                  data-automation-id="title-block-default-action-button"
-                  data-testid="title-block-default-action-button"
-                />
-              ),
-            },
-          ]
-        : []),
+      ...defaultActionItem,
+      ...defaultActionItemMinimized,
       ...(primaryAction
         ? [
             {
@@ -139,37 +227,6 @@ export const MainActions = ({
     ]
   }
 
-  if (overflowMenuItems && showOverflowMenu && overflowMenuItems.length > 0) {
-    items = [
-      {
-        key: 'overflowMenu',
-        node: (
-          <Menu
-            align="right"
-            button={
-              <IconButton
-                id={TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}
-                label="Open secondary menu"
-                reversed={reversed}
-                icon={<Icon name="more_horiz" isPresentational />}
-              />
-            }
-          >
-            <MenuList>
-              {overflowMenuItems.map((menuItem, idx) => (
-                <TitleBlockMenuItem
-                  {...menuItem}
-                  key={`main-action-overflow-item-menu-item-${idx}`}
-                />
-              ))}
-            </MenuList>
-          </Menu>
-        ),
-      },
-      ...items,
-    ]
-  }
-
   return (
     <div className={styles.mainActionsContainer}>
       <Toolbar

package/src/TitleBlock/subcomponents/SecondaryActions.tsx

@@ -5,6 +5,7 @@ import { Menu, MenuList } from '~components/MenuV1'
 import styles from '../TitleBlock.module.scss'
 import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from '../constants'
 import { type SecondaryActionsProps, type TitleBlockMenuItemProps } from '../types'
+import { convertSecondaryActionsToMenuItems } from '../utils'
 import { TitleBlockMenuItem } from './TitleBlockMenuItem'
 import { Toolbar } from './Toolbar'
 
@@ -18,25 +19,67 @@ const renderSecondaryOverflowMenu = (
   secondaryOverflowMenuItems?: TitleBlockMenuItemProps[],
   reversed?: boolean,
 ): JSX.Element | undefined => {
-  if (!secondaryOverflowMenuItems) return undefined
+  if (!secondaryOverflowMenuItems || secondaryOverflowMenuItems.length === 0) return undefined
   return (
-    <Menu
-      align="right"
-      button={
-        <IconButton
-          label="Open secondary menu"
-          reversed={reversed}
-          icon={<Icon name="more_horiz" isPresentational />}
-          id={TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}
-        />
-      }
-    >
-      <MenuList>
-        {secondaryOverflowMenuItems.map((menuItem, i) => (
-          <TitleBlockMenuItem key={i} {...menuItem} />
-        ))}
-      </MenuList>
-    </Menu>
+    <div className={styles.secondaryOverflowMenu}>
+      <Menu
+        align="right"
+        button={
+          <Button
+            secondary
+            reversed={reversed}
+            label="Menu"
+            data-automation-id={TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}
+            data-testid={TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}
+            icon={<Icon name="keyboard_arrow_down" isPresentational />}
+            iconPosition={'end'}
+          />
+        }
+      >
+        <MenuList>
+          {secondaryOverflowMenuItems.map((menuItem, i) => (
+            <TitleBlockMenuItem key={i} {...menuItem} />
+          ))}
+        </MenuList>
+      </Menu>
+    </div>
+  )
+}
+
+// New: combined overflow menu (secondary actions converted + overflow menu items)
+const renderCombinedSecondaryOverflowMenu = (
+  secondaryActions?: SecondaryActionsProps,
+  secondaryOverflowMenuItems?: TitleBlockMenuItemProps[],
+  reversed?: boolean,
+): JSX.Element | undefined => {
+  const secondaryConverted = secondaryActions
+    ? convertSecondaryActionsToMenuItems(secondaryActions)
+    : []
+  const overflowItems = secondaryOverflowMenuItems ?? []
+
+  if (secondaryConverted.length === 0 && overflowItems.length === 0) return undefined
+  const combined = [...secondaryConverted, ...overflowItems]
+
+  return (
+    <div className={styles.secondaryOverflowCombinedMenu}>
+      <Menu
+        align="right"
+        button={
+          <IconButton
+            label="Open combined secondary + overflow menu"
+            reversed={reversed}
+            icon={<Icon name="more_horiz" isPresentational />}
+            id={`${TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}__combined`}
+          />
+        }
+      >
+        <MenuList>
+          {combined.map((menuItem, i) => (
+            <TitleBlockMenuItem key={i} {...menuItem} />
+          ))}
+        </MenuList>
+      </Menu>
+    </div>
   )
 }
 
@@ -55,26 +98,28 @@ export const SecondaryActions = ({
     ? secondaryActions.map((action, i) => {
         if ('menuItems' in action) {
           return {
-            key: `${i}`, // We shouldn't use an index here, see note above
+            key: `titleblock_secondary_action_${i}`,
             node: (
-              <Menu
-                align="right"
-                button={
-                  <Button
-                    secondary
-                    label={action.label}
-                    reversed={reversed}
-                    icon={<Icon name="keyboard_arrow_down" isPresentational />}
-                    iconPosition="end"
-                  />
-                }
-              >
-                <MenuList>
-                  {action.menuItems.map((menuItem, i2) => (
-                    <TitleBlockMenuItem key={i2} {...menuItem} />
-                  ))}
-                </MenuList>
-              </Menu>
+              <div className={styles.secondaryButtonContainer}>
+                <Menu
+                  align="right"
+                  button={
+                    <Button
+                      secondary
+                      label={action.label}
+                      reversed={reversed}
+                      icon={<Icon name="keyboard_arrow_down" isPresentational />}
+                      iconPosition="end"
+                    />
+                  }
+                >
+                  <MenuList>
+                    {action.menuItems.map((menuItem, i2) => (
+                      <TitleBlockMenuItem key={i2} {...menuItem} />
+                    ))}
+                  </MenuList>
+                </Menu>
+              </div>
             ),
           }
         } else {
@@ -86,15 +131,17 @@ export const SecondaryActions = ({
             )
           }
           return {
-            key: `${i}`, // We shouldn't use an index here, see note above
+            key: `${i}`,
             node: (
-              <Button
-                secondary
-                reversed={reversed}
-                {...action}
-                data-automation-id="title-block-secondary-actions-button"
-                data-testid="title-block-secondary-actions-button"
-              />
+              <div className={styles.secondaryButtonContainer}>
+                <Button
+                  secondary
+                  reversed={reversed}
+                  {...action}
+                  data-automation-id="title-block-secondary-actions-button"
+                  data-testid="title-block-secondary-actions-button"
+                />
+              </div>
             ),
           }
         }
@@ -102,6 +149,11 @@ export const SecondaryActions = ({
     : []
 
   const overflowMenu = renderSecondaryOverflowMenu(secondaryOverflowMenuItems, reversed)
+  const combinedOverflowMenu = renderCombinedSecondaryOverflowMenu(
+    secondaryActions,
+    secondaryOverflowMenuItems,
+    reversed,
+  )
 
   const toolbarItems = [
     ...secondaryActionsAsToolbarItems,
@@ -113,6 +165,14 @@ export const SecondaryActions = ({
           },
         ]
       : []),
+    ...(combinedOverflowMenu
+      ? [
+          {
+            key: 'combinedOverflowMenu',
+            node: combinedOverflowMenu,
+          },
+        ]
+      : []),
   ]
 
   return (

package/src/TitleBlock/subcomponents/Toolbar.tsx

@@ -21,6 +21,7 @@ export const Toolbar = ({ items, noGap = false, automationId }: ToolbarProps): J
   if (!items || items?.length === 0) {
     return <></>
   }
+
   return (
     <div className={styles.toolbar} data-automation-id={automationId} data-testid={automationId}>
       {items.map((item) => (