refactor(dialog): styles added for components in takeover dialogs

Author: marissahuysentruyt

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 {

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, } },
 };
 
 /**

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>