Message Bars / Status Bars

Message bars (also known as status bars) are lightweight notification dialogs that provide contextual feedback to users. Built on the HTML5 <dialog> element with the .statusbar modifier, they display status messages, alerts, and system notifications in an unobtrusive manner.

Overview

Message bars in HTWOO provide a consistent way to communicate different types of status information to users. They appear as horizontal bars with distinctive colors, icons, and messaging that clearly indicate the nature of the information being conveyed.

Features

Status Types

• Info: Default blue styling for general information and neutral messages
• Success: Green styling with checkmark icon for positive outcomes
• Warning: Yellow/orange styling with warning icon for cautionary messages
• Error: Red styling with error icon for critical issues and failures

Visual Design

• Compact Layout: Horizontal bar design optimized for minimal space usage
• Icon Integration: Status-appropriate icons to reinforce message type
• Color Coding: Distinctive backgrounds and borders for immediate recognition
• Action Support: Optional close buttons and action links

Accessibility

• High Contrast: Strong color contrasts for accessibility compliance
• Screen Reader: Proper ARIA labels and semantic structure
• Keyboard Navigation: Full keyboard support for dismissal and actions
• Focus Management: Appropriate focus handling for interactive elements

Structure

Message bars consist of:

1. Status Icon: Visual indicator matching the message type
2. Content Area: Text content and optional action links
3. Actions: Optional close button and additional actions

Data Structure

{
    "bodyClass": "dlg-preview-flex",
    "btn-closer": {
        "button": {
            "iconname": "icon-close",
            "aria-label": "Close",
            "props": " autofocus"
        }
    }
}

CSS Classes

Base Classes

• .hoo-dlg: Main dialog container
• .statusbar: Modifier for status bar styling
• .hoo-dlgcontent: Content area container
• .hoo-dlg-actions: Actions container for buttons

Status Modifier Classes

• .success: Green styling for success messages
• .warning: Yellow/orange styling for warnings
• .error: Red styling for error messages
• (default): Blue styling for info messages

Styling

Visual Properties

• Background: Status-appropriate background colors with transparency
• Border: Left border accent in status color
• Padding: 0.75rem for compact appearance
• Typography: 14px font size with medium weight for content

Status Colors

• Info: Blue theme colors (#0078d4 family)
• Success: Green theme colors (#107c10 family)
• Warning: Yellow/orange theme colors (#ff8c00 family)
• Error: Red theme colors (#d13438 family)

JavaScript Integration

Manual Control

Dynamic Creation

Use Cases

System Notifications

• Application status updates
• Background process completion
• System maintenance alerts
• Feature announcements

User Feedback

• Form validation summaries
• Action confirmations
• Progress updates
• Error reporting

Contextual Information

• Help tips and guidance
• Promotional messages
• Feature availability notices
• Temporary status information

Accessibility

Screen Reader Support

• Semantic Structure: Proper dialog semantics
• Status Communication: Live regions for dynamic content
• Descriptive Text: Clear, concise messaging
• Icon Alternative: Text alternatives for status icons

Keyboard Navigation

• Focus Management: Logical tab order through interactive elements
• Escape Key: Close functionality via Escape key
• Action Access: Keyboard access to all interactive elements
• Focus Return: Appropriate focus restoration after dismissal

Visual Accessibility

• Color Contrast: High contrast ratios for all text
• Color Independence: Status communicated through icons and text, not color alone
• Focus Indicators: Clear visual focus states
• Size Flexibility: Responsive to user font size preferences

Best Practices

Content Guidelines

• Concise Messaging: Keep messages brief and actionable
• Clear Language: Use plain language and avoid technical jargon
• Action-Oriented: Include clear next steps when appropriate
• Context-Specific: Tailor messages to the specific situation

UX Guidelines

• Appropriate Timing: Show messages at relevant moments
• Non-Intrusive: Don’t interrupt critical user workflows
• Dismissible: Always provide a way to dismiss messages
• Consistent Positioning: Use consistent placement across the application

Technical Guidelines

• Performance: Minimize DOM manipulation for frequent messages
• Memory Management: Clean up dismissed message bars
• Responsive Design: Ensure messages work across all device sizes
• Testing: Test with screen readers and keyboard navigation

SCSS Import