@kaizen/components 1.55.1 → 1.56.0

package/src/__actions__/Menu/v3/_docs/Menu.mdx

@@ -0,0 +1,202 @@
+import { Canvas, Meta, Controls } from "@storybook/blocks"
+import { ResourceLinks, SbContent, Installation, DosAndDonts, DoOrDont } from "~storybook/components"
+import * as MenuDocsStories from "./Menu.docs.stories"
+import * as MenuStories from "./Menu.stories"
+
+<Meta title="Actions/Menu/v3/Usage Guidelines" />
+
+<SbContent>
+  # Menu (v3)
+
+  Updated July 6, 2024
+</SbContent>
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__actions__/Menu"
+  figma="https://www.figma.com/design/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-Heart-UI-Kit?m=auto&node-id=6262-0&t=I4H23jCrCJz4O2nf-1"
+  ariaComponentPage="https://react-spectrum.adobe.com/react-aria/Menu.html"
+  apiSpecification="/?path=/docs/actions-menu-v3-api-specification--docs"
+/>
+
+<SbContent>
+  <Installation
+    installCommand="pnpm add @kaizen/components"
+    importStatement='import { MenuTrigger, Menu, MenuItem } from "@kaizen/components/v3/actions"'
+  />
+
+  ## Overview
+
+  A menu displays a list of actions in a popover, toggled opened with a button.
+</SbContent>
+
+<Canvas
+  of={MenuStories.Playground}
+  source={{code: `
+<TooltipTrigger>
+  <Button>
+    <MeatballsIcon role="img" aria-label="Additional actions" />
+  </Button>
+  <Popover>
+    <Menu>
+      <MenuItem>Save</MenuItem>
+      <MenuItem>Edit</MenuItem>
+      <MenuItem>Delete</MenuItem>
+    </Menu>
+  </Popover>
+</TooltipTrigger>
+  `}}
+ />
+<Controls of={MenuStories.Playground} include={["placement", "isOpen"]} className="mb-64" />
+
+
+<SbContent className="mb-64">
+  ### Anatomy
+
+  - A Menu is made up of:
+    - A trigger button
+    - A popover
+    - A list of menu items
+  - Menu items may be organised into sections, with a heading for each section.
+  - The menu trigger button, which may be any variation of a button.
+</SbContent>
+
+
+<SbContent className="mb-64">
+  ### When to use
+
+  - When you have a group of related actions for a page or item on the page.
+  - The actions either:
+    - Cause an action on the page (e.g. delete), or
+    - Navigate somewhere
+</SbContent>
+
+<SbContent className="mb-64">
+  ### When not to use
+
+  - When you want to persist a user selection.
+    - Use a Select/Multi-Select or Combobox/Multi-Combobox component instead.
+  - When you want additional elements beyond a list of menu items (e.g. a search input)
+    - Use a Modal, or construct your own pattern with a Popover.
+    - It's recommended that you avoid this because of the complexity it adds for accessibility.
+  - Inside a navigation bar
+    - Different DOM elements and behaviour is required for a dropdown menu in a navigation bar.
+</SbContent>
+
+<div className="flex flex-col mt-16 gap-40 mb-64">
+  <div className="flex flex-col m-0 gap-16">
+    <SbContent>
+      #### Do use a menu for an overflow of actions
+      Menus work well as an overflow for a list of actions on a page or section. Try to avoid using menus for a single action, favouring an inline button/link instead.
+
+    </SbContent>
+    <DosAndDonts>
+      <DoOrDont story={MenuDocsStories.ItemsDo} />
+      <DoOrDont story={MenuDocsStories.ItemsDont} isDont />
+    </DosAndDonts>
+  </div>
+</div>
+
+<div className="flex flex-col mt-16 gap-40 mb-64">
+  <div className="flex flex-col m-0 gap-16">
+    <SbContent>
+      #### Don't use Menus to persist a user selection
+
+      Menus are not intended for a list of options where a user selection persists. Use a Select/Multi-Select or Combobox/Multi-Combobox component instead.
+
+    </SbContent>
+    <DosAndDonts>
+      <DoOrDont story={MenuDocsStories.SelectionDont} isDont />
+    </DosAndDonts>
+  </div>
+</div>
+
+
+<div className="flex flex-col mt-16 gap-40 mb-64">
+  <div className="flex flex-col m-0 gap-16">
+    <SbContent>
+      #### Do use a chevron icon when using a text label
+      Providing this icon is an important part of visually communicating that the button triggers a menu.
+
+    </SbContent>
+    <DosAndDonts>
+      <DoOrDont story={MenuDocsStories.LabelChevronDo} />
+      <DoOrDont story={MenuDocsStories.LabelChevronDont} isDont />
+    </DosAndDonts>
+  </div>
+</div>
+
+<div className="flex flex-col mt-16 gap-40 mb-64">
+  <div className="flex flex-col m-0 gap-16">
+    <SbContent>
+      #### Do give the trigger button a concise and unique label
+      The label of the trigger button will be important for screen reader users to understand the purpose of the menu.
+
+      Menu button labels are often too generic and need context added. E.g. a label of &ldquo;Actions&rdquo; is too generic if you have multiple menus on a single page.
+
+      Avoid using the words &ldquo;Open/close&rdquo; or  &ldquo;Menu&rdquo; in the label, both of these things are communicated to screen reader users already with ARIA properties.
+
+      The following examples show you the verbose labels. In practice you will either want to use visually hidden text (when using a text-based trigger button), or an aria-label (when using an icon-based trigger button) to create the label.
+    </SbContent>
+    <DosAndDonts>
+      <DoOrDont story={MenuDocsStories.LabelDo} />
+      <DoOrDont story={MenuDocsStories.LabelDont} isDont />
+    </DosAndDonts>
+  </div>
+</div>
+
+<div className="flex flex-col mt-16 gap-40 mb-64">
+  <div className="flex flex-col m-0 gap-16">
+    <SbContent>
+      #### Do use icons in menu items for common actions
+      Icons beside items make sense for common actions (pencil for edit, trash can for delete, etc).
+
+      Avoid using icons when:
+      - The action is unique and doesn't have a commonly known icon associated.
+      - Not all menu items will have an icon
+      - You will have duplicates of icons in the list
+
+    </SbContent>
+    <DosAndDonts>
+      <DoOrDont story={MenuDocsStories.ItemsDo} />
+      <DoOrDont story={MenuDocsStories.IconsDont} isDont />
+    </DosAndDonts>
+  </div>
+</div>
+
+<div className="flex flex-col mt-16 gap-40 mb-64">
+  <div className="flex flex-col m-0 gap-16">
+    <SbContent>
+      #### Don't repeat the same word in the menu item labels
+      Context may be useful in some cases, but avoid adding context if it will be repeated in every menu item label.
+    </SbContent>
+    <DosAndDonts>
+      <DoOrDont story={MenuDocsStories.MenuItemLabelsDont} isDont />
+    </DosAndDonts>
+  </div>
+</div>
+
+<div className="flex flex-col mt-16 gap-40 mb-64">
+  <div className="flex flex-col m-0 gap-16">
+    <SbContent>
+      #### Do use sentence case for menu items
+      Write menu items in sentence case unless they contain words that are branded terms.
+    </SbContent>
+    <DosAndDonts>
+      <DoOrDont story={MenuDocsStories.SentenceCaseDo}/>
+      <DoOrDont story={MenuDocsStories.SentenceCaseDont} isDont />
+    </DosAndDonts>
+  </div>
+</div>
+
+<div className="flex flex-col mt-16 gap-40 mb-64">
+  <div className="flex flex-col m-0 gap-16">
+    <SbContent>
+      #### Don't use elipses in menu items
+      Avoid using ellipses (…) in menu item names within products whenever possible. An ellipsis often implies that the action for a menu item will open in a new view, or that a user will be taken elsewhere.
+    </SbContent>
+    <DosAndDonts>
+      <DoOrDont story={MenuDocsStories.ElipsesDo}/>
+      <DoOrDont story={MenuDocsStories.ElipsesDont} isDont />
+    </DosAndDonts>
+  </div>
+</div>

package/src/__actions__/Menu/v3/_docs/Menu.spec.stories.tsx

@@ -0,0 +1,269 @@
+import React, { useState } from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { expect, userEvent, waitFor, within, fn } from "@storybook/test"
+import isChromatic from "chromatic"
+import { Popover, Header, Section } from "react-aria-components"
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  BookmarkOffIcon,
+  CautionIcon,
+  EditIcon,
+  ExternalLinkIcon,
+  MeatballsIcon,
+  TrashIcon,
+} from "~components/Icon"
+import { Button } from "~components/__actions__/v3"
+import { Menu, MenuItem, MenuTrigger } from "../index"
+
+const meta = {
+  title: "Actions/Menu/v3/Tests",
+  component: MenuTrigger,
+  args: {
+    defaultOpen: isChromatic(),
+    children: <></>,
+  },
+} satisfies Meta<typeof MenuTrigger>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const KitchenSink: Story = {
+  parameters: {
+    chromatic: { disable: false },
+  },
+  args: {
+    defaultOpen: true,
+  },
+  decorators: [
+    Story => (
+      <div style={{ height: "500px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  render: ({ defaultOpen, ...args }) => (
+    <MenuTrigger defaultOpen={defaultOpen} {...args}>
+      <Button>
+        <MeatballsIcon role="img" aria-label="Additional actions" />
+      </Button>
+      <Popover>
+        <Menu>
+          <Section>
+            <Header>Section One</Header>
+            <MenuItem
+              icon={<BookmarkOffIcon role="presentation" />}
+              href="https://cultureamp.com"
+            >
+              Save
+            </MenuItem>
+            <MenuItem icon={<EditIcon role="presentation" />}>Edit</MenuItem>
+          </Section>
+          <Section>
+            <MenuItem icon={<ArrowUpIcon role="presentation" />}>
+              Move Up
+            </MenuItem>
+            <MenuItem icon={<ArrowDownIcon role="presentation" />}>
+              Menu item with a longer label
+            </MenuItem>
+          </Section>
+          <Section>
+            <MenuItem icon={<TrashIcon role="presentation" />}>Delete</MenuItem>
+            <MenuItem icon={<TrashIcon role="presentation" />} isDisabled>
+              Delete but disabled
+            </MenuItem>
+            <MenuItem>Other action</MenuItem>
+            <MenuItem>Other action</MenuItem>
+            <MenuItem>Other action</MenuItem>
+          </Section>
+        </Menu>
+      </Popover>
+    </MenuTrigger>
+  ),
+}
+
+export const Basic: Story = {
+  render: ({ defaultOpen, ...args }) => (
+    <MenuTrigger defaultOpen={defaultOpen} {...args}>
+      <Button>
+        <MeatballsIcon role="img" aria-label="Additional actions" />
+      </Button>
+      <Popover>
+        <Menu>
+          <MenuItem
+            icon={<CautionIcon role="presentation" />}
+            onAction={() => alert("Menu item pressed")}
+          >
+            Trigger an alert
+          </MenuItem>
+          <MenuItem
+            icon={<ExternalLinkIcon role="presentation" />}
+            href="https://cultureamp.com"
+            target="_blank"
+          >
+            Go to cultureamp.com
+          </MenuItem>
+          <MenuItem>Item 3</MenuItem>
+          <MenuItem>Item 4</MenuItem>
+          <MenuItem>Item 5</MenuItem>
+        </Menu>
+      </Popover>
+    </MenuTrigger>
+  ),
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+    const menuButton = canvas.getByRole("button")
+
+    await step("Menu opens on click", async () => {
+      await userEvent.click(menuButton)
+      await waitFor(() => expect(canvas.getByRole("menu")).toBeVisible())
+    })
+
+    await step("Arrow keys adjust focus", async () => {
+      await userEvent.keyboard("[ArrowDown]")
+      await waitFor(() =>
+        expect(
+          canvas.getByRole("menuitem", { name: "Go to cultureamp.com" })
+        ).toHaveFocus()
+      )
+    })
+
+    await step("Esc closes menu", async () => {
+      await userEvent.keyboard("[Escape]")
+      await waitFor(() =>
+        expect(canvas.queryByRole("menu")).not.toBeInTheDocument()
+      )
+    })
+
+    await step("Menu opens on enter press", async () => {
+      await userEvent.keyboard("[Enter]")
+      await waitFor(() =>
+        expect(
+          canvas.getByRole("menuitem", { name: "Trigger an alert" })
+        ).toHaveFocus()
+      )
+      await userEvent.keyboard("[Escape]")
+    })
+
+    await step("Menu opens on arrow up/down", async () => {
+      await userEvent.keyboard("[ArrowDown]")
+      await waitFor(() =>
+        expect(
+          canvas.getByRole("menuitem", { name: "Trigger an alert" })
+        ).toHaveFocus()
+      )
+      await userEvent.keyboard("[Escape]")
+
+      await userEvent.keyboard("[ArrowUp]")
+      await waitFor(() =>
+        expect(canvas.getByRole("menuitem", { name: "Item 5" })).toHaveFocus()
+      )
+    })
+  },
+}
+
+const mockOnClick = fn()
+export const DisabledItems: Story = {
+  render: () => (
+    <MenuTrigger>
+      <Button>
+        <MeatballsIcon role="img" aria-label="Additional actions" />
+      </Button>
+      <Popover>
+        <Menu>
+          <MenuItem isDisabled onAction={mockOnClick}>
+            Item 1
+          </MenuItem>
+          <MenuItem>Item 2</MenuItem>
+          <MenuItem isDisabled>Item 3</MenuItem>
+          <MenuItem>Item 4</MenuItem>
+          <MenuItem>Item 5</MenuItem>
+        </Menu>
+      </Popover>
+    </MenuTrigger>
+  ),
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+    const menuButton = canvas.getByRole("button")
+
+    await step("Disabled items are unable to be focused", async () => {
+      await userEvent.click(menuButton)
+      expect(canvas.getByRole("menuitem", { name: "Item 2" })).toHaveFocus()
+      await userEvent.keyboard("[ArrowDown]")
+      await userEvent.keyboard("[ArrowDown]")
+      expect(canvas.getByRole("menuitem", { name: "Item 5" })).toHaveFocus()
+      await userEvent.keyboard("[Escape]")
+    })
+
+    await step("Clicking a disabled item doesn't trigger onClick", async () => {
+      await userEvent.click(menuButton)
+      await userEvent.click(canvas.getByRole("menuitem", { name: "Item 1" }))
+      await waitFor(() => expect(mockOnClick).not.toBeCalled())
+    })
+  },
+}
+
+export const WithSections: Story = {
+  render: () => (
+    <MenuTrigger>
+      <Button>
+        <MeatballsIcon role="img" aria-label="Additional actions" />
+      </Button>
+      <Popover>
+        <Menu>
+          <Section>
+            <Header>Section One</Header>
+            <MenuItem>Item 1</MenuItem>
+            <MenuItem>Item 2</MenuItem>
+          </Section>
+
+          <Section>
+            <Header>Section Two</Header>
+            <MenuItem>Item 3</MenuItem>
+            <MenuItem>Item 4</MenuItem>
+            <MenuItem>Item 5</MenuItem>
+          </Section>
+        </Menu>
+      </Popover>
+    </MenuTrigger>
+  ),
+}
+
+export const Controlled: Story = {
+  render: () => {
+    const [isOpen, setOpen] = useState<boolean>(false)
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(!isOpen)} className="mb-6">
+          Toggle open
+        </button>
+        <MenuTrigger isOpen={isOpen} onOpenChange={setOpen}>
+          <Button>
+            <MeatballsIcon role="img" aria-label="Additional actions" />
+          </Button>
+          <Popover>
+            <Menu>
+              <MenuItem>Item 1</MenuItem>
+              <MenuItem onAction={() => setOpen(true)}>Item 2</MenuItem>
+              <MenuItem>Item 3</MenuItem>
+              <MenuItem>Item 4</MenuItem>
+              <MenuItem>Item 5</MenuItem>
+            </Menu>
+          </Popover>
+        </MenuTrigger>
+      </>
+    )
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+    const externalButton = await canvas.findByRole("button", {
+      name: "Toggle open",
+    })
+
+    await step("Menu opens on external button click", async () => {
+      await userEvent.click(externalButton)
+      await waitFor(() => expect(canvas.getByRole("menu")).toBeVisible())
+    })
+  },
+}

package/src/__actions__/Menu/v3/_docs/Menu.stories.tsx

@@ -0,0 +1,69 @@
+import React, { FunctionComponent } from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import isChromatic from "chromatic"
+import { Popover } from "react-aria-components"
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  BookmarkOffIcon,
+  EditIcon,
+  MeatballsIcon,
+  TrashIcon,
+} from "~components/Icon"
+import { Button } from "~components/__actions__/v3"
+import { Menu, MenuTrigger, MenuItem } from "../index"
+import * as testStories from "./Menu.spec.stories"
+
+const meta = {
+  title: "Actions/Menu/v3",
+  component: MenuTrigger,
+  args: {
+    defaultOpen: isChromatic(),
+    children: <></>,
+  },
+  subcomponents: { Menu, MenuItem } as Record<string, FunctionComponent<any>>,
+} satisfies Meta<typeof MenuTrigger>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  render: ({ defaultOpen: _, ...args }) => (
+    <MenuTrigger {...args}>
+      {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
+      <Button>
+        <MeatballsIcon role="img" aria-label="Additional actions" />
+      </Button>
+      <Popover>
+        <Menu>
+          <MenuItem icon={<BookmarkOffIcon role="presentation" />}>
+            Save
+          </MenuItem>
+          <MenuItem icon={<EditIcon role="presentation" />}>Edit</MenuItem>
+          <MenuItem icon={<ArrowUpIcon role="presentation" />}>
+            Move up
+          </MenuItem>
+          <MenuItem icon={<ArrowDownIcon role="presentation" />}>
+            Move down
+          </MenuItem>
+          <MenuItem icon={<TrashIcon role="presentation" />}>Delete</MenuItem>
+        </Menu>
+      </Popover>
+    </MenuTrigger>
+  ),
+}
+
+export const Basic: Story = { ...testStories.Basic, play: undefined }
+export const DisabledItems: Story = {
+  ...testStories.DisabledItems,
+  play: undefined,
+}
+export const WithSections: Story = {
+  ...testStories.WithSections,
+  play: undefined,
+}
+export const Controlled: Story = {
+  ...testStories.Controlled,
+  play: undefined,
+}

package/src/__actions__/Menu/v3/index.ts

@@ -0,0 +1,3 @@
+export * from "./Menu"
+export * from "./MenuItem"
+export * from "./MenuTrigger"

package/src/__actions__/v1.ts

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

package/src/__actions__/v2.ts

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

package/src/__actions__/v3.ts

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

package/src/__future__/Workflow/_docs/Workflow.stories.tsx

@@ -1,8 +1,8 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { Button } from "~components/Button"
 import { CloseIcon, VisibleIcon } from "~components/Icon"
 import { TextField } from "~components/TextField"
+import { Button } from "~components/__actions__/v2"
 import { Workflow } from "../"
 import { WorkflowControls } from "./controls"
 

package/src/__future__/Workflow/_docs/WorkflowFooter.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { Button } from "~components/Button"
+import { Button } from "~components/__actions__/v2"
 import { Workflow } from "../"
 import { WorkflowControls } from "./controls"
 

package/src/__future__/Workflow/_docs/WorkflowHeader.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { Button } from "~components/Button"
 import { CloseIcon, VisibleIcon } from "~components/Icon"
+import { Button } from "~components/__actions__/v2"
 import { Workflow } from "../"
 import { WorkflowControls } from "./controls"
 

package/src/__future__/Workflow/_docs/controls/controls.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { ArgTypes } from "@storybook/react"
-import { Button } from "~components/Button"
 import { CloseIcon, VisibleIcon } from "~components/Icon"
+import { Button } from "~components/__actions__/v2"
 
 export const WorkflowControls: Partial<ArgTypes> = {
   headerActions: {

package/src/__overlays__/Tooltip/v1/Tooltip.spec.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { render, screen, waitFor } from "@testing-library/react"
-import { Button } from "~components/Button"
+import { Button } from "~components/__actions__/v2"
 import { Tooltip } from "./index"
 
 describe("<Tooltip />", () => {

package/src/__overlays__/Tooltip/v1/_docs/Tooltip.stickersheet.stories.tsx

@@ -1,8 +1,8 @@
 import React from "react"
 import { Decorator, Meta } from "@storybook/react"
 import isChromatic from "chromatic/isChromatic"
-import { IconButton } from "~components/Button"
 import { MeatballsIcon } from "~components/Icon"
+import { IconButton } from "~components/__actions__/v2"
 import {
   StickerSheet,
   StickerSheetStory,

package/src/__overlays__/Tooltip/v1/_docs/Tooltip.stories.tsx

@@ -1,6 +1,5 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { Button, IconButton } from "~components/Button"
 import { ButtonGroup } from "~components/ButtonGroup"
 import { CheckboxField } from "~components/Checkbox"
 import { FilterButtonBase } from "~components/Filter/FilterButton/subcomponents/FilterButtonBase"
@@ -12,6 +11,7 @@ import {
   TableRow,
 } from "~components/Table"
 import { Text } from "~components/Text"
+import { Button, IconButton } from "~components/__actions__/v2"
 import { Tag } from "~components/__future__/Tag"
 import { Tooltip } from "../index"
 

package/src/__overlays__/Tooltip/v1/utils/isSemanticElement.spec.tsx

@@ -1,6 +1,6 @@
 import React from "react"
-import { Button, IconButton } from "~components/Button"
 import { ArrowRightIcon } from "~components/Icon"
+import { Button, IconButton } from "~components/__actions__/v2"
 import { isSemanticElement } from "./isSemanticElement"
 
 describe("isSemanticElement", () => {

package/src/__overlays__/Tooltip/v3/_docs/Tooltip.docs.stories.tsx

@@ -1,12 +1,12 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import isChromatic from "chromatic"
-import { Button, IconButton } from "~components/Button"
 import { FieldMessage } from "~components/FieldMessage"
 import { AddIcon, QuestionIcon } from "~components/Icon"
 import { Input } from "~components/Input"
 import { Label } from "~components/Label"
 import { Text } from "~components/Text"
+import { Button, IconButton } from "~components/__actions__/v2"
 import { Focusable } from "~components/__overlays__/v3"
 import { Tooltip, TooltipTrigger } from "../index"
 import * as TestStories from "./Tooltip.spec.stories"

package/src/__overlays__/Tooltip/v3/_docs/Tooltip.spec.stories.tsx

@@ -2,10 +2,10 @@ import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import { expect, userEvent, waitFor, within } from "@storybook/test"
 import isChromatic from "chromatic"
-import { Button, IconButton } from "~components/Button"
 import { AddIcon } from "~components/Icon"
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from "~components/Tabs"
 import { Text } from "~components/Text"
+import { Button, IconButton } from "~components/__actions__/v2"
 import { Tag } from "~components/__future__/Tag"
 import { Focusable } from "~components/__overlays__/v3"
 import { Tooltip, TooltipTrigger } from "../index"

package/src/__overlays__/Tooltip/v3/_docs/Tooltip.stories.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import isChromatic from "chromatic"
-import { Button } from "~components/Button"
+import { Button } from "~components/__actions__/v2"
 import { Tag } from "~components/__future__"
 import { Focusable } from "~components/__overlays__/v3"
 import { Tooltip, TooltipTrigger } from "../index"