diff --git a/playwright/visual.test.ts-snapshots/Release-Announcement-No-Arrow-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Release-Announcement-No-Arrow-1-chromium-linux.png new file mode 100644 index 00000000..1e49fa7e Binary files /dev/null and b/playwright/visual.test.ts-snapshots/Release-Announcement-No-Arrow-1-chromium-linux.png differ diff --git a/src/components/ReleaseAnnouncement/ReleaseAnnouncement.stories.tsx b/src/components/ReleaseAnnouncement/ReleaseAnnouncement.stories.tsx index 7a531df5..d46caed1 100644 --- a/src/components/ReleaseAnnouncement/ReleaseAnnouncement.stories.tsx +++ b/src/components/ReleaseAnnouncement/ReleaseAnnouncement.stories.tsx @@ -60,3 +60,8 @@ export const BottomPlacement = Template.bind({}); BottomPlacement.args = { placement: "bottom", }; + +export const NoArrow = Template.bind({}); +NoArrow.args = { + displayArrow: false, +}; diff --git a/src/components/ReleaseAnnouncement/ReleaseAnnouncement.test.tsx b/src/components/ReleaseAnnouncement/ReleaseAnnouncement.test.tsx index 317eb866..e07e8f83 100644 --- a/src/components/ReleaseAnnouncement/ReleaseAnnouncement.test.tsx +++ b/src/components/ReleaseAnnouncement/ReleaseAnnouncement.test.tsx @@ -24,7 +24,8 @@ import React from "react"; import { ReleaseAnnouncement } from "./ReleaseAnnouncement"; import { Button } from "../Button"; -const { Default, MultiLinesContent, BottomPlacement } = composeStories(stories); +const { Default, MultiLinesContent, BottomPlacement, NoArrow } = + composeStories(stories); describe("ReleaseAnnouncement", () => { it("renders", async () => { @@ -56,4 +57,9 @@ describe("ReleaseAnnouncement", () => { ); expect(screen.queryByRole("dialog")).toBeNull(); }); + + it("renders without an arrow", async () => { + render(); + expect(await screen.findByRole("dialog")).toMatchSnapshot(); + }); }); diff --git a/src/components/ReleaseAnnouncement/ReleaseAnnouncement.tsx b/src/components/ReleaseAnnouncement/ReleaseAnnouncement.tsx index c09ee198..6fb0ae8e 100644 --- a/src/components/ReleaseAnnouncement/ReleaseAnnouncement.tsx +++ b/src/components/ReleaseAnnouncement/ReleaseAnnouncement.tsx @@ -40,12 +40,17 @@ import { useReleaseAnnouncement } from "./useReleaseAnnouncement"; type UseReleaseAnnouncementParam = Parameters[0]; interface ReleaseAnnouncementProps - extends Omit { + extends Omit { /** * The placement of the component * @default "right" */ placement?: Placement; + /** + * Whether to display an arrow. + * @default true + */ + displayArrow?: boolean; } /** @@ -60,9 +65,10 @@ export function ReleaseAnnouncement({ */ children, placement = "right", + displayArrow = true, ...props }: PropsWithChildren): JSX.Element { - const context = useReleaseAnnouncement({ placement, ...props }); + const context = useReleaseAnnouncement({ placement, displayArrow, ...props }); return ( @@ -121,6 +127,7 @@ function ReleaseAnnouncementContainer({ const { context: floatingContext, arrowRef, + displayArrow, ...rest } = useReleaseAnnouncementContext(); @@ -137,14 +144,16 @@ function ReleaseAnnouncementContainer({ {...rest.getFloatingProps()} className={styles.content} > - + {displayArrow && ( + + )} {children} diff --git a/src/components/ReleaseAnnouncement/__snapshots__/ReleaseAnnouncement.test.tsx.snap b/src/components/ReleaseAnnouncement/__snapshots__/ReleaseAnnouncement.test.tsx.snap index dea2cbb9..f35c7235 100644 --- a/src/components/ReleaseAnnouncement/__snapshots__/ReleaseAnnouncement.test.tsx.snap +++ b/src/components/ReleaseAnnouncement/__snapshots__/ReleaseAnnouncement.test.tsx.snap @@ -170,3 +170,37 @@ exports[`ReleaseAnnouncement > renders with a long label header and description `; + +exports[`ReleaseAnnouncement > renders without an arrow 1`] = ` + +`; diff --git a/src/components/ReleaseAnnouncement/useReleaseAnnouncement.tsx b/src/components/ReleaseAnnouncement/useReleaseAnnouncement.tsx index c036d5e0..e3d9a3f1 100644 --- a/src/components/ReleaseAnnouncement/useReleaseAnnouncement.tsx +++ b/src/components/ReleaseAnnouncement/useReleaseAnnouncement.tsx @@ -53,6 +53,10 @@ interface UseReleaseAnnouncementProps { * The event handler for the close button. */ onClick: MouseEventHandler; + /** + * Whether to display an arrow. + */ + displayArrow?: boolean; } /** @@ -65,6 +69,7 @@ export function useReleaseAnnouncement({ closeLabel, placement, onClick, + displayArrow, }: UseReleaseAnnouncementProps) { // Set on `aria-labelledby` attribute const labelId = useId(); @@ -81,9 +86,10 @@ export function useReleaseAnnouncement({ offset(16), shift({ limiter: limitShift({ offset: 50 }) }), // add the little arrow along with the floating content - arrow({ - element: arrowRef, - }), + displayArrow && + arrow({ + element: arrowRef, + }), ], }); @@ -103,6 +109,7 @@ export function useReleaseAnnouncement({ description, closeLabel, onClick, + displayArrow, arrowRef, }), [ @@ -116,6 +123,7 @@ export function useReleaseAnnouncement({ description, closeLabel, onClick, + displayArrow, arrowRef, ], );