Feature/edit user role modal updates#55
Merged
garrity-miepub merged 5 commits intomainfrom Feb 3, 2026
Merged
Conversation
UI Fixes: - Import ModalBody from Modal component - Wrap modal content in ModalBody for proper padding/alignment - Change bare div to ModalBody with space-y-4 class Storybook Controls: - Add comprehensive argTypes for all component props - Add boolean controls for open and isSubmitting - Add text control for errorMessage - Disable controls for complex props (user, roles) - Add action handlers for onOpenChange and onSave - Add default args at meta level with sample data - Add Playground story that uses args directly for working controls - Preserve all existing interactive demo stories
…play Add docs.story.inline=false and iframeHeight=500 to render modal stories in a proper iframe container, fixing the broken layout in docs view where fixed-position modals were floating outside their preview containers.
…port - Replace hardcoded gray colors with muted design tokens - Replace red error colors with destructive tokens - Replace blue info colors with primary tokens - User info card now uses bg-muted, text-foreground, text-muted-foreground - Error message uses border-destructive/30, bg-destructive/10, text-destructive - Role description uses bg-primary/10, text-primary - Permission badges use bg-muted, text-muted-foreground All colors now automatically adapt to light/dark mode via CSS variables.
…solation The docs page was not showing colors correctly for dark mode and themes because docs.story.inline: false caused stories to render in separate iframes that did not receive the theme globals from the parent document. Changes: - Remove docs.story.inline: false to render stories inline with theme context - Add decorator with transform: translateZ(0) to create containing block for position:fixed modal (keeps modal within story preview area) - Change layout to fullscreen with flex container for proper modal spacing - Container uses min-h-[500px] to give modal adequate vertical space This ensures: - Dark mode and light mode work correctly via Storybook toolbar - Theme switching (BlueHive, MIE Web, etc.) applies properly - Design tokens (bg-muted, text-destructive, bg-primary/10) adapt to themes - Modal stays contained within the story preview instead of escaping to viewport
There was a problem hiding this comment.
Pull request overview
This PR updates the EditUserRoleModal component and its Storybook stories to be theme-aware and to behave correctly in Storybook docs mode (including fixed-position modal containment and toolbar-driven theme switching).
Changes:
- Wraps the modal content in
ModalBodyand replaces hardcoded Tailwind color classes with theme tokens (bg-muted,text-foreground,text-destructive,bg-primary/10, etc.) inEditUserRoleModal. - Reworks
EditUserRoleModal.storiesto use a fullscreen layout, adds a decorator withtransform: translateZ(0)to contain the fixed-position modal, and defines args/argTypes for better controls and docs behavior.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| src/components/EditUserRoleModal/EditUserRoleModal.tsx | Uses ModalBody and design-token-based utility classes for user info, error, and role preview sections to support theming and consistent modal layout. |
| src/components/EditUserRoleModal/EditUserRoleModal.stories.tsx | Configures Storybook meta (fullscreen layout, decorator container, args/argTypes, Playground story) so the modal renders inline in docs with correct theming and contained fixed positioning. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Deploying ui with
|
| Latest commit: |
62d74d3
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://eb0b2510.ui-6d0.pages.dev |
| Branch Preview URL: | https://feature-edit-user-role-modal.ui-6d0.pages.dev |
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
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.
fix(EditUserRoleModal): fix theming in docs view by removing iframe isolation
The docs page was not showing colors correctly for dark mode and themes
because docs.story.inline: false caused stories to render in separate
iframes that did not receive the theme globals from the parent document.
Changes:
for position:fixed modal (keeps modal within story preview area)
This ensures:
editUserModal.mov