Fix: Add DialogHeader description examples issue 6135

packages/core/stories/dialog/dialog.qa.stories.tsx

@@ -252,6 +252,38 @@ export const DialogHeaders: StoryFn<QAContainerProps> = () => (
         width: 600,
       }}
     />
+    <DialogHeader
+      status="info"
+      header="Terms and conditions"
+      description="Effective date: August 29, 2024"
+      style={{
+        width: 600,
+      }}
+    />
+    <DialogHeader
+      status="warning"
+      header="Session expiring"
+      description="Your session will expire in 5 minutes."
+      style={{
+        width: 600,
+      }}
+    />
+    <DialogHeader
+      status="error"
+      header="Connection failed"
+      description="Unable to connect to the server."
+      style={{
+        width: 600,
+      }}
+    />
+    <DialogHeader
+      status="success"
+      header="Transaction complete"
+      description="Your payment has been processed successfully."
+      style={{
+        width: 600,
+      }}
+    />
     <DialogHeader
       actions={
         <Button aria-label="Close dialog" appearance="transparent">

packages/core/stories/dialog/dialog.stories.tsx

@@ -295,11 +295,16 @@ Preheader.args = {
 };
 
 const AlertDialogTemplate: StoryFn<
-  DialogProps & { header: string; content: ReactNode }
+  DialogProps & {
+    header: string;
+    content: ReactNode;
+    description?: ReactNode;
+  }
 > = ({
   open: openProp = false,
   status,
   header,
+  description,
   size = "small",
   content,
   ...args
@@ -356,7 +361,7 @@ const AlertDialogTemplate: StoryFn<
         // focus the ok instead of the cancel button
         initialFocus={initialFocusButtonIndex}
       >
-        <DialogHeader header={header} />
+        <DialogHeader header={header} description={description} />
         <DialogContent>{content}</DialogContent>
         <DialogActions>
           {direction === "column" ? (
@@ -400,6 +405,34 @@ ErrorStatus.args = {
   header: "Error",
 };
 
+export const InfoStatusWithDescription = AlertDialogTemplate.bind({});
+InfoStatusWithDescription.args = {
+  status: "info",
+  header: "File update",
+  description: "A new version is available with important changes.",
+};
+
+export const SuccessStatusWithDescription = AlertDialogTemplate.bind({});
+SuccessStatusWithDescription.args = {
+  status: "success",
+  header: "Transaction complete",
+  description: "Your payment has been processed successfully.",
+};
+
+export const WarningStatusWithDescription = AlertDialogTemplate.bind({});
+WarningStatusWithDescription.args = {
+  status: "warning",
+  header: "Session expiring",
+  description: "Your session will expire in 5 minutes.",
+};
+
+export const ErrorStatusWithDescription = AlertDialogTemplate.bind({});
+ErrorStatusWithDescription.args = {
+  status: "error",
+  header: "Connection failed",
+  description: "Unable to connect to the server. Please try again.",
+};
+
 export const MandatoryAction: StoryFn<typeof Dialog> = ({
   open: openProp = false,
 }) => {

site/docs/components/dialog/examples.mdx

@@ -60,6 +60,12 @@ Don’t use the info dialog when the information concerns a successful action. I
 
 <LivePreview componentName="dialog" exampleName="Info" />
 
+## Status with description
+
+All status dialogs support the `description` prop on `DialogHeader` to provide additional context below the header. This is useful when you need to give users more information about the status without adding it to the dialog content.
+
+<LivePreview componentName="dialog" exampleName="InfoWithDescription" />
+
 ## Error
 
 Use the error status to communicate a critical issue that prevents the user from continuing or completing it.

site/src/examples/dialog/InfoWithDescription.tsx

@@ -0,0 +1,87 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogHeader,
+  FlexLayout,
+  StackLayout,
+  type StackLayoutProps,
+  useId,
+  useResponsiveProp,
+} from "@salt-ds/core";
+import { type ElementType, type ReactElement, useState } from "react";
+
+export const InfoWithDescription = (): ReactElement => {
+  const [open, setOpen] = useState(false);
+  const id = useId();
+
+  const handleRequestOpen = () => {
+    setOpen(true);
+  };
+
+  const onOpenChange = (value: boolean) => {
+    setOpen(value);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const direction: StackLayoutProps<ElementType>["direction"] =
+    useResponsiveProp(
+      {
+        xs: "column",
+        sm: "row",
+      },
+      "row",
+    );
+
+  const close = (
+    <Button appearance="bordered" sentiment="accented" onClick={handleClose}>
+      Close
+    </Button>
+  );
+
+  const seeUpdates = (
+    <Button sentiment="accented" onClick={handleClose}>
+      See updates
+    </Button>
+  );
+
+  return (
+    <>
+      <Button onClick={handleRequestOpen}>
+        Open info dialog with description
+      </Button>
+      <Dialog
+        open={open}
+        onOpenChange={onOpenChange}
+        status="info"
+        size="small"
+        id={id}
+      >
+        <DialogHeader
+          header="File update"
+          description="A new version is available with important changes."
+        />
+        <DialogContent>
+          A new version of this file is available with 26 updates.
+        </DialogContent>
+        <DialogActions>
+          {direction === "column" ? (
+            <StackLayout gap={1} style={{ width: "100%" }}>
+              {seeUpdates}
+              {close}
+            </StackLayout>
+          ) : (
+            <FlexLayout gap={1}>
+              {close}
+              {seeUpdates}
+            </FlexLayout>
+          )}
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};

site/src/examples/dialog/index.ts

@@ -3,6 +3,7 @@ export * from "./Default";
 export * from "./DisableScrim";
 export * from "./Error";
 export * from "./Info";
+export * from "./InfoWithDescription";
 export * from "./MandatoryAction";
 export * from "./Preheader";
 export * from "./Sizes";