feat: Menu v3

.changeset/plenty-books-marry.md

@@ -0,0 +1,5 @@
+---
+"@kaizen/components": minor
+---
+
+v3 Menu component

packages/components/rollup.config.mjs

@@ -4,6 +4,9 @@ export default rollupConfig({
   input: {
     index: "./src/index.ts",
     future: "./src/__future__/index.ts",
+    actionsV1: "./src/__actions__/v1.ts",
+    actionsV2: "./src/__actions__/v2.ts",
+    actionsV3: "./src/__actions__/v3.ts",
     overlaysV1: "./src/__overlays__/v1.ts",
     overlaysV2: "./src/__overlays__/v2.ts",
     overlaysV3: "./src/__overlays__/v3.ts",

packages/components/src/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Button } from "~components/Button"
 import { AddIcon } from "~components/Icon"
-import { Menu, MenuList, MenuItem } from "~components/Menu"
+import { Menu, MenuList, MenuItem } from "~components/__actions__/v1"
 import { useFilterBarContext } from "../../context/FilterBarContext"
 
 export const AddFiltersMenu = (): JSX.Element => {

packages/components/src/SplitButton/SplitButton.spec.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { MenuItem, MenuList } from "~components/Menu"
+import { MenuItem, MenuList } from "~components/__actions__/v1"
 import { SplitButton, SplitButtonProps } from "./SplitButton"
 
 const user = userEvent.setup()

packages/components/src/SplitButton/SplitButton.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
-import { Menu } from "~components/Menu"
+import { Menu } from "~components/__actions__/v1"
 import { DataAttributes } from "~types/DataAttributes"
 import { OverrideClassName } from "~types/OverrideClassName"
 import { ActionButton, ActionButtonProps } from "./subcomponents/ActionButton"

packages/components/src/SplitButton/_docs/SplitButton.stickersheet.stories.tsx

@@ -4,7 +4,7 @@ import {
   exampleActionButtonPropsAnchor,
   exampleActionButtonPropsButton,
   exampleDropdownContentEnabled,
-} from "~components/Menu/_docs/examples"
+} from "~components/__actions__/Menu/v1/_docs/examples"
 import {
   StickerSheet,
   StickerSheetStory,

packages/components/src/SplitButton/_docs/SplitButton.stories.tsx

@@ -4,7 +4,7 @@ import {
   exampleActionButtonPropsButton,
   exampleDropdownContentEnabled,
   exampleDropdownContentOneDisabled,
-} from "~components/Menu/_docs/examples"
+} from "~components/__actions__/Menu/v1/_docs/examples"
 import { SplitButton } from "../index"
 
 const meta = {

packages/components/src/TitleBlockZen/subcomponents/MainActions.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Button, IconButton } from "~components/Button"
 import { ChevronDownIcon, MeatballsIcon } from "~components/Icon"
-import { Menu, MenuList } from "~components/Menu"
+import { Menu, MenuList } from "~components/__actions__/v1"
 import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from "../constants"
 import {
   DefaultActionProps,

packages/components/src/TitleBlockZen/subcomponents/MobileActions.tsx

@@ -3,7 +3,7 @@ import classnames from "classnames"
 import { FocusOn } from "react-focus-on"
 import { ButtonProps } from "~components/Button"
 import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
-import { MenuItem, MenuList, MenuHeading } from "~components/Menu"
+import { MenuItem, MenuList, MenuHeading } from "~components/__actions__/v1"
 import { TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID } from "../constants"
 import {
   DefaultActionProps,

packages/components/src/TitleBlockZen/subcomponents/SecondaryActions.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Button, IconButton } from "~components/Button"
 import { ChevronDownIcon, MeatballsIcon } from "~components/Icon"
-import { Menu, MenuList } from "~components/Menu"
+import { Menu, MenuList } from "~components/__actions__/v1"
 import styles from "../TitleBlockZen.module.scss"
 import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from "../constants"
 import { SecondaryActionsProps, TitleBlockMenuItemProps } from "../types"

packages/components/src/TitleBlockZen/subcomponents/TitleBlockMenuItem.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import classnames from "classnames"
-import { MenuItem } from "~components/Menu"
+import { MenuItem } from "~components/__actions__/v1"
 import { TitleBlockMenuItemProps } from "../types"
 import styles from "./TitleBlockMenuItem.module.scss"
 

packages/components/src/TitleBlockZen/subcomponents/Toolbar.tsx

@@ -5,7 +5,7 @@
 import React from "react"
 import classnames from "classnames"
 import { ButtonProps } from "~components/Button"
-import { MenuProps } from "~components/Menu"
+import { MenuProps } from "~components/__actions__/v1"
 import styles from "./Toolbar.module.scss"
 
 type ToolbarProps = {

packages/components/src/TitleBlockZen/types.ts

@@ -1,7 +1,7 @@
 import { CompanyAvatarProps, GenericAvatarProps } from "~components/Avatar"
 import { ButtonProps, CustomButtonProps } from "~components/Button"
-import { MenuItemProps } from "~components/Menu"
 import { Select } from "~components/Select"
+import { MenuItemProps } from "~components/__actions__/v1"
 import { NavigationTabProps } from "./subcomponents/NavigationTabs"
 
 /**

packages/components/src/__actions__/Menu/v1/_docs/Menu.mdx

@@ -0,0 +1,32 @@
+import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { ResourceLinks, Installation } from "~storybook/components"
+import * as MenuStories from "./Menu.stories"
+
+<Meta of={MenuStories} />
+
+# Menu (v1)
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Menu"
+  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A39909&t=P1w10jr2cpPuaayw-1"
+  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082059782/Menu"
+  className="!mb-8"
+/>
+
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { Menu, MenuDropdown, MenuList, MenuItem } from "@kaizen/components/v1/actions"'
+/>
+
+It is recommended that you import from the `v2` entry point.
+
+## Overview
+
+A menu contains links to places or button actions. It does NOT show a selected item at all and the menu button text never changes.
+
+<Canvas of={MenuStories.Playground} />
+<Controls of={MenuStories.Playground} />
+
+## API
+
+Coming soon.

packages/components/src/Menu/_docs/Menu.stickersheet.stories.tsx → packages/components/src/__actions__/Menu/v1/_docs/Menu.stickersheet.stories.tsx

@@ -10,7 +10,7 @@ import { Menu } from "../index"
 import { MenuContentExample } from "./MenuContentExample"
 
 export default {
-  title: "Components/Menu",
+  title: "Actions/Menu/v1",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

packages/components/src/Menu/_docs/Menu.stories.tsx → packages/components/src/__actions__/Menu/v1/_docs/Menu.stories.tsx

@@ -8,7 +8,7 @@ import { MenuItem } from "../subcomponents/MenuItem"
 import { MenuList } from "../subcomponents/MenuList"
 
 const meta = {
-  title: "Components/Menu",
+  title: "Actions/Menu/v1",
   component: Menu,
   args: {
     button: (

packages/components/src/Menu/_docs/examples.tsx → packages/components/src/__actions__/Menu/v1/_docs/examples.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { action } from "@storybook/addon-actions"
 import { DuplicateIcon, EditIcon } from "~components/Icon"
-import { MenuItem, MenuList } from "~components/Menu"
+import { MenuItem, MenuList } from "../"
 
 export const exampleActionButtonPropsButton = {
   label: "Edit Survey",

packages/components/src/__actions__/Menu/v1/index.ts

@@ -0,0 +1,43 @@
+// Since we can't add a deprecation flag on a * export
+import { Menu as MenuV1, MenuProps as MenuPropsV1 } from "./Menu"
+import {
+  MenuHeading as MenuHeadingV1,
+  MenuHeadingProps as MenuHeadingPropsV1,
+} from "./subcomponents/MenuHeading"
+import {
+  MenuItem as MenuItemV1,
+  MenuItemProps as MenuItemPropsV1,
+} from "./subcomponents/MenuItem"
+import {
+  MenuList as MenuListV1,
+  MenuListProps as MenuListPropsV1,
+} from "./subcomponents/MenuList"
+import {
+  StatelessMenu as StatelessMenuV1,
+  StatelessMenuProps as StatelessMenuPropsV1,
+} from "./subcomponents/StatelessMenu"
+
+/** * @deprecated use v2 or upgrade to v3 for the latest release */
+export const Menu = MenuV1
+/** * @deprecated use v2 or upgrade to v3 for the latest release */
+export type MenuProps = MenuPropsV1
+
+/** * @deprecated use v2 or upgrade to v3 for the latest release */
+export const MenuHeading = MenuHeadingV1
+/** * @deprecated use v2 or upgrade to v3 for the latest release */
+export type MenuHeadingProps = MenuHeadingPropsV1
+
+/** * @deprecated use v2 or upgrade to v3 for the latest release */
+export const MenuItem = MenuItemV1
+/** * @deprecated use v2 or upgrade to v3 for the latest release */
+export type MenuItemProps = MenuItemPropsV1
+
+/** * @deprecated use v2 or upgrade to v3 for the latest release */
+export const MenuList = MenuListV1
+/** * @deprecated use v2 or upgrade to v3 for the latest release */
+export type MenuListProps = MenuListPropsV1
+
+/** * @deprecated use v2 or upgrade to v3 for the latest release */
+export const StatelessMenu = StatelessMenuV1
+/** * @deprecated use v2 or upgrade to v3 for the latest release */
+export type StatelessMenuProps = StatelessMenuPropsV1

packages/components/src/Menu/_docs/Menu.mdx → packages/components/src/__actions__/Menu/v2/_docs/Menu.mdx

@@ -4,7 +4,7 @@ import * as MenuStories from "./Menu.stories"
 
 <Meta of={MenuStories} />
 
-# Menu
+# Menu (v2)
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Menu"
@@ -13,7 +13,7 @@ import * as MenuStories from "./Menu.stories"
   className="!mb-8"
 />
 
-<KAIOInstallation exportNames="Menu" />
+<KAIOInstallation exportNames={["Menu", "MenuDropdown", "MenuList", "MenuItem"]} family="actions" version="2" />
 
 ## Overview
 

packages/components/src/__actions__/Menu/v2/_docs/Menu.stories.tsx

@@ -0,0 +1,53 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { Button } from "~components/Button"
+import { ChevronDownIcon, DuplicateIcon } from "~components/Icon"
+import * as MenuV1Stories from "../../v1/_docs/Menu.stories"
+import { Menu, MenuList, MenuItem, MenuHeading } from "../index"
+
+const meta = {
+  title: "Actions/Menu/v2",
+  component: Menu,
+  args: {
+    button: (
+      <Button
+        label="Actions"
+        icon={<ChevronDownIcon role="presentation" />}
+        iconPosition="end"
+      />
+    ),
+    children: (
+      <MenuList>
+        <MenuItem
+          onClick={() => {
+            alert("Duplicated!")
+          }}
+          icon={<DuplicateIcon role="presentation" />}
+          label="Duplicate item"
+        />
+        <MenuList heading={<MenuHeading>Extra links</MenuHeading>}>
+          <MenuItem
+            href="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082059782/Menu"
+            label="Learn more about Menu"
+          />
+        </MenuList>
+      </MenuList>
+    ),
+  },
+  decorators: [
+    Story => (
+      <div className="flex mt-[60px] gap-12">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Menu>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = MenuV1Stories.Playground

packages/components/src/__actions__/Menu/v2/index.ts

@@ -0,0 +1,6 @@
+export * from "../v1/Menu"
+export * from "../v1/subcomponents/MenuList"
+export * from "../v1/subcomponents/MenuDropdown"
+export * from "../v1/subcomponents/MenuItem"
+export * from "../v1/subcomponents/MenuHeading"
+export * from "../v1/subcomponents/StatelessMenu"

packages/components/src/__actions__/Menu/v3/Menu.module.scss

@@ -0,0 +1,16 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/spacing";
+
+.menu {
+  background-color: $color-white;
+  color: $color-purple-800;
+  width: 248px;
+  max-height: 22rem;
+  overflow: auto;
+  padding-block: $spacing-xs;
+  outline: none;
+  border-radius: $border-solid-border-radius;
+  box-shadow: $shadow-large-box-shadow;
+}

packages/components/src/__actions__/Menu/v3/Menu.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import {
+  Menu as RACMenu,
+  MenuProps as RACMenuProps,
+} from "react-aria-components"
+import styles from "./Menu.module.scss"
+
+export type MenuProps = Omit<
+  // @todo: what does it want here instead of any?
+  RACMenuProps<any>,
+  | "selectionMode"
+  | "disallowEmptySelection"
+  | "selectedKeys"
+  | "defaultSelectedKeys"
+>
+
+/**
+ *
+ */
+export const Menu = (props: MenuProps): JSX.Element => (
+  <RACMenu className={styles.menu} {...props} />
+)

packages/components/src/__actions__/Menu/v3/MenuHeader.module.scss

@@ -0,0 +1,12 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/typography";
+
+.header {
+  font-family: $typography-heading-6-font-family;
+  font-size: $typography-heading-6-font-size;
+  letter-spacing: $typography-heading-6-letter-spacing;
+  font-weight: $typography-heading-6-font-weight;
+  line-height: $typography-heading-6-line-height;
+  padding: $spacing-6 10px;
+  margin-inline: $spacing-xs;
+}

packages/components/src/__actions__/Menu/v3/MenuHeader.tsx

@@ -0,0 +1,14 @@
+import React from "react"
+import { Header } from "react-aria-components"
+import styles from "./MenuHeader.module.scss"
+
+type MenuHeaderProps = {
+  children: any
+}
+
+/**
+ *
+ */
+export const MenuHeader = (props: MenuHeaderProps): JSX.Element => (
+  <Header className={styles.header} {...props} />
+)