🚧 Under Construction

This component documentation is currently being developed. Some features may be incomplete.

Generic Dialog

View in Pattern Lab

HTML Markup

<h1>Dialog</h1>
<p>The following buttons launch both possible option of Dialogs.</p>
<button class="hoo-button-primary" id="btn-dialog"><span class="hoo-button-label">Show Dialog</span>
</button>
<button class="hoo-button-primary" id="btn-modal-dialog"><span class="hoo-button-label">Show Modal Dialog</span>
</button>
<ul>
    <li><strong>Dialog:</strong>Shows an absolute positioned dialog on the screen</li>
<li><strong>Modal:</strong>Shows an absolute fixed dialog on the screen, which has a backdrop to chancel any
        interference with the underlying content</li>
</ul>Through the change to regular<code>&lt;dialog&gt;</code>elements greater flexibility could be achieved.
See<a href="">MDN Dialog</a>
<dialog id="myDialog" class="hoo-dlg statusbar"><span class="hoo-icon">
    <svg class="hoo-icon-svg icon-info-filled" aria-hidden="true">
        <title>Fluent UI / Fluent Design by hTWOo UI Framework</title>
        <use xlink:href="/htwoo-core/images/icons.svg#icon-info-filled">
        </use>
    </svg></span>
<div class="hoo-dlg-content">This dialog comes without a backdrop and can be used for a
        statusbar for example.</div>
<div class="hoo-dlg-actions">
    <button id="closer-dlg" autofocus>Close</button>
</div>
</dialog>
<dialog id="myDialog-1" class="hoo-dlg" resize="true">
    <button id="closer-mdl" autofocus>Close</button>
    <div class="hoo-dlgcontent">
        <p>By clicking on the buttons you get a demonstation of possible options of the dialog.</p>
        <p>To change the dialog appearance you can pass in the following css variables via the style attribute:</p>
        <ul>
            <li><code>style="--hoo-dlg-height: 30vh"</code>- result in the dialog with 30% of the viewport height</li>
        <li><code>style="--hoo-dlg-width: 30vw"</code>- result in the dialog with 30% of the viewport width</li>
</ul>
<div style="display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1rem; margin: 1rem;">
    <button class="hoo-button" id="btn-sidebar-left"><span class="hoo-button-label">Sidebar Left</span>
</button>
<button class="hoo-button" id="btn-sidebar-right"><span class="hoo-button-label">Sidebar Right</span>
</button>
<button class="hoo-button" id="btn-topbar"><span class="hoo-button-label">Top Bar</span>
</button>
<button class="hoo-button" id="btn-bottombar"><span class="hoo-button-label">Bottom Bar</span>
</button>
<button class="hoo-button" id="btn-fullscreen"><span class="hoo-button-label">Full Screen</span>
</button>
</div>
</div>
</dialog>
<script>if (window.location !== window.parent.location) {
    let sidebarLeft = document.querySelector('#btn-sidebar-left');

    sidebarLeft.addEventListener('click', (event) => {

        let dialog = event.target.closest('.hoo-dlg');

        dialog.classList = "hoo-dlg";
        dialog.classList.remove('topbar', 'bottombar', 'sidebar', 'fullscreen', 'left', 'right');
        dialog.classList.add('sidebar', 'left');

        event.preventDefault();

    })

    let sidebarRight = document.querySelector('#btn-sidebar-right');

    sidebarRight.addEventListener('click', (event) => {

        let dialog = event.target.closest('.hoo-dlg');
        dialog.classList.remove('topbar', 'bottombar', 'sidebar', 'fullscreen', 'left', 'right');
        dialog.classList.add('sidebar', 'right');

        event.preventDefault();

    })

    let topbar = document.querySelector('#btn-topbar');
    topbar.addEventListener('click', (event) => {

        let dialog = event.target.closest('.hoo-dlg');

        dialog.classList.remove('topbar', 'bottombar', 'sidebar', 'fullscreen', 'left', 'right');
        dialog.classList.add('topbar');

        event.preventDefault();

    })

    let bottombar = document.querySelector('#btn-bottombar');

    bottombar.addEventListener('click', (event) => {

        let dialog = event.target.closest('.hoo-dlg');

        dialog.classList.remove('topbar', 'bottombar', 'sidebar', 'fullscreen', 'left', 'right');
        dialog.classList.add('bottombar');

        event.preventDefault();

    })

    let fullscreen = document.querySelector('#btn-fullscreen');

    fullscreen.addEventListener('click', (event) => {

        let dialog = event.target.closest('.hoo-dlg');

        dialog.classList.remove('topbar', 'bottombar', 'sidebar', 'fullscreen', 'left', 'right');
        dialog.classList.add('fullscreen');

        event.preventDefault();

    })
    }</script>

Generic Dialog

The Generic Dialog provides the foundational dialog implementation in the HTWOO design system. Built on the HTML5 <dialog> element, it offers a flexible, accessible container for displaying content, gathering user input, and managing user interactions in both modal and non-modal contexts.

Overview

The Generic Dialog serves as the base component for all dialog variants in HTWOO. It provides essential dialog functionality including positioning, sizing, content management, and accessibility features while remaining flexible enough to support various use cases and customization needs.

Features

HTML5 Foundation

  • Native Dialog Element: Built on HTML5 <dialog> for optimal accessibility
  • Browser Support: Leverages native browser dialog functionality
  • Focus Management: Automatic focus trapping and restoration
  • Keyboard Navigation: Built-in Escape key support for closing

Flexible Configuration

  • Modal and Non-Modal: Supports both show() and showModal() methods
  • Custom Dimensions: Configurable width and height via CSS variables
  • Content Areas: Header, content, and action sections
  • Resize Support: Optional resize functionality for user control

Visual Design

  • Modern Styling: Rounded corners (0.5rem) and smooth transitions
  • Backdrop Effects: Blur and saturation effects for modal dialogs
  • Responsive Layout: Adapts to viewport constraints
  • Theme Integration: Inherits HTWOO theme colors and typography

Structure

The Generic Dialog consists of three main areas:

  1. Dialog Header: Optional title bar with close button
  2. Dialog Content: Main content area
  3. Dialog Actions: Optional button area for user actions

Data Structure

{
    "dialog": {
        "button": {
            "label": "Show Dialog",
            "props": "id=\"btn-dialog\""
        }
    },
    "modal-dialog": {
        "button": {
            "label": "Show Modal Dialog", 
            "props": "id=\"btn-modal-dialog\""
        }
    }
}

CSS Classes

Container Classes

  • .hoo-dlg: Main dialog container with base styling
  • .hoo-dlgheader: Header section with title and close button
  • .hoo-dlgcontent: Content area with padding and overflow handling
  • .hoo-dlg-actions: Footer area for action buttons

Modifier Classes

  • .statusbar: Converts dialog to status bar appearance
  • .msg: Lightweight message bar styling
  • [resize="true"]: Enables user resizing functionality

Styling

Base Dimensions

Visual Properties

  • Background: Neutral-000 (#ffffff) for clean appearance
  • Border: None (relies on backdrop and shadow)
  • Border Radius: 0.5rem for modern appearance
  • Color: Neutral-700 (#323130) for text content
  • Transition: 0.5s ease-in-out for smooth animations

Backdrop Effects

JavaScript Integration

Basic Dialog Control

Using HOODialog Class

Event Handling

Use Cases

Content Display

  • Information Dialogs: Displaying detailed information or help content
  • Media Viewers: Image, video, or document preview interfaces
  • Detail Views: Expanded views of list items or cards
  • Report Displays: Charts, graphs, and data visualizations

User Input

  • Form Dialogs: Data entry and editing interfaces
  • Confirmation Dialogs: User action confirmations
  • Settings Panels: Configuration and preference interfaces
  • Wizard Interfaces: Multi-step processes and workflows

Application Features

  • About Dialogs: Application information and credits
  • Help Systems: Contextual help and documentation
  • Tool Palettes: Design and editing tools
  • Search Interfaces: Advanced search and filter options

Accessibility

Native HTML5 Benefits

  • Focus Trapping: Automatic focus management within dialog
  • Keyboard Support: Built-in Escape key handling for closing
  • Screen Reader: Native dialog semantics and state announcements
  • ARIA Integration: Automatic ARIA attributes and roles

Enhanced Accessibility

  • Focus Restoration: Returns focus to launching element on close
  • Tab Order: Logical tab order within dialog content
  • Close Methods: Multiple ways to close (button, Escape, backdrop)
  • Clear Labels: Descriptive button labels and instructions

Visual Accessibility

  • High Contrast: Compatible with high contrast display modes
  • Focus Indicators: Clear visual focus states for keyboard navigation
  • Text Scaling: Responsive to user font size preferences
  • Color Independence: Doesn’t rely solely on color for information

Best Practices

Content Strategy

  • Single Purpose: Each dialog should have one clear purpose
  • Concise Content: Keep content focused and scannable
  • Clear Actions: Use descriptive, action-oriented button labels
  • Logical Flow: Organize content in logical reading order

User Experience

  • Non-Intrusive Timing: Don’t interrupt critical user workflows
  • Clear Escape Routes: Always provide obvious ways to close
  • Responsive Feedback: Show immediate feedback for user actions
  • Context Preservation: Maintain user context when appropriate

Development

  • Progressive Enhancement: Ensure basic functionality without JavaScript
  • Error Handling: Graceful handling of content loading failures
  • Performance: Optimize for fast loading and smooth interactions
  • Testing: Test with keyboard users and screen readers

Variants and Extensions

Status Bar Mode

<dialog class="hoo-dlg statusbar">
    <div class="hoo-icon">
        <svg><!-- Status icon --></svg>
    </div>
    <div class="hoo-dlg-content">Status message</div>
    <div class="hoo-dlg-actions">
        <button>Dismiss</button>
    </div>
</dialog>

Message Bar Mode

<dialog class="hoo-dlg msg">
    <div class="hoo-dlg-content">
        Brief message content with minimal padding
    </div>
</dialog>

Browser Support

  • Modern Browsers: Full support in Chrome 37+, Firefox 98+, Safari 15.4+
  • HTML5 Dialog: Requires native <dialog> element support
  • CSS Features: Modern CSS (custom properties, backdrop-filter)
  • JavaScript: ES6+ features for enhanced functionality
  • Polyfills: dialog-polyfill available for older browser support

SCSS Import