fix(dialog): allow max width overrides (#574)

Author: mattrothenberg

.changeset/shy-ravens-help.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Allow unprefixed Dialog max-width classes to override the default viewport cap at desktop breakpoints.

packages/kumo-docs-astro/src/components/demos/DialogDemo.tsx

@@ -86,6 +86,44 @@ export function DialogWithActionsDemo() {
   );
 }
 
+/**
+ * Dialog with a consumer-provided max width and wide intrinsic content.
+ * The panel should stay capped at max-w-lg on desktop.
+ */
+export function DialogMaxWidthDemo() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger render={(p) => <Button {...p}>Open capped dialog</Button>} />
+      <Dialog className="max-w-lg p-8">
+        <div className="mb-4 flex items-start justify-between gap-4">
+          <Dialog.Title className="text-2xl font-semibold">
+            Max width override
+          </Dialog.Title>
+          <Dialog.Close
+            aria-label="Close"
+            render={(props) => (
+              <Button
+                {...props}
+                variant="secondary"
+                shape="square"
+                icon={<X />}
+                aria-label="Close"
+              />
+            )}
+          />
+        </div>
+        <Dialog.Description className="text-kumo-subtle">
+          This dialog uses <code>className="max-w-lg"</code> and should stay
+          capped around 512px on desktop.
+        </Dialog.Description>
+        <div className="mt-4 truncate rounded-md border border-kumo-line bg-kumo-recessed p-3 font-mono text-sm">
+          abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789
+        </div>
+      </Dialog>
+    </Dialog.Root>
+  );
+}
+
 export function DialogConfirmationDemo() {
   return (
     <Dialog.Root disablePointerDismissal>
@@ -212,8 +250,9 @@ export function DialogWithSelectDemo() {
         </Dialog.Description>
         <Select
           className="w-full"
+          placeholder="Select region..."
           renderValue={(v) =>
-            regions.find((r) => r.value === v)?.label ?? "Select region..."
+            regions.find((r) => r.value === v)?.label
           }
         >
           {regions.map((region) => (

packages/kumo-docs-astro/src/pages/components/dialog.mdx

@@ -15,6 +15,7 @@ import {
   DialogWithActionsDemo,
   DialogConfirmationDemo,
   DialogAlertDemo,
+  DialogMaxWidthDemo,
   DialogWithSelectDemo,
   DialogWithComboboxDemo,
   DialogWithDropdownDemo,
@@ -171,6 +172,20 @@ export default function Example() {
   <DialogWithActionsDemo client:load />
 </ComponentExample>
 
+### Custom Max Width
+
+<p>
+  Consumer max-width utilities such as `max-w-lg` should cap the dialog on
+  desktop, even when the dialog contains wide intrinsic content.
+</p>
+<ComponentExample
+  demo="DialogMaxWidthDemo"
+  vrSection="custom-max-width"
+  vrTitle="Custom Max Width"
+>
+  <DialogMaxWidthDemo client:load />
+</ComponentExample>
+
 ### With Select
 
 <p>Dialog containing a Select dropdown.</p>

packages/kumo/src/components/dialog/dialog.tsx

@@ -143,7 +143,7 @@ export function dialogVariants({
 }: KumoDialogVariantsProps = {}) {
   return cn(
     // Base styles
-    "shadow-m ring ring-kumo-line fixed top-1/2 left-1/2 w-full sm:w-auto max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-kumo-base text-kumo-default duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0",
+    "shadow-m ring ring-kumo-line fixed top-1/2 left-1/2 w-full sm:w-auto max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-kumo-base text-kumo-default duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0",
     // Apply size from KUMO_DIALOG_VARIANTS
     resolveVariant(KUMO_DIALOG_VARIANTS.size, size, KUMO_DIALOG_DEFAULT_VARIANTS.size).classes,
   );

packages/kumo/src/utils/variant-safety.test.ts

@@ -108,6 +108,7 @@ describe("variant functions survive invalid variant values", () => {
   it("dialogVariants", () => {
     expect(() => dialogVariants({ size: BOGUS })).not.toThrow();
     expect(typeof dialogVariants({ size: BOGUS })).toBe("string");
+    expect(dialogVariants()).not.toContain("sm:max-w");
   });
 
   it("emptyVariants", () => {