From ffc689598122353912b604c7e1a4c121d20a9191 Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt
 <69602589+marissahuysentruyt@users.noreply.github.com>
Date: Thu, 31 Oct 2024 14:25:53 -0400
Subject: [PATCH] chore: dialog t-shirt sizing (#3322)

- adds deprecation notice for --small/--medium/--large class names,
in favor of the t-shirt sizing class names.
- create changeset
- updates metadata.json
---
 .changeset/nasty-pillows-wonder.md       | 13 +++++++++++++
 components/dialog/index.css              | 16 +++++++++-------
 components/dialog/metadata/metadata.json |  2 ++
 3 files changed, 24 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/nasty-pillows-wonder.md

diff --git a/.changeset/nasty-pillows-wonder.md b/.changeset/nasty-pillows-wonder.md
new file mode 100644
index 00000000000..a5dbb9abee5
--- /dev/null
+++ b/.changeset/nasty-pillows-wonder.md
@@ -0,0 +1,13 @@
+---
+"@spectrum-css/dialog": patch
+---
+
+Dialog t-shirt sizes
+
+Adds support for t-shirt sizing class names to dialog CSS. `@deprecated` comments were added to communicate that the old class names (`--small`, `--medium`, and `--large`) will be removed in S2.
+
+| old class name          | new class name                                         |
+| ----------------------- | ------------------------------------------------------ |
+| spectrum-Dialog--small  | spectrum-Dialog--sizeS                                 |
+| spectrum-Dialog--medium | spectrum-Dialog (the default, so no size is necessary) |
+| spectrum-Dialog--large  | spectrum-Dialog--sizeL                                 |
diff --git a/components/dialog/index.css b/components/dialog/index.css
index 78b31a80fd6..7c98cb0157a 100644
--- a/components/dialog/index.css
+++ b/components/dialog/index.css
@@ -36,15 +36,17 @@
 	--spectrum-dialog-confirm-divider-height: var(--spectrum-spacing-50);
 }
 
-.spectrum-Dialog {
+/* @deprecated .spectrum-Dialog--medium */
+.spectrum-Dialog,
+.spectrum-Dialog--medium {
 	/* Be a flexbox to allow a full sized content area that scrolls */
 	display: flex;
 
 	/* Allow 100% width, taking into account padding */
 	box-sizing: border-box;
 
-	/* Be no bigger than max-width,  but also be 90% if the viewport is smaller than max-width */
-	inline-size: fit-content;
+	/* Be no bigger than max-width, but also be 90% if the viewport is smaller than max-width */
+	inline-size: var(--mod-dialog-confirm-medium-width, var(--spectrum-dialog-confirm-medium-width));
 	min-inline-size: var(--mod-dialog-min-inline-size, var(--spectrum-dialog-min-inline-size));
 	max-inline-size: 100%;
 
@@ -53,14 +55,14 @@
 	outline: none;
 }
 
+/* @deprecated .spectrum-Dialog--small */
+.spectrum-Dialog--sizeS,
 .spectrum-Dialog--small {
 	inline-size: var(--mod-dialog-confirm-small-width, var(--spectrum-dialog-confirm-small-width));
 }
 
-.spectrum-Dialog--medium {
-	inline-size: var(--mod-dialog-confirm-medium-width, var(--spectrum-dialog-confirm-medium-width));
-}
-
+/* @deprecated .spectrum-Dialog--large */
+.spectrum-Dialog--sizeL,
 .spectrum-Dialog--large {
 	inline-size: var(--mod-dialog-confirm-large-width, var(--spectrum-dialog-confirm-large-width));
 }
diff --git a/components/dialog/metadata/metadata.json b/components/dialog/metadata/metadata.json
index 824b49e4c42..44cd1a85b8e 100644
--- a/components/dialog/metadata/metadata.json
+++ b/components/dialog/metadata/metadata.json
@@ -22,6 +22,8 @@
     ".spectrum-Dialog--medium",
     ".spectrum-Dialog--noDivider .spectrum-Dialog-divider",
     ".spectrum-Dialog--noDivider .spectrum-Dialog-heading",
+    ".spectrum-Dialog--sizeL",
+    ".spectrum-Dialog--sizeS",
     ".spectrum-Dialog--small",
     ".spectrum-Dialog-buttonGroup",
     ".spectrum-Dialog-buttonGroup.spectrum-Dialog-buttonGroup--noFooter",