New Header for Overlay and Dialog

packages/core/src/__tests__/__e2e__/dialog/Dialog.cy.tsx

@@ -165,23 +165,23 @@ describe("GIVEN a Dialog", () => {
       cy.mount(<Default />);
       cy.findByRole("button", { name: "Open dialog" }).realClick();
       cy.findByRole("dialog").should("be.visible");
+      cy.findAllByRole("button", { name: "Close dialog" }).should("be.focused");
+      cy.realPress("Tab");
       cy.findAllByRole("button", { name: "Cancel" }).should("be.focused");
       cy.realPress("Tab");
       cy.findAllByRole("button", { name: "Previous" }).should("be.focused");
       cy.realPress("Tab");
       cy.findAllByRole("button", { name: "Next" }).should("be.focused");
       cy.realPress("Tab");
-      cy.findAllByRole("button", { name: "Close dialog" }).should("be.focused");
-      cy.realPress("Tab");
       //back to the first button
-      cy.findAllByRole("button", { name: "Cancel" }).should("be.focused");
+      cy.findAllByRole("button", { name: "Close dialog" }).should("be.focused");
     });
 
     it("THEN should support initialFocus being set", () => {
       cy.mount(<Default initialFocus={2} />);
       cy.findByRole("button", { name: "Open dialog" }).realClick();
       cy.findByRole("dialog").should("be.visible");
-      cy.findByRole("button", { name: "Next" }).should("be.focused");
+      cy.findByRole("button", { name: "Previous" }).should("be.focused");
     });
   });
 });

packages/core/src/__tests__/__e2e__/overlay/Overlay.cy.tsx

@@ -3,7 +3,7 @@ import { composeStories } from "@storybook/react";
 import { checkAccessibility } from "../../../../../../cypress/tests/checkAccessibility";
 
 const composedStories = composeStories(overlayStories);
-const { Default, Right, Bottom, Left, CloseButton } = composedStories;
+const { Default, Right, Bottom, Left, HeaderWithCloseButton } = composedStories;
 
 describe("GIVEN an Overlay", () => {
   checkAccessibility(composedStories);
@@ -30,26 +30,28 @@ describe("GIVEN an Overlay", () => {
     });
 
     it("THEN it should focus into the overlay when opened", () => {
-      cy.mount(<CloseButton />);
+      cy.mount(<HeaderWithCloseButton />);
 
       cy.realPress("Tab");
       cy.realPress("Enter");
       cy.findByRole("dialog").should("be.visible");
       //focus into overlay
-      cy.findByRole("button", { name: /Close Overlay/i }).should("be.focused");
+      cy.findAllByRole("button", { name: "Close overlay" }).should(
+        "be.focused",
+      );
       cy.realPress("Tab");
     });
 
     it("THEN it should trap focus within Overlay once opened", () => {
-      cy.mount(<CloseButton />);
+      cy.mount(<HeaderWithCloseButton />);
 
       cy.findByRole("button", { name: /Show Overlay/i }).realClick();
       cy.findByRole("dialog").should("be.visible");
-      cy.findByRole("button", { name: /Close Overlay/i }).should("be.focused");
+      cy.findByRole("button", { name: /Close overlay/i }).should("be.focused");
       cy.realPress("Tab");
       cy.findByRole("button", { name: /Hover me/i }).should("be.focused");
       cy.realPress("Tab");
-      cy.findByRole("button", { name: /Close Overlay/i }).should("be.focused");
+      cy.findByRole("button", { name: /Close overlay/i }).should("be.focused");
     });
   });
 
@@ -112,14 +114,15 @@ describe("GIVEN an Overlay", () => {
   describe("WHEN a Close Button is used", () => {
     it("THEN it should remain open until outside Overlay click or close button click", () => {
       const onOpenChangeSpy = cy.stub().as("onOpenChangeSpy");
-      cy.mount(<CloseButton onOpenChange={onOpenChangeSpy} />);
+      cy.mount(<HeaderWithCloseButton onOpenChange={onOpenChangeSpy} />);
 
       cy.realPress("Tab");
       cy.realPress("Enter");
       cy.findByRole("dialog").should("be.visible");
       cy.get("@onOpenChangeSpy").should("have.callCount", 1);
 
-      cy.findByRole("button", { name: /Close Overlay/i }).realClick();
+      cy.findByRole("button", { name: /Close overlay/i }).realClick();
+
       cy.findByRole("dialog").should("not.exist");
 
       cy.findByRole("button", { name: /Show Overlay/i }).realClick();

packages/core/src/dialog/DialogHeader.css

@@ -1,6 +1,6 @@
 /* Styles applied to the root element */
 .saltDialogHeader {
-  padding-bottom: var(--salt-spacing-100);
+  padding-bottom: var(--salt-spacing-300);
   padding-left: var(--salt-spacing-300);
   padding-right: var(--salt-spacing-300);
   align-items: center;
@@ -10,10 +10,22 @@
   box-sizing: border-box;
 }
 
+.saltDialogHeader-body {
+  flex-grow: 1;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-50);
+}
+
 .saltDialogHeader-header {
   margin: 0;
 }
 
+.saltDialogHeader-endAdornmentContainer {
+  align-self: flex-start;
+}
+
 /* Styles applied to the status indicator icon overriding its default size */
 .saltDialogHeader .saltStatusIndicator.saltIcon {
   --icon-size: var(--salt-text-h2-lineHeight);
@@ -29,7 +41,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  bottom: var(--salt-spacing-100);
+  bottom: var(--salt-spacing-300);
   width: var(--salt-size-bar);
   background: var(--salt-accent-background);
 }

packages/core/src/dialog/DialogHeader.tsx

@@ -30,15 +30,25 @@ export interface DialogHeaderProps extends ComponentPropsWithoutRef<"div"> {
    * Displays the preheader just above the header
    **/
   preheader?: ReactNode;
+  /**
+   * Description text is displayed just below the header
+   **/
+  description?: string;
+  /**
+   * End adornment component
+   */
+  endAdornment?: ReactNode;
 }
 
 export const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(
   function DialogHeader(props, ref) {
     const {
       className,
+      description,
+      disableAccent,
+      endAdornment,
       header,
       preheader,
-      disableAccent,
       status: statusProp,
       ...rest
     } = props;
@@ -68,14 +78,22 @@ export const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(
         {...rest}
       >
         {status && <StatusIndicator status={status} />}
-        <H2 className={withBaseName("header")}>
+        <div className={withBaseName("body")}>
           {preheader && (
-            <Text variant="secondary" className={withBaseName("preheader")}>
-              {preheader}
+            <Text className={withBaseName("preheader")}>{preheader}</Text>
+          )}
+          <H2 className={withBaseName("header")}>{header}</H2>
+          {description && (
+            <Text color="secondary" className={withBaseName("description")}>
+              {description}
             </Text>
           )}
-          <div>{header}</div>
-        </H2>
+        </div>
+        {endAdornment && (
+          <div className={withBaseName("endAdornmentContainer")}>
+            {endAdornment}
+          </div>
+        )}
       </div>
     );
   },

packages/core/src/overlay/OverlayHeader.css

@@ -0,0 +1,31 @@
+.saltOverlayHeader {
+  padding: var(--salt-spacing-100);
+  width: 100%;
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: stretch;
+  gap: var(--salt-spacing-100);
+  box-sizing: border-box;
+}
+
+.saltOverlayHeader-container {
+  flex-grow: 1;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-50);
+}
+
+.saltOverlayHeader-header {
+  margin: 0;
+}
+
+.saltOverlayHeader-actionsContainer {
+  align-self: flex-start;
+}
+
+/* Overrides */
+.saltOverlayHeader ~ .saltOverlayPanelContent {
+  padding-top: 0;
+}

packages/core/src/overlay/OverlayHeader.tsx

@@ -0,0 +1,75 @@
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import {
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+  forwardRef,
+} from "react";
+import { H4, Text } from "../text";
+import { makePrefixer } from "../utils";
+import overlayHeaderCss from "./OverlayHeader.css";
+
+const withBaseName = makePrefixer("saltOverlayHeader");
+
+export interface OverlayPanelContentProps
+  extends ComponentPropsWithoutRef<"div"> {
+  /**
+   * Description text is displayed just below the header
+   **/
+  description?: ReactNode;
+  /**
+   * End adornment component
+   */
+  actions?: ReactNode;
+  /**
+   * Header text
+   */
+  header?: ReactNode;
+  /**
+   * The id of the Overlay Header, used for aria-labelledby on OverlayPanel
+   **/
+  id?: string;
+  /**
+   * Preheader text is displayed just above the header
+   **/
+  preheader?: ReactNode;
+}
+
+export const OverlayHeader = forwardRef<
+  HTMLDivElement,
+  OverlayPanelContentProps
+>(function OverlayPanelContent(props, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-overlay-panel-content",
+    css: overlayHeaderCss,
+    window: targetWindow,
+  });
+
+  const { className, description, header, actions, id, preheader, ...rest } =
+    props;
+
+  return (
+    <div className={clsx(withBaseName(), className)} {...rest} ref={ref}>
+      <div className={withBaseName("container")}>
+        {preheader && (
+          <Text className={withBaseName("preheader")}>{preheader}</Text>
+        )}
+        {header && (
+          <H4 id={id} className={withBaseName("header")}>
+            {header}
+          </H4>
+        )}
+        {description && (
+          <Text color="secondary" className={withBaseName("description")}>
+            {description}
+          </Text>
+        )}
+      </div>
+      {actions && (
+        <div className={withBaseName("actionsContainer")}>{actions}</div>
+      )}
+    </div>
+  );
+});

packages/core/src/overlay/OverlayPanelContent.css

@@ -1,6 +1,18 @@
-.saltOverlayPanelContent {
+.saltOverlayPanelContent-container {
   animation: var(--salt-animation-fade-in-center);
   position: relative;
-  overflow: auto;
+  overflow: hidden;
   padding: var(--saltOverlay-content-padding, var(--salt-spacing-100));
+  padding-top: 0;
+}
+.saltOverlayPanelContent  {
+  overflow-y: auto;
+}
+.saltOverlayPanelContent-separator {
+  border-top: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;
+}
+.saltOverlayPanelContent-scroll {
+  border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
+  box-shadow: var(--salt-overlayable-shadow-scroll);
+  margin-top: calc(0 - var(--salt-size-border));
 }

packages/core/src/overlay/OverlayPanelContent.tsx

@@ -4,15 +4,16 @@ import clsx from "clsx";
 import {
   type ComponentPropsWithoutRef,
   type ReactNode,
+  type UIEvent,
   forwardRef,
+  useState,
 } from "react";
 import { makePrefixer } from "../utils";
 import overlayPanelContentCss from "./OverlayPanelContent.css";
 
 const withBaseName = makePrefixer("saltOverlayPanelContent");
 
-export interface OverlayPanelContentProps
-  extends ComponentPropsWithoutRef<"div"> {
+export interface OverlayHeaderProps extends ComponentPropsWithoutRef<"div"> {
   /**
    * The content of Overlay Panel Content
    */
@@ -21,7 +22,7 @@ export interface OverlayPanelContentProps
 
 export const OverlayPanelContent = forwardRef<
   HTMLDivElement,
-  OverlayPanelContentProps
+  OverlayHeaderProps
 >(function OverlayPanelContent(props, ref) {
   const targetWindow = useWindow();
   useComponentCssInjection({
@@ -31,10 +32,29 @@ export const OverlayPanelContent = forwardRef<
   });
 
   const { children, className, ...rest } = props;
+  const [scrollTop, setScrollTop] = useState(0);
+
+  const handleScroll = (event: UIEvent<HTMLElement>) => {
+    setScrollTop(event.currentTarget.scrollTop);
+  };
 
   return (
-    <div className={clsx(withBaseName(), className)} {...rest} ref={ref}>
-      {children}
-    </div>
+    <>
+      <div
+        className={clsx(withBaseName("separator"), {
+          [withBaseName("scroll")]: scrollTop > 0,
+        })}
+      />
+      <div className={clsx(withBaseName("container"))}>
+        <div
+          className={clsx(withBaseName(), className)}
+          onScroll={handleScroll}
+          {...rest}
+          ref={ref}
+        >
+          {children}
+        </div>
+      </div>
+    </>
   );
 });

packages/core/src/overlay/index.ts

@@ -1,4 +1,5 @@
 export * from "./Overlay";
+export * from "./OverlayHeader";
 export * from "./OverlayTrigger";
 export * from "./OverlayPanel";
 export * from "./OverlayPanelCloseButton";