feat(Popover): migrate to Tailwind

docs/src/data/tailwind-migration-status.yaml

@@ -65,7 +65,7 @@ NavigationBar: true
 NotificationBadge: true
 OrbitProvider: true
 Pagination: false
-Popover: false
+Popover: true
 Portal: true
 Radio: true
 NewSeatIcon: false

packages/orbit-components/cypress/integration/pages/lock-scrolling.test.ts

@@ -6,7 +6,7 @@ describe("useLockScrolling", () => {
   it("should listen for viewport resize", () => {
     cy.viewport(breakpoint - 1, 600);
     cy.visit("/lock-scrolling");
-    cy.findByRole("button", { name: "Open" }).click();
+    cy.findAllByRole("button", { name: "Open" }).eq(1).click();
     cy.get("body").should("have.css", "overflow-y", "hidden");
     // cy.get("body").should("have.css", "padding-right", "15px");
     cy.viewport(breakpoint, 600);
@@ -20,8 +20,8 @@ describe("useLockScrolling", () => {
   it("should unlock scrolling after last lock is cleared", () => {
     cy.viewport(breakpoint - 1, 600);
     cy.visit("/lock-scrolling");
-    cy.findByRole("button", { name: "Open" }).click();
-    cy.findByRole("button", { name: "Open nested" }).click();
+    cy.findAllByRole("button", { name: "Open" }).eq(1).click();
+    cy.findAllByRole("button", { name: "Open nested" }).eq(1).click();
     cy.findByRole("button", { name: "Close nested" }).click();
     cy.get("body").should("have.css", "overflow-y", "hidden");
     cy.findByRole("button", { name: "Close" }).click();

packages/orbit-components/src/Popover/Popover.ct-story.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import type { Placement } from "@popperjs/core/lib/enums";
+
+import Text from "../Text";
+import Button from "../Button";
+import Stepper from "../Stepper";
+import Stack from "../Stack";
+
+import Popover from ".";
+
+const content = <Text>Popover content</Text>;
+
+const selects = (
+  <Stack direction="column">
+    <Stack flex shrink align="center" justify="between">
+      <Stack flex direction="column" spacing="none">
+        <Text>Adult</Text>
+        <Text type="secondary">11+</Text>
+      </Stack>
+      <Stepper minValue={0} />
+    </Stack>
+    <Stack flex shrink align="center" justify="between">
+      <Stack flex direction="column" spacing="none">
+        <Text>Child</Text>
+        <Text type="secondary">2-11</Text>
+      </Stack>
+      <Stepper minValue={0} />
+    </Stack>
+  </Stack>
+);
+
+export function DefaultPopover() {
+  return (
+    <div className="flex h-screen items-center justify-center">
+      <Popover opened content={content}>
+        <Button>open popover</Button>
+      </Popover>
+    </div>
+  );
+}
+
+export function PopoverWithCustomWidth() {
+  return (
+    <div className="flex h-screen items-center justify-center">
+      <Popover opened content={content} width="400px">
+        <Button>open popover</Button>
+      </Popover>
+    </div>
+  );
+}
+
+export const PopoverPlacements = ({ placement }: { placement: Placement }) => (
+  <div className="flex h-screen items-center justify-center">
+    <Popover opened content={content} placement={placement}>
+      <Button>open popover</Button>
+    </Popover>
+  </div>
+);
+
+export const PopoverWithFixedPosition = () => (
+  <div className="flex h-screen items-center justify-center">
+    <Popover opened content={content} fixed>
+      <Button>open popover</Button>
+    </Popover>
+  </div>
+);
+
+export const PopoverOverlapped = () => (
+  <div className="flex h-screen items-center justify-center">
+    <Popover opened content={content} overlapped>
+      <Button>open popover</Button>
+    </Popover>
+  </div>
+);
+
+export const PopoverLongContent = () => (
+  <div className="flex h-screen items-center justify-center">
+    <Popover opened content={<Stack>{Array.from({ length: 8 }).map(() => selects)}</Stack>}>
+      <Button>open popover</Button>
+    </Popover>
+  </div>
+);

packages/orbit-components/src/Popover/Popover.ct.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { test, expect } from "@playwright/experimental-ct-react";
+
+import {
+  DefaultPopover,
+  PopoverWithCustomWidth,
+  PopoverWithFixedPosition,
+  PopoverPlacements,
+  PopoverOverlapped,
+  PopoverLongContent,
+} from "./Popover.ct-story";
+import { PLACEMENTS } from "../common/consts";
+
+test.describe("visual Popover", () => {
+  test(`screenshot for default`, async ({ mount }, { project }) => {
+    if (project.name === "Desktop") {
+      const component = await mount(<DefaultPopover />);
+
+      await expect(component).toHaveScreenshot();
+    }
+  });
+
+  Object.values(PLACEMENTS).forEach(placement => {
+    test(`screenshot for placement ${placement}`, async ({ mount }, { project }) => {
+      if (project.name === "Desktop") {
+        const component = await mount(<PopoverPlacements placement={placement} />);
+
+        await expect(component).toHaveScreenshot();
+      }
+    });
+  });
+
+  test(`screenshot for custom width`, async ({ mount }, { project }) => {
+    if (project.name === "Desktop") {
+      const component = await mount(<PopoverWithCustomWidth />);
+
+      await expect(component).toHaveScreenshot();
+    }
+  });
+
+  test(`screenshot for fixed position`, async ({ mount }, { project }) => {
+    if (project.name === "Desktop") {
+      const component = await mount(<PopoverWithFixedPosition />);
+
+      await expect(component).toHaveScreenshot();
+    }
+  });
+
+  test(`screenshot for overlapped`, async ({ mount }, { project }) => {
+    if (project.name === "Desktop") {
+      const component = await mount(<PopoverOverlapped />);
+
+      await expect(component).toHaveScreenshot();
+    }
+  });
+
+  test(`screenshot for long content`, async ({ mount }, { project }) => {
+    if (project.name === "Desktop") {
+      const component = await mount(<PopoverLongContent />);
+
+      await expect(component).toHaveScreenshot();
+    }
+  });
+});

packages/orbit-components/src/Popover/Popover.stories.tsx

@@ -34,22 +34,22 @@ const ScrollWrapper = styled.div`
 `;
 
 const selects = (
-  <>
-    <Stack align="center">
-      <Stack spacing="none">
+  <Stack direction="column">
+    <Stack flex shrink align="center" justify="between">
+      <Stack inline direction="column" spacing="none">
         <Text>Adult</Text>
         <Text type="secondary">11+</Text>
       </Stack>
       <Stepper minValue={0} />
     </Stack>
-    <Stack align="center">
-      <Stack spacing="none">
+    <Stack flex shrink align="center" justify="between">
+      <Stack inline direction="column" spacing="none">
         <Text>Child</Text>
         <Text type="secondary">2-11</Text>
       </Stack>
       <Stepper minValue={0} />
     </Stack>
-  </>
+  </Stack>
 );
 
 const content = <Stack>{selects}</Stack>;

packages/orbit-components/src/Popover/__tests__/index.test.tsx

@@ -37,7 +37,7 @@ describe("Popover", () => {
       </Popover>,
     );
 
-    const openButton = screen.getByRole("button", { name: "Open" });
+    const openButton = screen.getAllByRole("button", { name: "Open" })[1];
     await user.click(openButton);
     expect(onOpen).toHaveBeenCalled();
     expect(screen.getByTestId(dataTest)).toBeInTheDocument();
@@ -88,7 +88,7 @@ describe("Popover", () => {
     );
 
     // default is 4px
-    expect(screen.getByRole("tooltip")).toHaveStyle({ top: "10" });
+    expect(screen.getByRole("dialog")).toHaveStyle({ top: "10" });
     // Needs to flush async `floating-ui` hooks
     // https://github.com/floating-ui/floating-ui/issues/1520
     await act(async () => {});
@@ -100,10 +100,11 @@ describe("Popover", () => {
         <Button>Open popover</Button>
       </Popover>,
     );
-    await user.click(screen.getByRole("button"));
+
+    await user.click(screen.getAllByRole("button")[1]);
     const overlay = (await screen.findByTestId("popover")).previousElementSibling;
     expect(overlay).toBeInTheDocument();
     if (overlay) await user.click(overlay);
-    expect(screen.queryByTestId("popover")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("dialog")).not.toBeInTheDocument();
   });
 });