Skip to content

NEW_POST_MODAL_GUIDE.md

Latest commit

 

History

History
198 lines (166 loc) · 7.53 KB

NEW_POST_MODAL_GUIDE.md

File metadata and controls

198 lines (166 loc) · 7.53 KB

NewPostModal Class Structure Guide

Overview

I've completely restructured the NewPostModal.js file to use semantic, human-readable class names that are consistent with the dashboard styling. Every class name clearly indicates its purpose and component location.

Key Improvements Made

1. Consistent Design System Integration

  • Before: Mixed Tailwind classes like fixed inset-0 z-50 flex items-center
  • After: Semantic classes like blog-modal-overlay new-post-modal-backdrop

2. Clear Component Structure

  • Before: Generic styling with unclear purpose
  • After: Organized sections with descriptive class names

3. Human-Readable Class Names

  • Before: w-full max-w-2xl mx-auto bg-white/98
  • After: blog-modal-container new-post-modal-container

Complete Class Structure Guide

Modal Structure Classes

blog-modal-overlay                → Background overlay with blur effect
new-post-modal-backdrop          → Specific backdrop styling for new post modal
blog-modal-container             → Main modal container
new-post-modal-container         → New post specific container styling

Header Section Classes

blog-modal-header                → Header container
new-post-modal-header           → New post specific header styling
blog-modal-title-section        → Title and icon wrapper
new-post-modal-title-section    → New post specific title section
blog-modal-icon-wrapper         → Icon background styling
new-post-modal-icon             → New post specific icon styling
blog-modal-emoji-icon           → Emoji icon styling (✨)
blog-modal-title                → Modal title text
new-post-modal-title            → New post specific title styling
blog-modal-close-button         → Close button
new-post-modal-close            → New post specific close button styling
blog-modal-close-icon           → Close button icon (X)

Body Section Classes

blog-modal-body                 → Main content area
new-post-modal-body            → New post specific body styling
blog-form-error-message        → Error message container
new-post-error-display         → New post specific error styling
blog-form-error-content        → Error message content wrapper
blog-form-error-icon           → Error icon
blog-form-error-text           → Error message text

Form Classes

blog-post-creation-form        → Main form container
new-post-form                  → New post specific form styling
blog-form-field                → Individual form field wrapper
new-post-title-field           → Title field container
new-post-image-field           → Image URL field container
new-post-content-field         → Content textarea field container
new-post-tags-field            → Tags field container

Form Input Classes

blog-form-label                → Form field labels
new-post-title-label           → Title field label
new-post-image-label           → Image field label
new-post-content-label         → Content field label
new-post-tags-label            → Tags field label

blog-form-input-wrapper        → Input container with icon
new-post-title-wrapper         → Title input wrapper
new-post-image-wrapper         → Image input wrapper
new-post-tags-wrapper          → Tags input wrapper

blog-form-input-icon-wrapper   → Icon container within input
blog-form-input-icon           → Input field icons
new-post-title-icon            → Title field icon
new-post-image-icon            → Image field icon
new-post-tags-icon             → Tags field icon

blog-form-input                → Input field styling
new-post-title-input           → Title input field
new-post-image-input           → Image URL input field
new-post-tags-input            → Tags input field

Textarea Classes

blog-form-textarea-wrapper     → Textarea container
new-post-content-wrapper       → Content textarea wrapper
blog-form-textarea-icon-wrapper → Textarea icon container
blog-form-textarea-icon        → Textarea field icon
new-post-content-icon          → Content field icon
blog-form-textarea             → Textarea styling
new-post-content-textarea      → Content textarea field

Helper Text Classes

blog-form-helper-text          → Helper text styling
new-post-tags-helper           → Tags field helper text

Footer Section Classes

blog-modal-footer              → Footer container
new-post-modal-footer          → New post specific footer styling
blog-modal-actions             → Action buttons container
new-post-modal-actions         → New post specific actions styling
new-post-cancel-btn            → Cancel button
new-post-submit-btn            → Submit/Publish button
new-post-submit-icon           → Submit button icon

Design System Features

Color Consistency

  • Primary Colors: var(--color-primary) for main elements
  • Text Colors: var(--color-neutral-darkest) for readability
  • Error Colors: var(--color-error) for error messages
  • Background Colors: var(--color-neutral-white) with gradients

Visual Effects

  • Glassmorphic Design: Backdrop blur and transparency
  • Smooth Animations: Modal slide-in and error message animations
  • Interactive States: Hover effects and focus states
  • Box Shadows: Consistent depth and elevation

Accessibility Features

  • ARIA Labels: Proper screen reader support
  • Focus Management: Clear focus indicators
  • Error Announcements: Live regions for error messages
  • Keyboard Navigation: Full keyboard accessibility

Component Structure

Modal Layout

Modal Overlay (backdrop)
└── Modal Container
    ├── Header Section
    │   ├── Title Section (icon + title)
    │   └── Close Button
    ├── Body Section
    │   ├── Error Message (conditional)
    │   └── Form
    │       ├── Title Field
    │       ├── Image URL Field
    │       ├── Content Field
    │       └── Tags Field
    └── Footer Section
        └── Action Buttons (Cancel + Submit)

Form Validation

  • Required Fields: Title and Content marked with *
  • URL Validation: Image URL field with proper type
  • Error Handling: Clear error messages with icons
  • Loading States: Button loading state during submission

Responsive Design

Mobile Optimizations

  • Full Screen: Modal takes full mobile screen
  • Stacked Buttons: Action buttons stack vertically
  • Reduced Padding: Optimized spacing for small screens
  • Touch Targets: Adequate button sizes for touch

Desktop Features

  • Centered Modal: Modal centered with backdrop
  • Side-by-Side Buttons: Horizontal action button layout
  • Larger Icons: Better visual hierarchy
  • Enhanced Shadows: Premium visual effects

Usage Examples

Finding Elements

  1. Modal elements: Look for blog-modal-*
  2. Form elements: Look for blog-form-*
  3. New post specific: Look for new-post-*

Customizing Styles

  1. Colors: Modify CSS variables in design system
  2. Spacing: Update padding/margin in component classes
  3. Animations: Adjust keyframes and transitions

Adding New Fields

  1. Follow naming pattern: new-post-[field-name]-field
  2. Include icon wrapper and input styling
  3. Add responsive styles in media queries

This structure provides a professional, maintainable modal component that integrates seamlessly with your dashboard design system!