Promote dialog and overlay headers to core

jpmorganchase · Feb 6, 2025 · 0b5953e · 0b5953e
1 parent 114df0b
commit 0b5953e
Show file tree

Hide file tree

Showing 18 changed files with 220 additions and 730 deletions.
diff --git a/packages/core/src/dialog/DialogHeader.css b/packages/core/src/dialog/DialogHeader.css
@@ -1,22 +1,38 @@
 /* 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;
   display: flex;
   flex-direction: row;
   gap: var(--salt-spacing-100);
   box-sizing: border-box;
 }
-
 .saltDialogHeader-header {
   margin: 0;
 }
 
+.saltDialogHeader-container {
+  flex-grow: 1;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-50);
+  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);
+}
+
+.saltDialogHeader-header > .saltText {
+  margin: 0;
+}
+
+.saltDialogHeader-actionsContainer {
+  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);
+  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);
 }
 
 /* Styles applied to DialogHeader when accent={true} */
@@ -29,23 +45,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);
 }
-
-.saltDialogHeader-error::before {
-  background: var(--salt-status-error-borderColor);
-}
-
-.saltDialogHeader-info::before {
-  background: var(--salt-status-info-borderColor);
-}
-
-.saltDialogHeader-success::before {
-  background: var(--salt-status-success-borderColor);
-}
-
-.saltDialogHeader-warning::before {
-  background: var(--salt-status-warning-borderColor);
-}
diff --git a/packages/core/src/dialog/DialogHeader.tsx b/packages/core/src/dialog/DialogHeader.tsx
@@ -1,15 +1,20 @@
+import {
+  H2,
+  StatusIndicator,
+  Text,
+  type ValidationStatus,
+} from "@salt-ds/core";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
-import clsx from "clsx";
+import { clsx } from "clsx";
 import {
   type ComponentPropsWithoutRef,
   type ReactNode,
   forwardRef,
 } from "react";
-import { StatusIndicator, type ValidationStatus } from "../status-indicator";
-import { H2, Text } from "../text";
-import { makePrefixer } from "../utils";
 import { useDialogContext } from "./DialogContext";
+
+import { makePrefixer } from "../utils";
 import dialogHeaderCss from "./DialogHeader.css";
 
 const withBaseName = makePrefixer("saltDialogHeader");
@@ -30,15 +35,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?: ReactNode;
+  /**
+   * Actions to be displayed in header
+   */
+  actions?: ReactNode;
 }
 
 export const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(
   function DialogHeader(props, ref) {
     const {
       className,
+      description,
+      disableAccent,
+      actions,
       header,
       preheader,
-      disableAccent,
       status: statusProp,
       ...rest
     } = props;
@@ -68,14 +83,20 @@ export const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(
         {...rest}
       >
         {status && <StatusIndicator status={status} />}
-        <H2 className={withBaseName("header")}>
-          {preheader && (
-            <Text variant="secondary" className={withBaseName("preheader")}>
-              {preheader}
+        <div className={withBaseName("container")}>
+          <H2 className={withBaseName("header")}>
+            {preheader && <Text color="primary">{preheader}</Text>}
+            {header}
+          </H2>
+          {description && (
+            <Text color="secondary" className={withBaseName("description")}>
+              {description}
             </Text>
           )}
-          <div>{header}</div>
-        </H2>
+        </div>
+        {actions && (
+          <div className={withBaseName("actionsContainer")}>{actions}</div>
+        )}
       </div>
     );
   },

diff --git a/packages/lab/src/overlay/OverlayHeader.css → packages/core/src/overlay/OverlayHeader.css b/packages/lab/src/overlay/OverlayHeader.css → packages/core/src/overlay/OverlayHeader.css
@@ -14,6 +14,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--salt-spacing-50);
+  padding-top: calc((var(--salt-size-base) - var(--salt-text-h4-lineHeight)) / 2);
 }
 
 .saltOverlayHeader-header {

diff --git a/packages/lab/src/overlay/OverlayHeader.tsx → packages/core/src/overlay/OverlayHeader.tsx b/packages/lab/src/overlay/OverlayHeader.tsx → packages/core/src/overlay/OverlayHeader.tsx
@@ -1,4 +1,3 @@
-import { H2, Text, makePrefixer } from "@salt-ds/core";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { clsx } from "clsx";
@@ -7,6 +6,7 @@ import {
   type ReactNode,
   forwardRef,
 } from "react";
+import { H2, Text, makePrefixer } from "../index";
 import overlayHeaderCss from "./OverlayHeader.css";
 
 const withBaseName = makePrefixer("saltOverlayHeader");

diff --git a/packages/core/src/overlay/index.ts b/packages/core/src/overlay/index.ts
@@ -1,5 +1,6 @@
 export * from "./Overlay";
 export * from "./OverlayTrigger";
 export * from "./OverlayPanel";
+export * from "./OverlayHeader";
 export * from "./OverlayPanelCloseButton";
 export * from "./OverlayPanelContent";
diff --git a/packages/core/stories/dialog/dialog.qa.stories.tsx b/packages/core/stories/dialog/dialog.qa.stories.tsx
@@ -20,6 +20,7 @@ import {
   type QAContainerProps,
 } from "docs/components";
 import "./dialog.stories.css";
+import { CloseIcon } from "@salt-ds/icons";
 import { Fragment } from "react";
 
 export default {
@@ -219,6 +220,14 @@ export const DialogHeaders: StoryFn<QAContainerProps> = () => (
       header="Terms and conditions"
       preheader="Ensure you read and agree to these Terms"
     />
+    <DialogHeader
+      style={{
+        width: 600,
+      }}
+      header="Terms and conditions"
+      preheader="Ensure you read and agree to these Terms"
+      description="Effective date: August 29, 2024"
+    />
     <DialogHeader
       status="info"
       header="Terms and conditions"
@@ -227,12 +236,28 @@ export const DialogHeaders: StoryFn<QAContainerProps> = () => (
       }}
     />
     <DialogHeader
+      actions={
+        <Button aria-label="Close dialog" appearance="transparent">
+          <CloseIcon aria-hidden />
+        </Button>
+      }
       status="info"
       style={{
         width: 600,
       }}
       header="Terms and conditions"
-      preheader="Ensure you read and agree to these Terms"
+    />
+    <DialogHeader
+      actions={
+        <Button aria-label="Close dialog" appearance="transparent">
+          <CloseIcon aria-hidden />
+        </Button>
+      }
+      status="info"
+      style={{
+        width: 600,
+      }}
+      header="Complete terms and conditions for using the services provided by our company"
     />
   </QAContainer>
 );

diff --git a/packages/core/stories/dialog/dialog.stories.tsx b/packages/core/stories/dialog/dialog.stories.tsx
@@ -2,7 +2,6 @@ import {
   Button,
   Dialog,
   DialogActions,
-  DialogCloseButton,
   DialogContent,
   type DialogContentProps,
   DialogHeader,
@@ -18,6 +17,7 @@ import {
   useState,
 } from "react";
 import "./dialog.stories.css";
+import { CloseIcon } from "@salt-ds/icons";
 
 export default {
   title: "Core/Dialog",
@@ -40,12 +40,16 @@ const UnmountLogger = () => {
 
 const DialogTemplate: StoryFn<
   Omit<DialogProps, "content"> &
-    Pick<ComponentProps<typeof DialogHeader>, "header" | "preheader"> & {
+    Pick<
+      ComponentProps<typeof DialogHeader>,
+      "header" | "preheader" | "description"
+    > & {
       content: DialogContentProps["children"];
     }
 > = ({
   header,
   preheader,
+  description,
   content,
   id,
   size,
@@ -66,6 +70,15 @@ const DialogTemplate: StoryFn<
     setOpen(false);
   };
 
+  const CloseButton = () => (
+    <Button
+      aria-label="Close dialog"
+      appearance="transparent"
+      onClick={handleClose}
+    >
+      <CloseIcon aria-hidden />
+    </Button>
+  );
   return (
     <>
       <Button data-testid="dialog-button" onClick={handleRequestOpen}>
@@ -78,7 +91,12 @@ const DialogTemplate: StoryFn<
         id={id}
         size={size}
       >
-        <DialogHeader header={header} preheader={preheader} />
+        <DialogHeader
+          header={header}
+          preheader={preheader}
+          description={description}
+          actions={<CloseButton />}
+        />{" "}
         <DialogContent>
           {content}
           <UnmountLogger />
@@ -92,7 +110,6 @@ const DialogTemplate: StoryFn<
             Next
           </Button>
         </DialogActions>
-        <DialogCloseButton onClick={handleClose} />
       </Dialog>
     </>
   );
@@ -349,13 +366,26 @@ export const StickyFooter: StoryFn<typeof Dialog> = ({
     setOpen(false);
   };
 
+  const CloseButton = () => (
+    <Button
+      aria-label="Close dialog"
+      appearance="transparent"
+      onClick={handleClose}
+    >
+      <CloseIcon aria-hidden />
+    </Button>
+  );
+
   return (
     <>
       <Button data-testid="dialog-button" onClick={handleRequestOpen}>
         Click to open dialog
       </Button>
       <Dialog open={open} onOpenChange={onOpenChange} className="longDialog">
-        <DialogHeader header="Congratulations! You have created a Dialog." />
+        <DialogHeader
+          header="Congratulations! You have created a Dialog."
+          actions={<CloseButton />}
+        />
         <DialogContent>
           Lorem Ipsum is simply dummy text of the printing and typesetting
           industry. Lorem Ipsum has been the industry's standard dummy text ever
@@ -371,7 +401,6 @@ export const StickyFooter: StoryFn<typeof Dialog> = ({
             Next
           </Button>
         </DialogActions>
-        <DialogCloseButton onClick={handleClose} />
       </Dialog>
     </>
   );