add hideArrow to Overlay #4311

Author: mark-tate

.changeset/shaggy-otters-cough.md

@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": minor
+---
+
+Add hideArrow prop to Overlay.

packages/core/src/overlay/Overlay.tsx

@@ -22,17 +22,22 @@ export interface OverlayProps extends ComponentPropsWithoutRef<"div"> {
    * Callback function triggered when open state changes.
    */
   onOpenChange?: (open: boolean) => void;
-  /*
+  /**
    * Set the placement of the Overlay component relative to the trigger element. Defaults to `top`.
    */
   placement?: "top" | "bottom" | "left" | "right";
+  /**
+   * When `true`, the arrow indicator is hidden
+   */
+  hideArrow?: boolean;
 }
 
 export const Overlay = ({
   children,
   open,
   onOpenChange,
   placement: placementProp = "top",
+  hideArrow = false,
 }: OverlayProps) => {
   const arrowRef = useRef<SVGSVGElement | null>(null);
 
@@ -48,17 +53,31 @@ export const Overlay = ({
     onOpenChange?.(newOpen);
   };
 
+  const middleware = hideArrow
+    ? [
+        offset(1),
+        flip(),
+        {
+          name: "alignStart",
+          fn({ rects }: { rects: { reference: { x: number } } }) {
+            return { x: rects.reference.x };
+          },
+        },
+        shift({ limiter: limitShift() }),
+      ]
+    : [
+        offset(11),
+        flip(),
+        shift({ limiter: limitShift() }),
+        arrow({ element: arrowRef }),
+      ];
+
   const { x, y, strategy, context, elements, floating, reference } =
     useFloatingUI({
       open: openState,
       onOpenChange: handleOpenChange,
       placement: placementProp,
-      middleware: [
-        offset(11),
-        flip(),
-        shift({ limiter: limitShift() }),
-        arrow({ element: arrowRef }),
-      ],
+      middleware,
     });
 
   const { getReferenceProps, getFloatingProps } = useInteractions([
@@ -88,7 +107,7 @@ export const Overlay = ({
         openState,
         floatingStyles,
         context,
-        arrowProps,
+        arrowProps: hideArrow ? undefined : arrowProps,
         floating,
         reference,
         getFloatingProps,

packages/core/src/overlay/OverlayContext.ts

@@ -19,7 +19,7 @@ type FloatingStyleProps = {
 export interface OverlayContextValue {
   openState: boolean;
   floatingStyles: FloatingStyleProps;
-  arrowProps: FloatingArrowProps;
+  arrowProps: FloatingArrowProps | undefined;
   context: FloatingContext;
   reference?: (node: ReferenceType | null) => void;
   floating?: (node: HTMLElement | null) => void;

packages/core/src/overlay/OverlayPanel.tsx

@@ -68,14 +68,16 @@ export const OverlayPanel = forwardRef<HTMLDivElement, OverlayPanelProps>(
         aria-labelledby={ariaLabelledby}
       >
         <div {...rest}> {children} </div>
-        <FloatingArrow
-          {...arrowProps}
-          strokeWidth={1}
-          fill="var(--overlay-background)"
-          stroke="var(--overlay-borderColor)"
-          height={6}
-          width={12}
-        />
+        {arrowProps && (
+          <FloatingArrow
+            {...arrowProps}
+            strokeWidth={1}
+            fill="var(--overlay-background)"
+            stroke="var(--overlay-borderColor)"
+            height={6}
+            width={12}
+          />
+        )}
       </FloatingComponent>
     );
   },

packages/core/stories/overlay/overlay.qa.stories.tsx

@@ -127,3 +127,34 @@ DeprecatedCloseButton.parameters = {
     disableSnapshot: false,
   },
 };
+
+export const HideArrow: StoryFn<QAContainerProps> = (props) => {
+  return (
+    <QAContainer
+      height={800}
+      cols={5}
+      itemPadding={50}
+      itemWidthAuto
+      width={1200}
+      {...props}
+    >
+      <Overlay open placement="bottom" hideArrow>
+        <OverlayTrigger>
+          <Button>Show Overlay</Button>
+        </OverlayTrigger>
+        <OverlayPanel>
+          <OverlayPanelContent>
+            <h3 className="content-heading">Title</h3>
+            <div>Content of Overlay</div>
+          </OverlayPanelContent>
+        </OverlayPanel>
+      </Overlay>
+    </QAContainer>
+  );
+};
+
+HideArrow.parameters = {
+  chromatic: {
+    disableSnapshot: false,
+  },
+};

packages/core/stories/overlay/overlay.stories.tsx

@@ -60,6 +60,27 @@ Right.args = {
   placement: "right",
 };
 
+export const HideArrow: StoryFn<OverlayProps> = ({ ...args }) => {
+  const id = useId();
+
+  return (
+    <Overlay placement="bottom" hideArrow {...args}>
+      <OverlayTrigger>
+        <Button>Show Overlay</Button>
+      </OverlayTrigger>
+
+      <OverlayPanel aria-labelledby={id}>
+        <OverlayPanelContent>
+          <h3 id={id} className="content-heading">
+            Title
+          </h3>
+          <div>Content of Overlay</div>
+        </OverlayPanelContent>
+      </OverlayPanel>
+    </Overlay>
+  );
+};
+
 const HeaderTemplate: StoryFn = ({ onOpenChange, ...props }: OverlayProps) => {
   const [open, setOpen] = useState(false);
 

site/docs/components/overlay/examples.mdx

@@ -45,3 +45,9 @@ With actions, users can decide if interacting with content in the overlay should
 **Note:** `OverlayPanelCloseButton` is deprecated. Use the prop `actions` within `OverlayHeader` instead.
 
 <LivePreview componentName="overlay" exampleName="CloseButton" />
+
+## Hide arrow
+
+Use the `hideArrow` prop to display the overlay without the arrow.
+
+<LivePreview componentName="overlay" exampleName="HideArrow" />

site/src/examples/overlay/HideArrow.tsx

@@ -0,0 +1,30 @@
+import {
+  Button,
+  Overlay,
+  OverlayPanel,
+  OverlayPanelContent,
+  OverlayTrigger,
+  useId,
+} from "@salt-ds/core";
+import type { ReactElement } from "react";
+
+import styles from "./index.module.css";
+
+export const HideArrow = (): ReactElement => {
+  const id = useId();
+  return (
+    <Overlay placement="bottom" hideArrow>
+      <OverlayTrigger>
+        <Button>Show Overlay</Button>
+      </OverlayTrigger>
+      <OverlayPanel aria-labelledby={id}>
+        <OverlayPanelContent>
+          <h3 className={styles.contentHeading} id={id}>
+            Title
+          </h3>
+          <div>Content of Overlay</div>
+        </OverlayPanelContent>
+      </OverlayPanel>
+    </Overlay>
+  );
+};

site/src/examples/overlay/index.ts

@@ -1,5 +1,6 @@
 export * from "./CloseButton";
 export * from "./Default";
+export * from "./HideArrow";
 export * from "./LongContent";
 export * from "./Placement";
 export * from "./WithActions";