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(
{
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>();