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