updates

jpmorganchase · Dec 18, 2024 · 7c3d5f2 · 7c3d5f2
1 parent c33d971
commit 7c3d5f2
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 13 deletions.
diff --git a/.changeset/poor-scissors-chew.md b/.changeset/poor-scissors-chew.md
@@ -2,4 +2,4 @@
 "@salt-ds/lab": patch
 ---
 
-fix alignment for titles spanning into multiple lines, wrap labs dialog header in H2 to avoid breaking change
+Overlay and Dialog headers fix alignment for titles spanning into multiple lines, wrap preheader and headers in H2.
diff --git a/packages/lab/src/dialog/DialogHeader.tsx b/packages/lab/src/dialog/DialogHeader.tsx
@@ -83,12 +83,10 @@ export const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(
       >
         {status && <StatusIndicator status={status} />}
         <div className={withBaseName("container")}>
-          <div className={withBaseName("header")}>
-            {preheader && (
-              <Text className={withBaseName("preheader")}>{preheader}</Text>
-            )}
-            <H2 className={withBaseName("header")}>{header}</H2>
-          </div>
+          <H2 className={withBaseName("header")}>
+            {preheader && <Text color="primary">{preheader}</Text>}
+            {header}
+          </H2>
           {description && (
             <Text color="secondary" className={withBaseName("description")}>
               {description}

diff --git a/packages/lab/src/overlay/OverlayHeader.tsx b/packages/lab/src/overlay/OverlayHeader.tsx
@@ -1,4 +1,4 @@
-import { Text, makePrefixer } from "@salt-ds/core";
+import { H2, Text, makePrefixer } from "@salt-ds/core";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { clsx } from "clsx";
@@ -45,12 +45,10 @@ export const OverlayHeader = forwardRef<HTMLDivElement, OverlayHeaderProps>(
     return (
       <div className={clsx(withBaseName(), className)} {...rest} ref={ref}>
         <div className={withBaseName("container")}>
-          <div className={withBaseName("header")}>
-            {preheader && (
-              <Text className={withBaseName("preheader")}>{preheader}</Text>
-            )}
+          <H2 styleAs="h4" className={withBaseName("header")}>
+            {preheader && <Text color="primary">{preheader}</Text>}
             {header}
-          </div>
+          </H2>
           {description && (
             <Text color="secondary" className={withBaseName("description")}>
               {description}