feat(modal): viewport constrained fluid size #838
Merged
Conversation
This file contains 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
|
🚀 Deployed on https://pr-838--dhis2-ui.netlify.app |
|
Test summary
Run details
View run in Cypress Dashboard ➡️ This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard |
varl
force-pushed
the
viva-custom-modal-dimensions
branch
5 times, most recently
from
970c278 to
5063906
Compare
varl
changed the title
varl
force-pushed
the
viva-custom-modal-dimensions
branch
from
5063906 to
4922669
Compare
varl
requested review from
a team and
cooper-joe
and removed request for
cooper-joe
varl
commented
Nov 25, 2021
cooper-joe
approved these changes
Nov 25, 2021
Mohammer5
suggested changes
Nov 25, 2021
varl
commented
Nov 26, 2021
The fluid modal is allowed to stretch to the entire viewport save for some space around it to ensure that it is still perceived as a modal by the user. Within the ModalContent, a container (e.g. div or Box) can be placed with either a specific size, or a dynamic size, and the Modal will resize automatically to accomodate for the content. If the content is small, the Modal will contract to fit it.
|
🚀 Deployed on https://pr-838--dhis2-ui.netlify.app |
varl
force-pushed
the
viva-custom-modal-dimensions
branch
from
0a44252 to
14c3a73
Compare
Mohammer5
approved these changes
Nov 26, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Use case
There is a recurring need for larger Modals than our
largevariant (600px wide).Potential solutions
heightandwidthprops that sets the size of the ModalclassNameand!importantChosen solution
Allowing the Modal to have a
fluidprop allows the size of the Modal to be:This provides enough flexibility without opening up the API too much.
The other solution's drawbacks that excluded them:
height/widthprops tied into ongoing discussion about overrides/extensions/global propsclassName/!importantis not recommended by usFuture
mediumtofluid(breaking change)