Move Menu to Future structure

.changeset/violet-cheetahs-kneel.md

@@ -0,0 +1,5 @@
+---
+"@kaizen/components": minor
+---
+
+Move Menu v3 to Future

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

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

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

@@ -4,7 +4,7 @@ import * as MenuStories from "./Menu.stories"
 
 <Meta of={MenuStories} />
 
-# Menu (v1)
+# Menu
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Menu"
@@ -15,11 +15,9 @@ import * as MenuStories from "./Menu.stories"
 
 <Installation
   installCommand="pnpm add @kaizen/components"
-  importStatement='import { Menu, MenuDropdown, MenuList, MenuItem } from "@kaizen/components/v1/actions"'
+  importStatement='import { Menu, MenuDropdown, MenuList, MenuItem } from "@kaizen/components"'
 />
 
-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.

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

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

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

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

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

@@ -17,7 +17,7 @@ import {
   StatelessMenuProps as StatelessMenuPropsV1,
 } from "./subcomponents/StatelessMenu"
 
-// Note: deprecate all of these once we have Button v3
+// Note: deprecate all of these once we have RAC Button
 
 export const Menu = MenuV1
 export type MenuProps = MenuPropsV1

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

@@ -2,7 +2,7 @@ import React from "react"
 import { screen, waitFor, render } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { vi } from "vitest"
-import { MenuItem, MenuList } from "~components/__actions__/v2"
+import { MenuItem, MenuList } from "~components/Menu"
 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/__actions__/v2"
+import { Menu } from "~components/Menu"
 import { DataAttributes } from "~components/types/DataAttributes"
 import { OverrideClassName } from "~components/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/__actions__/Menu/v1/_docs/examples"
+} from "~components/Menu/_docs/examples"
 import {
   StickerSheet,
   StickerSheetStory,

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

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

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

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

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

@@ -2,12 +2,8 @@ import React, { useCallback, useEffect, useState } from "react"
 import classnames from "classnames"
 import { FocusOn } from "react-focus-on"
 import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
-import {
-  MenuItem,
-  MenuList,
-  MenuHeading,
-  ButtonProps,
-} from "~components/__actions__/v2"
+import { MenuItem, MenuList, MenuHeading } from "~components/Menu"
+import { ButtonProps } from "~components/__actions__/v2"
 import { TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID } from "../constants"
 import {
   DefaultActionProps,

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

@@ -1,6 +1,7 @@
 import React from "react"
 import { ChevronDownIcon, MeatballsIcon } from "~components/Icon"
-import { Menu, MenuList, Button, IconButton } from "~components/__actions__/v2"
+import { Menu, MenuList } from "~components/Menu"
+import { Button, IconButton } from "~components/__actions__/v2"
 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/__actions__/v2"
+import { MenuItem } from "~components/Menu"
 import { TitleBlockMenuItemProps } from "../types"
 import styles from "./TitleBlockMenuItem.module.scss"
 

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

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

packages/components/src/TitleBlockZen/types.ts

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

packages/components/src/__actions__/v1.ts

@@ -1,2 +1 @@
-export * from "./Menu/v1"
 export * from "./Button/v1"

packages/components/src/__actions__/v2.ts

@@ -1,2 +1 @@
-export * from "./Menu/v2"
 export * from "./Button/v2"

packages/components/src/__actions__/v3.ts

@@ -1,2 +1 @@
-export * from "./Menu/v3"
 export * from "./Button/v3"

packages/components/src/__actions__/Menu/v3/_docs/ApiSpecification.mdx → packages/components/src/__future__/Menu/_docs/ApiSpecification.mdx

@@ -3,12 +3,12 @@ import { KAIOInstallation, ResourceLinks,  SbContent } from "~storybook/componen
 import * as docsStories from "./Menu.docs.stories"
 import * as exampleStories from "./Menu.stories"
 
-<Meta title="Actions/Menu/v3/API Specification"/>
+<Meta title="Actions/Menu/Future/API Specification"/>
 
 <SbContent>
-  # Menu API Specification (v3)
+  # Menu API Specification (Future)
 
-  Updated July 4, 2024
+  Updated Sep 9, 2024
 </SbContent>
 
 <ResourceLinks
@@ -22,15 +22,15 @@ import * as exampleStories from "./Menu.stories"
   <div className="bg-yellow-100 border-default border-yellow-400 rounded px-24">
     ### Disclaimer
 
-    The `Menu` `v3` component is not backwards compatible with Kaizen `Button` `v1` and `v2`. For this reason, usage of this component is not recommended until a `Button` `v3` is released.
+    The Future `Menu` component is not backwards compatible with the current Kaizen `Button`. For this reason, usage of this component is not recommended until a Future `Button` is released.
   </div>
 </SbContent>
 
 <SbContent className="mb-24">
 
-  <KAIOInstallation exportNames={["Menu", "MenuTrigger", "MenuItem"]} family="actions" version="3" />
+  <KAIOInstallation exportNames={["Menu", "MenuTrigger", "MenuItem"]}/>
 
-  <Source code={"import { Popover, Section, Header } from \"@kaizen/components/v3/react-aria-components\""} language="tsx" />
+  <Source code={"import { Popover, Section, Header } from \"react-aria-components\""} language="tsx" />
 
   ## Overview
 

packages/components/src/__actions__/Menu/v3/_docs/Menu.docs.stories.tsx → packages/components/src/__future__/Menu/_docs/Menu.docs.stories.tsx

@@ -16,7 +16,7 @@ import { Button } from "~components/__actions__/v3"
 import { Menu, MenuItem, MenuTrigger } from "../index"
 
 const meta = {
-  title: "Actions/Menu/v3/Docs Assets",
+  title: "Actions/Menu/Future/Docs Assets",
   component: MenuTrigger,
   args: {
     defaultOpen: isChromatic(),

packages/components/src/__actions__/Menu/v3/_docs/Menu.mdx → packages/components/src/__future__/Menu/_docs/Menu.mdx

@@ -3,10 +3,10 @@ import { ResourceLinks, SbContent, Installation, DosAndDonts, DoOrDont } from "~
 import * as MenuDocsStories from "./Menu.docs.stories"
 import * as MenuStories from "./Menu.stories"
 
-<Meta title="Actions/Menu/v3/Usage Guidelines" />
+<Meta title="Actions/Menu/Future/Usage Guidelines" />
 
 <SbContent>
-  # Menu (v3)
+  # Menu (future)
 
   Updated July 6, 2024
 </SbContent>

packages/components/src/__actions__/Menu/v3/_docs/Menu.spec.stories.tsx → packages/components/src/__future__/Menu/_docs/Menu.spec.stories.tsx

@@ -17,7 +17,7 @@ import { Button } from "~components/__actions__/v3"
 import { Menu, MenuItem, MenuTrigger } from "../index"
 
 const meta = {
-  title: "Actions/Menu/v3/Tests",
+  title: "Actions/Menu/Future/Tests",
   component: MenuTrigger,
   args: {
     defaultOpen: isChromatic(),

packages/components/src/__actions__/Menu/v3/_docs/Menu.stories.tsx → packages/components/src/__future__/Menu/_docs/Menu.stories.tsx

@@ -15,7 +15,7 @@ import { Menu, MenuTrigger, MenuItem } from "../index"
 import * as testStories from "./Menu.spec.stories"
 
 const meta = {
-  title: "Actions/Menu/v3",
+  title: "Actions/Menu/Future",
   component: MenuTrigger,
   args: {
     defaultOpen: isChromatic(),

packages/components/src/index.ts

@@ -30,6 +30,7 @@ export * from "./Label"
 export * from "./LabelledMessage"
 export * from "./LikertScaleLegacy"
 export * from "./Loading"
+export * from "./Menu"
 export * from "./Modal"
 export * from "./MultiSelect"
 export * from "./Notification"
@@ -59,5 +60,4 @@ export * from "./VisuallyHidden"
 export * from "./Well"
 export * from "./__layout__/Workflow/v1"
 export * from "./__overlays__/Tooltip/v1"
-export * from "./__actions__/Menu/v1"
 export * from "./__actions__/Button/v1"