refactor(dialog): add more header flexibility (#4000)

* fix(dialog): condense t-shirt variables

* feat(dialog): add container query
- adds container query for fullscreen/fullscreenTakeover dialogs
- increases the max-inline-size for the dialog to 864px for query
- moves fullscreen/fullscreenTakeover grid layout to container query

* chore(dialog): add changeset

* test(dialog): render wrapper and container styles conditionally
-  force dialog container to be full width for testing

Author: marissahuysentruyt

.changeset/polite-apes-think.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/dialog": minor
+---
+
+Increases flexibility and responsiveness of the dialog header. A container query for the `.spectrum-Dialog` was added, which now triggers the reflow of the `.spectrum-Dialog--fullscreen`/`.spectrum-Dialog--fullscreenTakeover` content grid. This is particularly useful when the component slot is utilized to add other components as additional content in fullscreen/fullscreenTakeover dialogs' header areas by allowing the content to reflow sooner.

components/dialog/index.css

@@ -63,6 +63,14 @@
 	--spectrum-takeover-dialog-block-size: var(--spectrum-takeover-dialog-height);
 }
 
+.spectrum-Dialog--sizeS {
+	--spectrum-standard-dialog-max-width: var(--mod-standard-dialog-max-width-small, var(--spectrum-standard-dialog-maximum-width-small));
+}
+
+.spectrum-Dialog--sizeL {
+	--spectrum-standard-dialog-max-width: var(--mod-standard-dialog-max-width-large, var(--spectrum-standard-dialog-maximum-width-large));
+}
+
 .spectrum-Dialog {
 	/* Be a flexbox to allow a full sized content area that scrolls */
 	display: flex;
@@ -81,16 +89,6 @@
 	overflow: hidden;
 }
 
-.spectrum-Dialog--sizeS {
-	--spectrum-standard-dialog-max-width: var(--spectrum-standard-dialog-maximum-width-small);
-	inline-size: var(--mod-standard-dialog-max-width-small, var(--spectrum-standard-dialog-max-width));
-}
-
-.spectrum-Dialog--sizeL {
-	--spectrum-standard-dialog-max-width: var(--spectrum-standard-dialog-maximum-width-large);
-	inline-size: var(--mod-standard-dialog-max-width-large, var(--spectrum-standard-dialog-max-width));
-}
-
 .spectrum-Dialog-hero {
 	grid-area: hero;
 
@@ -271,6 +269,9 @@
 	max-block-size: none;
 	max-inline-size: none;
 
+	/* Enable container queries for fullscreen/fullscreenTakeover dialogs */
+	container: dialog-fullscreen / inline-size;
+
 	.spectrum-Dialog-grid {
 		display: grid;
 		grid-template-columns:
@@ -344,7 +345,6 @@
 			auto
 			var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding));
 
-		/* TODO: investigate if we could refactor the grid to make the footer text/checkbox stack on top of the button group */
 		grid-template-areas:
 			"hero hero    hero    hero        hero        hero"
 			".    .       .       .           .           ."
@@ -394,6 +394,12 @@
 		gap: 0;
 	}
 
+	.spectrum-Dialog-heading {
+		margin-block-end: var(--mod-standard-dialog-spacing-title-to-description, var(--spectrum-standard-dialog-spacing-title-to-description));
+	}
+}
+
+@container dialog-fullscreen (max-inline-size: 864px) {
 	.spectrum-Dialog--fullscreen,
 	.spectrum-Dialog--fullscreenTakeover {
 		&.spectrum-Dialog .spectrum-Dialog-grid {
@@ -422,20 +428,22 @@
 
 		.spectrum-Dialog-header {
 			margin-inline-end: 0;
+
+			/* The header element is a flexbox, so that the title and headerContentWrapper can wrap sooner. */
+			display: flex;
+			flex-direction: column;
+			gap: var(--mod-takeover-dialog-spacing-header-content-gap, var(--spectrum-takeover-dialog-spacing-header-content-gap));
 		}
 
 		.spectrum-Dialog-heading {
 			margin-inline-end: 0;
+			margin-block-end: 0;
 		}
 	}
-
-	.spectrum-Dialog-heading {
-		margin-block-end: var(--spectrum-standard-dialog-spacing-title-to-description);
-	}
 }
 
 @media (forced-colors: active) {
 	.spectrum-Dialog {
-		border: 1px solid rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity));
+		border: 1px solid rgb(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity));
 	}
 }

components/dialog/stories/dialog.test.js

@@ -51,39 +51,56 @@ export const DialogGroup = Variants({
 	],
 });
 
-export const DialogFullscreen = Variants({
-	Template: (args, context) => {
-		const { parameters: { showTestingGrid = false } = {} } = context;
+export const DialogFullscreen = (args, context) => {
+	const { parameters: { showTestingGrid = false } = {} } = context;
 
-		return Template({
-			...args,
-			/*
-			 * Custom styles were added to make sure the VRTs catch the rounded corners
-			 */
-			customStyles: {
-				margin: showTestingGrid ? "16px" : undefined,
-			},
-		}, context);
-	},
-	withSizes: false,
-	wrapperStyles: {
-		"background-color": "var(--spectrum-gray-50)"
-	},
-	testData: [
-		{
-			showModal: false,
-			layout: "fullscreen",
+	return Variants({
+		Template: (args, context) => {
+			return Template({
+				...args,
+				/*
+				 * Custom styles were added to make sure the VRTs catch the rounded corners
+				 */
+				customStyles: {
+					margin: showTestingGrid ? "16px" : undefined,
+				},
+			}, context);
 		},
-	],
-});
+		withSizes: false,
+		wrapperStyles: {
+			"background-color": "var(--spectrum-gray-50)",
+			...(showTestingGrid && { "inline-size": "100%" }), // Applies conditional styles based on showTestingGrid- forces the data-inner-container to be full width so the container query doesn't break.
+		},
+		containerStyles: {
+			...(showTestingGrid && { "inline-size": "100%" }), // forces the data-outer-container to be full width so the container query doesn't break.
+		},
+		testData: [
+			{
+				showModal: false,
+				layout: "fullscreen",
+			},
+		],
+	})(args, context);
+};
 
-export const DialogFullscreenTakeover = Variants({
-	Template,
-	withSizes: false,
-	testData: [
-		{
-			showModal: false,
-			layout: "fullscreenTakeover",
+export const DialogFullscreenTakeover = (args, context) => {
+	const { parameters: { showTestingGrid = false } = {} } = context;
+
+	return Variants({
+		Template,
+		withSizes: false,
+		wrapperStyles: {
+			...(showTestingGrid && { "inline-size": "100%" }), // Applies conditional styles based on showTestingGrid- forces the data-inner-container to be full width so the container query doesn't break.
 		},
-	],
-});
+		// Apply conditional styles based on showTestingGrid
+		containerStyles: {
+			...(showTestingGrid && { "inline-size": "100%" }), // forces the data-outer-container to be full width so the container query doesn't break.
+		},
+		testData: [
+			{
+				showModal: false,
+				layout: "fullscreenTakeover",
+			},
+		],
+	})(args, context);
+};