Initial commit
This commit is contained in:
Zhongwei Li
341
skills/fluxwing-component-creator/templates/modal.md
Normal file
341
skills/fluxwing-component-creator/templates/modal.md
Normal file
@@ -0,0 +1,341 @@
|
||||
# Modal Dialog Component
|
||||
|
||||
Modal dialog overlay with focus management, backdrop, and configurable content areas for confirmations, forms, and content display.
|
||||
|
||||
## Standard Modal (Medium Size)
|
||||
|
||||
```
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
░░░░░░░░░░┌────────────────────────────────┐░░░░░░░░
|
||||
░░░░░░░░░░│ {{title}} │✕│░░░░░░░░
|
||||
░░░░░░░░░░├────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░░░│ {{content}} │░░░░░░░░
|
||||
░░░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░░░├────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░░░│ ┌─────────┐ ┌─────────────┐ │░░░░░░░░
|
||||
░░░░░░░░░░│ │ Cancel │ │ {{buttons[1].text}} │ │░░░░░░░░
|
||||
░░░░░░░░░░│ └─────────┘ └─────────────┘ │░░░░░░░░
|
||||
░░░░░░░░░░└────────────────────────────────┘░░░░░░░░
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
```
|
||||
|
||||
## Small Modal (Confirmation)
|
||||
|
||||
```
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
░░░░░░░░┌──────────────────────────┐░░░░░
|
||||
░░░░░░░░│ {{title}} │✕│░░░░░
|
||||
░░░░░░░░├──────────────────────────┤░░░░░
|
||||
░░░░░░░░│ │░░░░░
|
||||
░░░░░░░░│ {{content}} │░░░░░
|
||||
░░░░░░░░│ │░░░░░
|
||||
░░░░░░░░├──────────────────────────┤░░░░░
|
||||
░░░░░░░░│ ┌──────┐ ┌────────────┐ │░░░░░
|
||||
░░░░░░░░│ │ No │ │ Yes │ │░░░░░
|
||||
░░░░░░░░│ └──────┘ └────────────┘ │░░░░░
|
||||
░░░░░░░░└──────────────────────────┘░░░░░
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
```
|
||||
|
||||
## Large Modal (Form/Content)
|
||||
|
||||
```
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
░░░░░░░░┌────────────────────────────────────────────────────────┐░░░░░░░░
|
||||
░░░░░░░░│ {{title}} │✕│░░░░░░░░
|
||||
░░░░░░░░├────────────────────────────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░│ {{content}} │░░░░░░░░
|
||||
░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░│ Name: ┌─────────────────────────────────────────────┐ │░░░░░░░░
|
||||
░░░░░░░░│ │ Enter your name │ │░░░░░░░░
|
||||
░░░░░░░░│ └─────────────────────────────────────────────┘ │░░░░░░░░
|
||||
░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░│ Email: ┌────────────────────────────────────────────┐ │░░░░░░░░
|
||||
░░░░░░░░│ │ your@email.com │ │░░░░░░░░
|
||||
░░░░░░░░│ └────────────────────────────────────────────┘ │░░░░░░░░
|
||||
░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░├────────────────────────────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░│ ┌──────────┐ ┌──────────────┐ ┌──────────────┐ │░░░░░░░░
|
||||
░░░░░░░░│ │ Cancel │ │ Save │ │ Submit │ │░░░░░░░░
|
||||
░░░░░░░░│ └──────────┘ └──────────────┘ └──────────────┘ │░░░░░░░░
|
||||
░░░░░░░░└────────────────────────────────────────────────────────┘░░░░░░░░
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
```
|
||||
|
||||
## Fullscreen Modal
|
||||
|
||||
```
|
||||
╔══════════════════════════════════════════════════════════════════════════╗
|
||||
║ {{title}} ✕ ║
|
||||
╠══════════════════════════════════════════════════════════════════════════╣
|
||||
║ ║
|
||||
║ {{content}} ║
|
||||
║ ║
|
||||
║ ║
|
||||
║ ║
|
||||
║ ║
|
||||
║ ║
|
||||
║ ║
|
||||
║ ║
|
||||
║ ║
|
||||
║ ║
|
||||
║ ║
|
||||
║ ║
|
||||
║ ║
|
||||
╠══════════════════════════════════════════════════════════════════════════╣
|
||||
║ ┌──────────┐ ┌──────────┐ ║
|
||||
║ │ Cancel │ │ OK │ ║
|
||||
║ └──────────┘ └──────────┘ ║
|
||||
╚══════════════════════════════════════════════════════════════════════════╝
|
||||
```
|
||||
|
||||
## Modal Variants
|
||||
|
||||
### Warning Modal
|
||||
```
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
░░░░░░░░┌────────────────────────────────┐░░░░░░░░
|
||||
░░░░░░░░│ ⚠ Warning │✕│░░░░░░░░
|
||||
░░░░░░░░├────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░│ This action cannot be undone. │░░░░░░░░
|
||||
░░░░░░░░│ Are you sure you want to │░░░░░░░░
|
||||
░░░░░░░░│ continue? │░░░░░░░░
|
||||
░░░░░░░░├────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░│ ┌─────────┐ ┌─────────────┐ │░░░░░░░░
|
||||
░░░░░░░░│ │ Cancel │ │ Delete │ │░░░░░░░░
|
||||
░░░░░░░░│ └─────────┘ └─────────────┘ │░░░░░░░░
|
||||
░░░░░░░░└────────────────────────────────┘░░░░░░░░
|
||||
```
|
||||
|
||||
### Error Modal
|
||||
```
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
░░░░░░░░┌────────────────────────────────┐░░░░░░░░
|
||||
░░░░░░░░│ ✗ Error │✕│░░░░░░░░
|
||||
░░░░░░░░├────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░│ An error occurred while │░░░░░░░░
|
||||
░░░░░░░░│ processing your request. │░░░░░░░░
|
||||
░░░░░░░░│ Please try again later. │░░░░░░░░
|
||||
░░░░░░░░├────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░│ ┌─────────────┐ │░░░░░░░░
|
||||
░░░░░░░░│ │ OK │ │░░░░░░░░
|
||||
░░░░░░░░│ └─────────────┘ │░░░░░░░░
|
||||
░░░░░░░░└────────────────────────────────┘░░░░░░░░
|
||||
```
|
||||
|
||||
### Success Modal
|
||||
```
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
░░░░░░░░┌────────────────────────────────┐░░░░░░░░
|
||||
░░░░░░░░│ ✓ Success │✕│░░░░░░░░
|
||||
░░░░░░░░├────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░│ Your changes have been saved │░░░░░░░░
|
||||
░░░░░░░░│ successfully! │░░░░░░░░
|
||||
░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░├────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░│ ┌─────────────┐ │░░░░░░░░
|
||||
░░░░░░░░│ │ Continue │ │░░░░░░░░
|
||||
░░░░░░░░│ └─────────────┘ │░░░░░░░░
|
||||
░░░░░░░░└────────────────────────────────┘░░░░░░░░
|
||||
```
|
||||
|
||||
## Modal Without Backdrop
|
||||
|
||||
```
|
||||
┌────────────────────────────────┐
|
||||
│ {{title}} │✕│
|
||||
├────────────────────────────────┤
|
||||
│ │
|
||||
│ {{content}} │
|
||||
│ │
|
||||
│ │
|
||||
├────────────────────────────────┤
|
||||
│ ┌─────────┐ ┌─────────────┐ │
|
||||
│ │ Cancel │ │ Confirm │ │
|
||||
│ └─────────┘ └─────────────┘ │
|
||||
└────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Modal with Custom Content
|
||||
|
||||
```
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
░░░░░░░░┌────────────────────────────────┐░░░░░░░░
|
||||
░░░░░░░░│ Image Gallery │✕│░░░░░░░░
|
||||
░░░░░░░░├────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░│ ┌────────────────────────────┐ │░░░░░░░░
|
||||
░░░░░░░░│ │ IMAGE_CONTENT │ │░░░░░░░░
|
||||
░░░░░░░░│ │ [PHOTO] │ │░░░░░░░░
|
||||
░░░░░░░░│ │ │ │░░░░░░░░
|
||||
░░░░░░░░│ └────────────────────────────┘ │░░░░░░░░
|
||||
░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░│ Photo 1 of 5 │░░░░░░░░
|
||||
░░░░░░░░├────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░│ ┌─────┐ ┌─────┐ ┌─────────────┐│░░░░░░░░
|
||||
░░░░░░░░│ │ Prev│ │Next │ │ Close ││░░░░░░░░
|
||||
░░░░░░░░│ └─────┘ └─────┘ └─────────────┘│░░░░░░░░
|
||||
░░░░░░░░└────────────────────────────────┘░░░░░░░░
|
||||
```
|
||||
|
||||
## Dimensions
|
||||
|
||||
- **Small**: 30×15 characters
|
||||
- **Medium**: 50×20 characters (default)
|
||||
- **Large**: 70×30 characters
|
||||
- **Fullscreen**: Full viewport dimensions
|
||||
- **Custom**: Configurable width/height
|
||||
|
||||
## Variables
|
||||
|
||||
- `title` (string): Modal header title (max 60 characters)
|
||||
- `content` (string, required): Main modal content (max 500 characters)
|
||||
- `size` (string): Modal size ("small", "medium", "large", "fullscreen")
|
||||
- `buttons` (array): Action buttons with text, variant, and action
|
||||
- `showCloseButton` (boolean): Show X button in header (default: true)
|
||||
- `backdrop` (boolean): Show backdrop overlay (default: true)
|
||||
- `variant` (string): Style variant ("default", "warning", "error", "success", "info")
|
||||
|
||||
## Accessibility
|
||||
|
||||
- **Role**: dialog
|
||||
- **Focus Management**:
|
||||
- Trap focus within modal
|
||||
- Return focus to trigger element on close
|
||||
- Initial focus on first button or specified element
|
||||
- **Keyboard Support**:
|
||||
- Escape: Close modal (if closable)
|
||||
- Tab/Shift+Tab: Navigate within modal
|
||||
- Enter: Activate focused button
|
||||
- **ARIA**:
|
||||
- `aria-labelledby`: References title element
|
||||
- `aria-describedby`: References content element
|
||||
- `aria-modal`: "true"
|
||||
- `aria-hidden`: "true" on background content when modal open
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Confirmation Dialog
|
||||
```
|
||||
░░░░░░░░┌──────────────────────────┐░░░░░
|
||||
░░░░░░░░│ Delete Item │✕│░░░░░
|
||||
░░░░░░░░├──────────────────────────┤░░░░░
|
||||
░░░░░░░░│ │░░░░░
|
||||
░░░░░░░░│ Are you sure you want to │░░░░░
|
||||
░░░░░░░░│ delete this item? This │░░░░░
|
||||
░░░░░░░░│ action cannot be undone. │░░░░░
|
||||
░░░░░░░░├──────────────────────────┤░░░░░
|
||||
░░░░░░░░│ ┌──────┐ ┌────────────┐ │░░░░░
|
||||
░░░░░░░░│ │Cancel│ │ Delete │ │░░░░░
|
||||
░░░░░░░░│ └──────┘ └────────────┘ │░░░░░
|
||||
░░░░░░░░└──────────────────────────┘░░░░░
|
||||
```
|
||||
|
||||
### Loading Modal
|
||||
```
|
||||
░░░░░░░░┌──────────────────────────┐░░░░░
|
||||
░░░░░░░░│ Processing... │░│░░░░░
|
||||
░░░░░░░░├──────────────────────────┤░░░░░
|
||||
░░░░░░░░│ │░░░░░
|
||||
░░░░░░░░│ Please wait while we │░░░░░
|
||||
░░░░░░░░│ process your request... │░░░░░
|
||||
░░░░░░░░│ │░░░░░
|
||||
░░░░░░░░│ ████████████████░░░░ 80% │░░░░░
|
||||
░░░░░░░░└──────────────────────────┘░░░░░
|
||||
```
|
||||
|
||||
### Settings Modal
|
||||
```
|
||||
░░░░░░░░┌──────────────────────────────────┐░░░░░░░░
|
||||
░░░░░░░░│ Preferences │✕│░░░░░░░░
|
||||
░░░░░░░░├──────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░│ ☑ Enable notifications │░░░░░░░░
|
||||
░░░░░░░░│ ☐ Auto-save changes │░░░░░░░░
|
||||
░░░░░░░░│ ☑ Dark mode │░░░░░░░░
|
||||
░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░│ Language: ┌───────────────────┐ │░░░░░░░░
|
||||
░░░░░░░░│ │ English ▼│ │░░░░░░░░
|
||||
░░░░░░░░│ └───────────────────┘ │░░░░░░░░
|
||||
░░░░░░░░├──────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░│ ┌─────────┐ ┌─────────────────┐│░░░░░░░░
|
||||
░░░░░░░░│ │ Cancel │ │ Save ││░░░░░░░░
|
||||
░░░░░░░░│ └─────────┘ └─────────────────┘│░░░░░░░░
|
||||
░░░░░░░░└──────────────────────────────────┘░░░░░░░░
|
||||
```
|
||||
|
||||
## Component Behavior
|
||||
|
||||
### Modal Lifecycle
|
||||
|
||||
1. **Trigger**: User action opens modal
|
||||
2. **Opening**: Modal animates into view
|
||||
3. **Open**: Modal fully visible and interactive
|
||||
4. **Interaction**: User interacts with modal content
|
||||
5. **Closing**: Modal closes via button, escape, or backdrop
|
||||
6. **Closed**: Modal hidden, focus restored
|
||||
|
||||
### Focus Management
|
||||
|
||||
- **Focus Trap**: Tab navigation stays within modal
|
||||
- **Initial Focus**: First focusable element (usually close button)
|
||||
- **Focus Restoration**: Return to trigger element on close
|
||||
- **Focus Indicators**: Clear visual feedback for keyboard users
|
||||
|
||||
### Backdrop Behavior
|
||||
|
||||
- **Backdrop Click**: Close modal if `backdropClosable` is true
|
||||
- **Backdrop Scroll**: Prevent page scrolling when modal open
|
||||
- **Multiple Modals**: Handle stacking and z-index management
|
||||
|
||||
## Design Tokens
|
||||
|
||||
### Visual Elements
|
||||
- `░` = Backdrop overlay (semi-transparent)
|
||||
- `┌─┐└┘─│` = Modal border and dividers
|
||||
- `╔═╗╚╝═║` = Fullscreen modal borders
|
||||
- `✕` = Close button icon
|
||||
- `⚠✗✓` = Status icons for variants
|
||||
|
||||
### Spacing
|
||||
- **Padding**: 2-3 characters internal spacing
|
||||
- **Margins**: Centered positioning with backdrop
|
||||
- **Button Spacing**: 2-3 characters between buttons
|
||||
- **Content Spacing**: 1-2 lines between sections
|
||||
|
||||
## Related Components
|
||||
|
||||
- **Popup**: Smaller, contextual overlays
|
||||
- **Tooltip**: Informational overlays
|
||||
- **Dropdown**: Menu-style overlays
|
||||
- **Sidebar**: Panel-style content areas
|
||||
|
||||
## Implementation Notes
|
||||
|
||||
This ASCII representation demonstrates modal overlay patterns. When implementing:
|
||||
|
||||
1. **Focus Management**: Robust focus trapping and restoration
|
||||
2. **Backdrop Management**: Proper event handling and scroll prevention
|
||||
3. **Animation**: Smooth open/close transitions
|
||||
4. **Mobile Adaptation**: Responsive sizing and touch interactions
|
||||
5. **Performance**: Efficient rendering and memory management
|
||||
6. **Accessibility**: Full screen reader and keyboard support
|
||||
|
||||
## Variants
|
||||
|
||||
- **Alert Dialog**: Simple message with OK button
|
||||
- **Confirmation Dialog**: Yes/No or Cancel/Confirm actions
|
||||
- **Form Modal**: Data input and submission
|
||||
- **Content Modal**: Rich content display (images, videos, etc.)
|
||||
- **Loading Modal**: Progress indication during operations
|
||||
Reference in New Issue
Block a user