Dialog component and ModalDialog redesign

[Aldemylla]

Description

Type of Change

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Tests
• Other

Motivation and Context

The unnnic design system needed a modern Dialog component to replace the legacy ModalDialog implementation. The new Dialog component provides better accessibility, a more flexible API, and improved developer experience.
Unlike the legacy ModalDialog, the new Dialog components follow a composable pattern that allows developers to build custom dialog layouts while maintaining consistency and accessibility through reka-ui primitives.

Summary of Changes

New Components Added:

• Dialog - Main wrapper component with controlled/uncontrolled open state
• DialogContent - Content container with overlay, animations and size variants
• DialogHeader - Header section with optional close button and type-based icons
• DialogTitle - Accessible title component
• DialogFooter - Footer section with optional divider
• DialogClose - Trigger component to close the dialog
• DialogTrigger - Trigger component to open the dialog

Implementation Details:

• Built on top of reka-ui's Dialog primitives for accessibility and keyboard navigation
• Uses TypeScript for type safety
• Supports three sizes: small (360px), medium (560px), large (800px)
• Supports four types: default, success, warning, attention (with contextual icons)
• Controlled via v-model:open for programmatic control
• Smooth animations using Tailwind animate utilities
• Comprehensive Storybook documentation with 10+ usage examples

Refactoring:

• Refactored ModalDialog component to use new Dialog components internally
• Marked ModalDialog as deprecated (to be discontinued)
• Updated ModalDialog tests and snapshots to reflect new structure
• Added parentClass prop to DialogContent for temporary backward compatibility

---

Usage Example:

<UnnnicDialog>
  <UnnnicDialogTrigger>
    <UnnnicButton text="Open Dialog" />
  </UnnnicDialogTrigger>
  
  <UnnnicDialogContent size="medium">
    <UnnnicDialogHeader type="success">
      <UnnnicDialogTitle>Operation Successful</UnnnicDialogTitle>
    </UnnnicDialogHeader>
    
    <div style="padding: 24px;">
      <p>Your changes have been saved successfully.</p>
    </div>
    
    <UnnnicDialogFooter>
      <UnnnicDialogClose>
        <UnnnicButton text="Cancel" type="tertiary" />
      </UnnnicDialogClose>
      <UnnnicButton text="Confirm" type="primary" />
    </UnnnicDialogFooter>
  </UnnnicDialogContent>
</UnnnicDialog>

Design Files

• Design File

Demonstration

[codecov-commenter]

Codecov Report

❌ Patch coverage is 11.53846% with 46 lines in your changes missing coverage. Please review.
✅ Project coverage is 33.26%. Comparing base (1ee7a67) to head (3f3a5d6).

Files with missing lines	Patch %	Lines
src/components/index.ts	0.00%	14 Missing ⚠️
src/components/ui/dialog/DialogContent.vue	0.00%	12 Missing ⚠️
src/components/ModalDialog/ModalDialog.vue	22.22%	7 Missing ⚠️
src/components/ui/dialog/DialogHeader.vue	0.00%	4 Missing ⚠️
src/components/ui/dialog/DialogTitle.vue	0.00%	4 Missing ⚠️
src/components/ui/dialog/DialogClose.vue	0.00%	2 Missing ⚠️
src/components/ui/dialog/DialogTrigger.vue	0.00%	2 Missing ⚠️
src/components/ui/dialog/DialogFooter.vue	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #730      +/-   ##
==========================================
- Coverage   34.06%   33.26%   -0.80%     
==========================================
  Files         153      160       +7     
  Lines        3714     3755      +41     
  Branches     1067     1069       +2     
==========================================
- Hits         1265     1249      -16     
- Misses       2449     2506      +57     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.