feat(modal): add "full" size option - #524
Open
ubf-hunter wants to merge 1 commit into
Open
ubf-hunter wants to merge 1 commit into
ubf-hunter wants to merge 1 commit into
Conversation
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 codegouvfr#513
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #513
What
Adds a
"full"value toModal'ssizeprop, alongside the existing"small" | "medium" | "large", mapped tofr-col-12 fr-col-md-12 fr-col-lg-12.Why
As raised in #513, the modal width is currently capped at three fixed sizes. Nothing in the DSFR prevents a
fr-col-lg-12modal, and there are legitimate use cases (e.g. previewing a document before upload, with extra context fields) where a full-width modal is the right call.Changes
src/Modal/Modal.tsx: add"full"to thesizeunion type and its corresponding case in the width switch.stories/Modal.stories.tsx: add"full"to the Storybooksizecontrol options (kept in sync with the type via the existingassert<Equals<...>>check).This is purely additive — default (
"medium") and existing sizes are untouched.