From 23e4a2d11b7bb10f8e9fd18cfdde4095ac0928d6 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Fri, 5 Sep 2025 11:04:17 -0700
Subject: [PATCH] fix(S2): Allow custom widths on CustomDialogs (#8820)

---
 .../@react-spectrum/s2/src/CustomDialog.tsx     |  2 +-
 .../s2/stories/CustomDialog.stories.tsx         | 17 +++++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/@react-spectrum/s2/src/CustomDialog.tsx b/packages/@react-spectrum/s2/src/CustomDialog.tsx
index 5fe181908e0..3520f8d730b 100644
--- a/packages/@react-spectrum/s2/src/CustomDialog.tsx
+++ b/packages/@react-spectrum/s2/src/CustomDialog.tsx
@@ -53,7 +53,7 @@ const dialogStyle = style({
   position: 'relative',
   size: 'full',
   maxSize: 'inherit'
-}, getAllowedOverrides({height: true}));
+}, getAllowedOverrides({height: true, width: true}));
 
 /**
  * A CustomDialog is a floating window with a custom layout.
diff --git a/packages/@react-spectrum/s2/stories/CustomDialog.stories.tsx b/packages/@react-spectrum/s2/stories/CustomDialog.stories.tsx
index 251fa09178b..e4925228182 100644
--- a/packages/@react-spectrum/s2/stories/CustomDialog.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/CustomDialog.stories.tsx
@@ -120,3 +120,20 @@ export const SideImage: Story = {
     </DialogTrigger>
   )
 };
+
+export const CustomWidth: Story = {
+  render: (args) => (
+    <DialogTrigger>
+      <ActionButton>Open dialog</ActionButton>
+      <CustomDialog {...args} styles={style({width: 900})}>
+        <div className={style({display: 'flex', flexDirection: 'column', rowGap: 8, alignItems: 'center'})}>
+          <Checkmark />
+          <Heading slot="title" styles={style({font: 'heading-lg', textAlign: 'center', marginY: 0})}>Thank you!</Heading>
+          <p className={style({font: 'body', textAlign: 'center', marginY: 0})}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+          <CloseButton styles={style({position: 'absolute', top: 12, insetEnd: 12})} />
+        </div>
+      </CustomDialog>
+    </DialogTrigger>
+  ),
+  tags: ['!autodocs']
+};