From 12070d7c07756e42092d41eb8606d02204ea0276 Mon Sep 17 00:00:00 2001
From: UBF <130258111+ubf-hunter@users.noreply.github.com>
Date: Sat, 12 Sep 2026 00:12:38 +0100
Subject: [PATCH] feat(modal): add "full" size option

The modal width was capped at three fixed sizes (small/medium/large),
with no option to use the full available page width. Nothing in the
DSFR itself prevents a fr-col-lg-12 modal, and there are legitimate
use cases (e.g. previewing a document before upload) where a
full-width modal makes sense.

Add a "full" value to the size prop, mapped to
fr-col-12 fr-col-md-12 fr-col-lg-12, alongside the existing sizes.

Closes #513
---
 src/Modal/Modal.tsx       | 4 +++-
 stories/Modal.stories.tsx | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/Modal/Modal.tsx b/src/Modal/Modal.tsx
index f63303c48..d3c70497d 100644
--- a/src/Modal/Modal.tsx
+++ b/src/Modal/Modal.tsx
@@ -13,7 +13,7 @@ import { overwriteReadonlyProp } from "tsafe/lab/overwriteReadonlyProp";
 export type ModalProps = {
     className?: string;
     /** Default: "medium" */
-    size?: "small" | "medium" | "large";
+    size?: "small" | "medium" | "large" | "full";
     title: ReactNode;
     titleAs?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "div";
     titleProps?: React.DetailedHTMLProps<
@@ -81,6 +81,8 @@ const Modal = memo(
                         <div
                             className={(() => {
                                 switch (size) {
+                                    case "full":
+                                        return fr.cx("fr-col-12", "fr-col-md-12", "fr-col-lg-12");
                                     case "large":
                                         return fr.cx("fr-col-12", "fr-col-md-10", "fr-col-lg-8");
                                     case "small":
diff --git a/stories/Modal.stories.tsx b/stories/Modal.stories.tsx
index 701fb0804..88025206d 100644
--- a/stories/Modal.stories.tsx
+++ b/stories/Modal.stories.tsx
@@ -120,7 +120,7 @@ To create a Dialog component, something that you would use to ask the user a que
         },
         "size": {
             "options": (() => {
-                const options = ["small", "medium", "large"] as const;
+                const options = ["small", "medium", "large", "full"] as const;
 
                 assert<Equals<typeof options[number] | undefined, ModalProps["size"]>>();