FilterBar: Use v3 Button+Menu for 'Add filters'

.changeset/violet-snakes-wink.md

@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+FilterBar: Use new Button+Menu for 'Add filters' button

packages/components/src/Filter/FilterBar/FilterBar.spec.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import { screen, waitFor, within, render } from "@testing-library/react"
+import { screen, waitFor, render } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { vi } from "vitest"
 import { FilterMultiSelect } from "../index"
@@ -215,8 +215,7 @@ describe("<FilterBar />", () => {
       const addFiltersButton = getByRole("button", { name: "Add Filters" })
       await user.click(addFiltersButton)
 
-      const list = getByRole("list")
-      const menuOption = within(list).getByRole("button", { name: "Topping" })
+      const menuOption = getByRole("menuitem", { name: "Topping" })
 
       await waitFor(() => {
         expect(menuOption).toBeVisible()
@@ -238,7 +237,7 @@ describe("<FilterBar />", () => {
     })
 
     it("does not show active removable filters in the Add Filters menu", async () => {
-      const { getByRole } = render(
+      const { getByRole, queryByRole } = render(
         <FilterBarWrapper<ValuesRemovable>
           filters={filtersRemovable}
           defaultValues={{ topping: "pearls" }}
@@ -249,15 +248,14 @@ describe("<FilterBar />", () => {
       const addFiltersButton = getByRole("button", { name: "Add Filters" })
       await user.click(addFiltersButton)
 
-      const list = getByRole("list")
-      const menuOption = within(list).queryByRole("button", { name: "Topping" })
+      const menuOption = queryByRole("menuitem", { name: "Topping" })
       await waitFor(() => {
         expect(menuOption).not.toBeInTheDocument()
       })
     })
 
     it("clears the value of a filter if it is removed", async () => {
-      const { getByRole } = render(
+      const { getByRole, queryByRole } = render(
         <FilterBarWrapper<ValuesRemovable>
           filters={filtersRemovable}
           defaultValues={{ topping: "pearls" }}
@@ -276,15 +274,14 @@ describe("<FilterBar />", () => {
       const addFiltersButton = getByRole("button", { name: "Add Filters" })
       await user.click(addFiltersButton)
 
-      const list = getByRole("list")
-      const menuOption = within(list).getByRole("button", { name: "Topping" })
+      const menuOption = getByRole("menuitem", { name: "Topping" })
       await waitFor(() => {
         expect(menuOption).toBeVisible()
       })
 
       await user.click(menuOption)
       await waitFor(() => {
-        expect(list).not.toBeInTheDocument()
+        expect(queryByRole("menu")).not.toBeInTheDocument()
       })
       expect(getByRole("button", { name: "Topping" })).toBeVisible()
     })
@@ -303,15 +300,17 @@ describe("<FilterBar />", () => {
       const addFiltersButton = getByRole("button", { name: "Add Filters" })
       await user.click(addFiltersButton)
 
-      const menuOptionIceLevel = getByRole("button", { name: "Ice Level" })
+      const menuOptionIceLevel = getByRole("menuitem", { name: "Ice Level" })
       await user.click(menuOptionIceLevel)
       await user.click(addFiltersButton)
 
-      const menuOptionFlavour = getByRole("button", { name: "Flavour" })
+      const menuOptionFlavour = getByRole("menuitem", { name: "Flavour" })
       await user.click(menuOptionFlavour)
       await user.click(addFiltersButton)
 
-      const menuOptionSugarLevel = getByRole("button", { name: "Sugar Level" })
+      const menuOptionSugarLevel = getByRole("menuitem", {
+        name: "Sugar Level",
+      })
       await user.click(menuOptionSugarLevel)
 
       const filters = getAllByTestId(TEST_ID__FILTER)
@@ -335,7 +334,7 @@ describe("<FilterBar />", () => {
       const addFiltersButton = getByRole("button", { name: "Add Filters" })
       await user.click(addFiltersButton)
 
-      const menuOptionIceLevel = getByRole("button", { name: "Ice Level" })
+      const menuOptionIceLevel = getByRole("menuitem", { name: "Ice Level" })
       await user.click(menuOptionIceLevel)
 
       expect(getByRole("button", { name: "Ice Level" })).toHaveFocus()
@@ -350,7 +349,7 @@ describe("<FilterBar />", () => {
       const addFiltersButton = getByRole("button", { name: "Add Filters" })
       await user.click(addFiltersButton)
 
-      const menuOptionOthers = getByRole("button", { name: "Others" })
+      const menuOptionOthers = getByRole("menuitem", { name: "Others" })
       await user.click(menuOptionOthers)
 
       expect(getByRole("button", { name: "Others" })).toHaveFocus()
@@ -476,8 +475,7 @@ describe("<FilterBar />", () => {
 
         await user.click(addFiltersButton)
 
-        const list = getByRole("list")
-        const menuOption = within(list).getByRole("button", { name: "Topping" })
+        const menuOption = getByRole("menuitem", { name: "Topping" })
 
         await waitFor(() => {
           expect(menuOption).toBeVisible()
@@ -693,11 +691,10 @@ describe("<FilterBar />", () => {
 
         await user.click(addFiltersButton)
 
-        const list = getByRole("list")
-        const menuOptionSugar = within(list).getByRole("button", {
+        const menuOptionSugar = getByRole("menuitem", {
           name: "Sugar",
         })
-        const menuOptionSyrup = within(list).getByRole("button", {
+        const menuOptionSyrup = getByRole("menuitem", {
           name: "Syrup",
         })
         expect(menuOptionSugar).toBeVisible()
@@ -706,7 +703,7 @@ describe("<FilterBar />", () => {
         await user.click(menuOptionSugar)
 
         await waitFor(() => {
-          expect(list).not.toBeInTheDocument()
+          expect(queryByRole("menu")).not.toBeInTheDocument()
         })
         const sugarButton = getByRole("button", { name: "Sugar" })
         expect(sugarButton).toBeVisible()

packages/components/src/Filter/FilterBar/_docs/FilterBar.spec.stories.tsx

@@ -177,7 +177,7 @@ export const ClearAllFromRemovable: Story = {
       })
 
       await waitFor(() => {
-        userEvent.click(canvas.getByRole("button", { name: "Toppings" }))
+        userEvent.click(canvas.getByRole("menuitem", { name: "Toppings" }))
       })
     })
 
@@ -226,7 +226,7 @@ export const ClearAllRemovesItself: Story = {
       await waitFor(() =>
         userEvent.click(canvas.getByRole("button", { name: "Add Filters" }))
       )
-      await userEvent.click(canvas.getByRole("button", { name: "Drank" }))
+      await userEvent.click(canvas.getByRole("menuitem", { name: "Drank" }))
     })
 
     await step(

packages/components/src/Filter/FilterBar/_docs/FilterBar.stories.tsx

@@ -838,7 +838,7 @@ export const UpdatesLabels: Story = {
     )
   },
   play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement)
+    const canvas = within(canvasElement.parentElement!)
 
     await step("Initial render complete", async () => {
       await waitFor(() => canvas.getByRole("button", { name: "Add Filters" }))

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

@@ -61,13 +61,13 @@ describe("<AddFiltersMenu />", () => {
     await user.click(addFiltersButton)
 
     await waitFor(() => {
-      expect(screen.getByRole("list")).toBeVisible()
+      expect(screen.getByRole("menu")).toBeVisible()
     })
-    expect(screen.getByRole("button", { name: "Coffee" })).toBeVisible()
+    expect(screen.getByRole("menuitem", { name: "Coffee" })).toBeVisible()
     expect(
-      screen.queryByRole("button", { name: "Tea" })
+      screen.queryByRole("menuitem", { name: "Tea" })
     ).not.toBeInTheDocument()
-    expect(screen.getByRole("button", { name: "Milk" })).toBeVisible()
+    expect(screen.getByRole("menuitem", { name: "Milk" })).toBeVisible()
   })
 
   it("disables the Add Filters button when there are no inactive filters", async () => {

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
-import { Menu, MenuList, MenuItem, Button } from "~components/__actions__/v2"
+import { Popover } from "react-aria-components"
+import { MenuTrigger, Menu, MenuItem, Button } from "~components/__actions__/v3"
 import { Icon } from "~components/__future__/Icon"
 import { useFilterBarContext } from "../../context/FilterBarContext"
 
@@ -27,27 +28,26 @@ export const AddFiltersMenu = (): JSX.Element => {
   }, [focusId])
 
   return (
-    <Menu
-      button={
-        <Button
-          ref={buttonRef}
-          label={menuButtonLabel}
-          secondary
-          disabled={inactiveFilters.length === 0}
-          icon={<Icon name="add" isPresentational />}
-        />
-      }
-    >
-      <MenuList>
-        {inactiveFilters.map(({ id, name }) => (
-          <MenuItem
-            key={id}
-            label={name}
-            onClick={(): void => showFilter(id)}
-          />
-        ))}
-      </MenuList>
-    </Menu>
+    <MenuTrigger>
+      <Button
+        ref={buttonRef}
+        size="large"
+        icon={<Icon name="add" isPresentational />}
+        variant="tertiary"
+        isDisabled={inactiveFilters.length === 0}
+      >
+        {menuButtonLabel}
+      </Button>
+      <Popover>
+        <Menu>
+          {inactiveFilters.map(({ id, name }) => (
+            <MenuItem key={id} onAction={(): void => showFilter(id)}>
+              {name}
+            </MenuItem>
+          ))}
+        </Menu>
+      </Popover>
+    </MenuTrigger>
   )
 }