fix(AuthDialog): render stories in iframe to prevent overflow:hidden …#45
fix(AuthDialog): render stories in iframe to prevent overflow:hidden …#45garrity-miepub merged 2 commits intomainfrom
Conversation
…leak The AuthDialog component sets document.body.style.overflow = 'hidden' when open, which was preventing the Storybook docs page from scrolling. Added docs.story.inline: false and iframeHeight: 600 to meta.parameters to isolate the component in an iframe, preventing the styles from affecting the parent docs page.
…ractive controls - Fix scroll lock issue caused by AuthDialog setting body overflow:hidden - Add MutationObserver in AuthDialogDemo to continuously clear overflow:hidden - This prevents the modal's scroll lock from affecting Storybook docs page - Add comprehensive Storybook controls for interactive demos - initialMode: Switch between login, signup, forgotPassword, etc. - showSocialProviders: Toggle social auth buttons visibility - appName: Customize the dialog header text - logoUrl: Add custom branding logo - termsUrl/privacyUrl: Configure legal links - requireEmailVerification: Toggle email verification requirement - Organize controls into categories: Demo Controls, Branding, URLs, Settings - Hide component props that conflict with demo wrapper (isOpen, mode, onClose, etc.) - These are managed internally by AuthDialogDemo for proper demonstration - Fix broken placeholder image URL (via.placeholder.com -> placehold.co) Controls now work on both Canvas and Docs pages while maintaining scroll functionality.
Deploying ui with
|
| Latest commit: |
d438566
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://b28c88a3.ui-6d0.pages.dev |
| Branch Preview URL: | https://feature-authdialog-updtes.ui-6d0.pages.dev |
There was a problem hiding this comment.
Pull request overview
This PR aims to fix an issue where the AuthDialog component's overflow:hidden style on the document body was preventing the Storybook docs page from scrolling. However, the implementation differs significantly from what's described in the PR description.
Changes:
- Added comprehensive Storybook controls with a new
DemoControlsinterface and type system for better story interactivity - Implemented a MutationObserver-based workaround to continuously reset body overflow styles
- Refactored story definitions to use Storybook args pattern with proper render functions
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Thanks for the review! We actually tried the When stories are rendered in iframes with The MutationObserver approach was chosen as a deliberate trade-off because:
The dialog being "always open" in stories is intentional for documentation purposes - we want users to see the component immediately without having to click a button first. The observer runs while the story is mounted, which is the expected behavior. If there's a way to use iframe isolation while maintaining controls functionality, I'd be happy to explore it! |
…leak
The AuthDialog component sets document.body.style.overflow = 'hidden' when open, which was preventing the Storybook docs page from scrolling.
Added docs.story.inline: false and iframeHeight: 600 to meta.parameters to isolate the component in an iframe, preventing the styles from affecting the parent docs page.
authdialog.mov