Add Modal component
#631
Merged
Add Modal component
#631
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
🦋 Changeset detectedLatest commit: 9129e59 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
alex-ju
force-pushed
the
alex-ju/add-dialog-component
branch
from
9eb657e to
70281b4
Compare
alex-ju
force-pushed
the
alex-ju/add-dialog-component
branch
from
0a9387d to
5e19579
Compare
alex-ju
force-pushed
the
alex-ju/add-dialog-component
branch
from
173f551 to
9a7a6bf
Compare
alex-ju
force-pushed
the
alex-ju/add-dialog-component
branch
from
9a7a6bf to
e2694e4
Compare
alex-ju
force-pushed
the
alex-ju/add-dialog-component
branch
from
e2694e4 to
850af9e
Compare
alex-ju
force-pushed
the
alex-ju/add-dialog-component
branch
from
850af9e to
34e1375
Compare
This should prevent the scroll from being displayed on the `hds-modal__body` element if the content does not overflow.
Updated to test that any additional attribute passed is rendered – not just the `class`
We do this so that viewers don't accidentally remove an example from the showcase while checking out the examples.
If the callback function returns `false` we keep the modal dialog open
To facilitate the implementation of dismiss actions
Co-Authored-By: Melanie Sumner <[email protected]>
didoo
approved these changes
Nov 21, 2022
packages/components/tests/dummy/app/templates/components/modal.hbs
Outdated
Show resolved
Hide resolved
Switch from checking the callback function return to checking a `isDismissDisabled` property before dismissing a modal dialog
alex-ju
force-pushed
the
alex-ju/add-dialog-component
branch
from
e6d88d5 to
9129e59
Compare
Merged
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.
📌 Summary
Add
modalDialogModalcomponent🛠️ Detailed description
Raising this early for feedback on the direction of travelIn this modal dialog implementation, we try to leverage the
<dialog>element as much as possible and kept the codebase to a minimum.👉 Preview
Hds::ModalcomponentFunctionality
idand setaria-labelledbyto the title)role="dialog"aria-modal="true") [dialog]ESCkey the modal dialog is closed [dialog]ember-focus-traporember-click-outside)ember-focus-trap)Variations
sizevariation (small/medium/large)typecolorvariation (neutral/warning/critical)Documentation
📸 Screenshots
The current implementation of
Hds::Modalcomponent in Safari 14 (tested via BrowserStack) which does not have native support for<dialog>. In this instances, where there is no native support, we use Google Chrome's polyfill.🔗 External links
Jira issue
👀 How to review
👉 Review commit-by-commit (for the 'evolution' of the component and a more digestible review)
👉 Review by files changed (for an overall review)
Reviewer's checklist:
💬 Please consider using conventional comments when reviewing this PR.