docs: Add design system integration guides (MUI, Chakra UI, Ant Design)#223
Open
qkraudghgh wants to merge 4 commits intotoss:mainfrom
Open
docs: Add design system integration guides (MUI, Chakra UI, Ant Design)#223qkraudghgh wants to merge 4 commits intotoss:mainfrom
qkraudghgh wants to merge 4 commits intotoss:mainfrom
Conversation
Introduce a new "디자인 시스템과 함께 쓰기 / With Design Systems" section under docs/more with an example page showing how to use overlay-kit with MUI's Dialog component. The page covers three patterns: - overlay.open with Dialog open/onClose - overlay.openAsync returning user choice as a Promise - Memory release after exit animation via TransitionProps.onExited Both Korean and English versions are added.
Add a Chakra UI v3 example under the "디자인 시스템과 함께 쓰기 / With Design Systems" section. The page demonstrates overlay-kit with Chakra v3's Dialog.Root, using onOpenChange to bridge the library's controlled API with overlay-kit's close. Since Chakra v3 does not expose an exit-animation callback, memory release uses a setTimeout sized to match the scale motion preset. Both Korean and English versions are added.
Add an Ant Design example under the "디자인 시스템과 함께 쓰기 / With Design Systems" section. The page shows overlay-kit paired with antd's Modal, wiring both onCancel and onOk to close and using the afterClose prop to call unmount once the exit animation completes. Both Korean and English versions are added.
|
|
@qkraudghgh is attempting to deploy a commit to the Toss Team on Vercel. A member of the Team first needs to authorize it. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #223 +/- ##
=======================================
Coverage 99.85% 99.85%
=======================================
Files 15 15
Lines 1340 1340
Branches 262 262
=======================================
Hits 1338 1338
Misses 2 2
🚀 New features to boost your workflow:
|
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
2 participants
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.
Description
Adds a new "디자인 시스템과 함께 쓰기 / With Design Systems" section under
docs/morewith runnable Sandpack examples showing how to integrate overlay-kit with popular React UI libraries.Related Issue: N/A (proactive documentation improvement)
Changes
docs/more/with-design-systemsin the sidebar for bothkoandenlocales (_meta.tsxupdates).mui.mdx) —Dialogwithopen/onClose, memory release viaTransitionProps.onExited.chakra-ui.mdx) —Dialog.RootwithonOpenChange, memory release viasetTimeoutmatching the scale motion preset (Chakra v3 does not expose an exit-complete callback).ant-design.mdx) —ModalwithonCancel/onOk, memory release viaafterClose.overlay.open, asyncoverlay.openAsync, and memory release after the exit animation.Motivation and Context
The existing docs demonstrate overlay-kit paired with MUI (in the introduction and
more/basicpages), but users adopting other popular design systems have to reverse-engineer how each library'sopen/onCloseand exit-animation callbacks map to overlay-kit'sisOpen,close, andunmount. This PR lowers that friction by providing runnable reference examples for the most commonly requested libraries, keeping the docs style and Sandpack structure already established bymore/basic.How Has This Been Tested?
Screenshots (if appropriate)
N/A
Types of changes
Checklist
Further Comments
Commits are split per library so each integration guide can be reviewed (or reverted) independently.