Merge pull request #247 from element-hq/florianduros/release-announce…

…ment-no-arrow

Add a no arrow option to release announcement

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,
+};

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(<NoArrow />);
+    expect(await screen.findByRole("dialog")).toMatchSnapshot();
+  });
 });

src/components/ReleaseAnnouncement/ReleaseAnnouncement.tsx

@@ -40,12 +40,17 @@ import { useReleaseAnnouncement } from "./useReleaseAnnouncement";
 type UseReleaseAnnouncementParam = Parameters<typeof useReleaseAnnouncement>[0];
 
 interface ReleaseAnnouncementProps
-  extends Omit<UseReleaseAnnouncementParam, "placement"> {
+  extends Omit<UseReleaseAnnouncementParam, "placement" | "displayArrow"> {
   /**
    * 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<ReleaseAnnouncementProps>): JSX.Element {
-  const context = useReleaseAnnouncement({ placement, ...props });
+  const context = useReleaseAnnouncement({ placement, displayArrow, ...props });
 
   return (
     <ReleaseAnnouncementContext.Provider value={context}>
@@ -121,6 +127,7 @@ function ReleaseAnnouncementContainer({
   const {
     context: floatingContext,
     arrowRef,
+    displayArrow,
     ...rest
   } = useReleaseAnnouncementContext();
 
@@ -137,14 +144,16 @@ function ReleaseAnnouncementContainer({
           {...rest.getFloatingProps()}
           className={styles.content}
         >
-          <FloatingArrow
-            ref={arrowRef}
-            context={floatingContext}
-            // design absolute value
-            width={20}
-            height={12}
-            className={styles.arrow}
-          />
+          {displayArrow && (
+            <FloatingArrow
+              ref={arrowRef}
+              context={floatingContext}
+              // design absolute value
+              width={20}
+              height={12}
+              className={styles.arrow}
+            />
+          )}
           {children}
         </div>
       </FloatingFocusManager>

src/components/ReleaseAnnouncement/__snapshots__/ReleaseAnnouncement.test.tsx.snap

@@ -170,3 +170,37 @@ exports[`ReleaseAnnouncement > renders with a long label header and description
   </button>
 </div>
 `;
+
+exports[`ReleaseAnnouncement > renders without an arrow 1`] = `
+<div
+  aria-describedby=":rn:"
+  aria-labelledby=":rm:"
+  class="_content_219739"
+  id=":ro:"
+  role="dialog"
+  style="position: absolute; left: 0px; top: 0px; transform: translate(16px, 50px);"
+  tabindex="-1"
+>
+  <h3
+    class="_typography_489030 _font-body-lg-semibold_489030 _header_219739"
+    id=":rm:"
+  >
+    Notifications have moved
+  </h3>
+  <span
+    class="_typography_489030 _font-body-sm-regular_489030 _description_219739"
+    id=":rn:"
+  >
+    From now on, click the icon here to view your notifications.
+  </span>
+  <button
+    class="_button_2a1efe _button_219739"
+    data-kind="secondary"
+    data-size="sm"
+    role="button"
+    tabindex="0"
+  >
+    Ok
+  </button>
+</div>
+`;

src/components/ReleaseAnnouncement/useReleaseAnnouncement.tsx

@@ -53,6 +53,10 @@ interface UseReleaseAnnouncementProps {
    * The event handler for the close button.
    */
   onClick: MouseEventHandler<HTMLButtonElement>;
+  /**
+   * 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,
     ],
   );