@@ -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`] = `
+
+
+ Notifications have moved
+
+
+ From now on, click the icon here to view your notifications.
+
+
+
+`;
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,
],
);