updates to headers alignment

.changeset/poor-scissors-chew.md

@@ -0,0 +1,5 @@
+---
+"@salt-ds/lab": patch
+---
+
+fix alignment for titles spanning into multiple lines, wrap labs dialog header in H2 to avoid breaking change

packages/lab/src/dialog/DialogHeader.css

@@ -3,12 +3,14 @@
   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;

packages/lab/src/dialog/DialogHeader.tsx

@@ -1,4 +1,5 @@
 import {
+  H2,
   StatusIndicator,
   Text,
   type ValidationStatus,
@@ -86,7 +87,7 @@ export const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(
             {preheader && (
               <Text className={withBaseName("preheader")}>{preheader}</Text>
             )}
-            {header}
+            <H2 className={withBaseName("header")}>{header}</H2>
           </div>
           {description && (
             <Text color="secondary" className={withBaseName("description")}>

packages/lab/src/overlay/OverlayHeader.css

@@ -1,7 +1,6 @@
 .saltOverlayHeader {
   padding: var(--salt-spacing-100);
   width: 100%;
-  align-items: center;
   display: flex;
   flex-direction: row;
   justify-content: stretch;

packages/lab/stories/dialog/dialog.qa.stories.tsx

@@ -1,4 +1,5 @@
-import { Dialog, H2 } from "@salt-ds/core";
+import { Button, Dialog, H2 } from "@salt-ds/core";
+import { CloseIcon } from "@salt-ds/icons";
 import { DialogHeader } from "@salt-ds/lab";
 import type { Meta, StoryFn } from "@storybook/react";
 import { QAContainer, type QAContainerProps } from "docs/components";
@@ -55,6 +56,18 @@ export const DialogHeaders: StoryFn<QAContainerProps> = () => (
       preheader="Ensure you read and agree to these Terms"
       description="Effective date: August 29, 2024"
     />
+    <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>
 );
 DialogHeaders.parameters = {

packages/lab/stories/dialog/dialog.stories.tsx

@@ -145,6 +145,12 @@ export const Default = DialogTemplate.bind({});
 Default.args = {
   id: "Default",
 };
+export const LongTitle = DialogTemplate.bind({});
+Default.args = {
+  id: "LongTitle",
+  header:
+    "Complete terms and conditions for using the services provided by our company",
+};
 
 const AlertDialogTemplate: StoryFn<
   DialogProps & { header: ReactNode; content: ReactNode }

packages/lab/stories/overlay/overlay.qa.stories.tsx

@@ -29,8 +29,8 @@ export const Default: StoryFn<QAContainerProps> = (props) => {
   return (
     <QAContainer
       height={800}
-      cols={5}
-      itemPadding={50}
+      cols={1}
+      itemPadding={80}
       itemWidthAuto
       width={1200}
       {...props}
@@ -39,11 +39,15 @@ export const Default: StoryFn<QAContainerProps> = (props) => {
         <OverlayTrigger>
           <Button>Show Overlay</Button>
         </OverlayTrigger>
-        <OverlayPanel>
+        <OverlayPanel
+          style={{
+            width: "30ch",
+          }}
+        >
           <OverlayHeader
             preheader="Preheader"
             description="Description"
-            header={<H4>Header block</H4>}
+            header={<H4>Guidelines for optimal use of our application</H4>}
             actions={<CloseButton />}
           />
           <OverlayPanelContent>

packages/lab/stories/overlay/overlay.stories.tsx

@@ -13,14 +13,14 @@ import {
 } from "@salt-ds/core";
 import { CloseIcon } from "@salt-ds/icons";
 import { OverlayHeader } from "@salt-ds/lab";
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react";
 import { useState } from "react";
 
 export default {
   title: "Lab/Overlay Header",
 } as Meta<typeof Overlay>;
 
-export const Header = ({ onOpenChange }: OverlayProps) => {
+const HeaderTemplate: StoryFn = ({ onOpenChange, ...props }: OverlayProps) => {
   const [open, setOpen] = useState(false);
   const id = useId();
 
@@ -40,7 +40,7 @@ export const Header = ({ onOpenChange }: OverlayProps) => {
           width: 500,
         }}
       >
-        <OverlayHeader header={<H4 id={id}>Header block</H4>} />
+        <OverlayHeader header={<H4 id={id}>Header block</H4>} {...props} />
         <OverlayPanelContent>
           <StackLayout gap={1}>
             <Text>
@@ -62,6 +62,29 @@ export const Header = ({ onOpenChange }: OverlayProps) => {
   );
 };
 
+export const Header = HeaderTemplate.bind({});
+Header.args = {};
+
+export const LongHeader = HeaderTemplate.bind({});
+LongHeader.args = {
+  header: (
+    <H4>
+      Comprehensive guidelines and detailed instructions for the optimal use and
+      application of our services to ensure maximum efficiency and user
+      satisfaction
+    </H4>
+  ),
+  actions: (
+    <Button
+      aria-label="Close overlay"
+      appearance="transparent"
+      sentiment="neutral"
+    >
+      <CloseIcon aria-hidden />
+    </Button>
+  ),
+};
+
 export const HeaderWithCloseButton = ({ onOpenChange }: OverlayProps) => {
   const [open, setOpen] = useState(false);
   const id = useId();