From e3f01b8a67453b43501f0bdd96e1934674493bc2 Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt <marissa.huysentruyt@heysparkbox.com>
Date: Tue, 10 Dec 2024 11:34:53 -0500
Subject: [PATCH] refactor(dialog): styles added for components in takeover
 dialogs

---
 components/dialog/index.css                 | 10 +++-
 components/dialog/stories/dialog.stories.js | 52 +++++++++++++++++++++
 components/dialog/stories/template.js       | 10 ++--
 3 files changed, 66 insertions(+), 6 deletions(-)

diff --git a/components/dialog/index.css b/components/dialog/index.css
index a13ad18332..5ec89a05fd 100644
--- a/components/dialog/index.css
+++ b/components/dialog/index.css
@@ -151,14 +151,13 @@ governing permissions and limitations under the License.
 
 	/* Without this, buttons will be stretched */
 	align-items: flex-start;
-	justify-content: space-between;
 
 	box-sizing: border-box;
 
 	outline: none; /* Hide focus outline around header */
 
 	/* additional header content should grow/shrink with the text, but only until it takes up half of the header */
-	> .spectrum-Dialog-headerContent {
+	> .spectrum-Dialog-headerContentWrapper {
 		max-inline-size: fit-content;
 		flex: 1 1 100%;
 		font-size: var(--mod-standard-dialog-header-content-font-size, var(--spectrum-standard-dialog-header-content-font-size));
@@ -295,6 +294,13 @@ governing permissions and limitations under the License.
 		gap: var(--mod-takeover-dialog-spacing-header-content-gap, var(--spectrum-takeover-dialog-spacing-header-content-gap));
 		margin-inline-end: var(--mod-takeover-dialog-spacing-header-content-gap, var(--spectrum-takeover-dialog-spacing-header-content-gap));
 		margin-block-end: var(--spectrum-takeover-dialog-spacing-title-to-content);
+
+		/* components in fullscreen/fullscreenTakeover dialogs are centered in the headerContentWrapper */
+		> .spectrum-Dialog-headerContentWrapper {
+			max-inline-size: unset;
+			display: inline-flex;
+			justify-content: center;
+		}
 	}
 
 	.spectrum-Dialog-heading {
diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js
index 563326d56a..362c3a71b2 100644
--- a/components/dialog/stories/dialog.stories.js
+++ b/components/dialog/stories/dialog.stories.js
@@ -1,3 +1,5 @@
+import { Template as Table } from "@spectrum-css/table/stories/template.js";
+import { Template as Steplist } from "@spectrum-css/steplist/stories/template.js";
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
 import { version } from "../package.json";
 import { DialogFullscreen, DialogFullscreenTakeover, DialogGroup } from "./dialog.test.js";
@@ -269,10 +271,59 @@ WithScroll.parameters = {
 
 /**
  * The fullscreen variant shows a large dialog background, only revealing a small portion of the page around the outside of the dialog, behind an overlay. The size of the dialog varies with the size of the screen, in both width and height.
+ *
+ * Implementations may swap out the extra header content and body content for other components, like the [steplist](/docs/components-steplist--docs) and [table](/docs/components-table--docs)seen in this example. Content in this area will be centered.
  */
 export const Fullscreen = DialogFullscreen.bind({});
 Fullscreen.args = {
 	...Default.args,
+	header:[
+		(passthroughs, context) => Steplist({
+			...passthroughs,
+			items: [
+				{
+					label: "Enter records",
+					isComplete: true,
+				},
+				{
+					label: "Confirmation",
+					isComplete: true,
+				},
+				{
+					label: "Summary",
+					isSelected: true,
+				},
+			],
+		}, context),
+	],
+	content: [
+		(passthroughs, context) => Table({
+			...passthroughs,
+			showThumbnails: true,
+			rowItems: [
+				{
+					cellContent: ["Table Row Alpha", "Test", "2"],
+				},
+				{
+					cellContent: ["Table Row Bravo", "Test", "28"],
+				},
+				{
+					cellContent: [
+						"Table Row Charlie. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
+						"Test",
+						"23",
+					],
+				},
+				{
+					cellContent: ["Table Row Delta", "Test", "7"],
+				},
+				{
+					cellContent: ["Summary Row", "", "60"],
+					isSummaryRow: true,
+				},
+			],
+		}, context),
+	],
 	layout: "fullscreen",
 	hasFooter: false,
 };
@@ -287,6 +338,7 @@ Fullscreen.parameters = {
 // https://github.com/storybookjs/storybook/discussions/18542
 Fullscreen.argTypes = {
 	hasFooter: { table: { disable: true, } },
+	header: { table: { disable: true, } },
 };
 
 /**
diff --git a/components/dialog/stories/template.js b/components/dialog/stories/template.js
index 30def16852..11757132b6 100644
--- a/components/dialog/stories/template.js
+++ b/components/dialog/stories/template.js
@@ -19,7 +19,7 @@ export const Template = ({
 	showModal = false,
 	hasFooter = false,
 	heading,
-	header,
+	header = [],
 	footer,
 	hasCheckbox = false,
 	content = [],
@@ -63,9 +63,11 @@ export const Template = ({
 						<h1 class="${rootClass}-heading">${heading}</h1>
 					`)}
 					${when(header, () => html`
-						<span class="${rootClass}-headerContent">
-							${renderContent(header)}
-						</span>
+						<div class="${rootClass}-headerContentWrapper">
+              <div class="${rootClass}-headerContent">
+                ${renderContent(header)}
+              </div>
+            </div>
 					`,
 				)}
 				</div>