Create Modal #34

2026-02-02T20:12:43Z

an.di commented

2026-02-02 20:12:43 +00:00

Implement Create Modal Component with Supporting Subcomponents (CR-45)

Overview

This PR implements the Create modal component and its supporting subcomponents based on the Figma design specifications. The Create component provides a reusable modal dialog for multi-step creation flows (e.g., creating community policies). It includes portal rendering, keyboard navigation, focus management, and accessibility features.

The implementation follows the container/presentation pattern and includes reusable utility components (ModalHeader, ModalFooter, InputWithCounter) that can be used independently or with other modal-like components.

Changes

New Components

Create Component (app/components/Create/)
- Full container/presentation pattern implementation
- Portal rendering to document body
- Keyboard navigation (ESC to close, Tab focus trap)
- Body scroll lock when open
- Focus management (traps focus within modal, restores on close)
- ARIA attributes for accessibility
- Supports multi-step flows with stepper integration
- Configurable header, content, and footer sections
ModalHeader Component (app/components/ModalHeader/)
- Reusable header with close button and more options button
- Uses Icon_Close.svg asset
- Sticky positioning within modal
- Horizontal dots for more options button
ModalFooter Component (app/components/ModalFooter/)
- Reusable footer with back/next buttons and stepper
- Integrated with i18n for button text localization
- Supports custom footer content
- Button states (disabled, default variant for next button, outlined variant for back button)
- Centered stepper display
InputWithCounter Component (app/components/InputWithCounter/)
- Reusable input field with character counter
- Configurable max length
- Optional help icon with proper spacing and sizing
- Uses Icon_Help.svg with brand color
- Controlled component pattern

Modified Components

ContentLockup Component
- Added modal variant for modal header styling
- Supports title and description (uses description for secondary text in modal variant)
- Left-aligned layout for modal context
Stepper Component
- Updated StepperActive type from 1 | 2 | 3 | 4 | 5 to number to support any number of steps
- Maintains backward compatibility

Other Changes

Internationalization
- Added button translations to messages/en/common.json:
  - buttons.back: "Back"
  - buttons.next: "Next"
  - buttons.finish: "Finish"
Component Preview Page
- Added Create component showcase with multi-step example
- Demonstrates InputWithCounter integration
- Shows step navigation and button state management
ESLint Configuration
- Added rule override for .types.ts files to disable unused-vars rule
- Interface properties are used in implementation files, not in type definitions
Testing
- Comprehensive unit tests for Create component (15 tests)
- Tests cover accessibility, keyboard navigation, focus trapping, and user interactions
- All tests use renderWithProviders to support i18n context
Storybook
- Complete Storybook stories for Create component
- Demonstrates various configurations and use cases

Screenshots

How to Test

View in Component Preview Page
- Navigate to /components-preview
- Click "Open Create Dialog" button
- Test step navigation using back/next buttons
- Verify input character counter updates in real-time
- Verify "Next" button is disabled when input is empty
- Test ESC key to close modal
- Test clicking overlay to close modal
View in Storybook
- Run npm run storybook
- Navigate to "Components/Create" stories
- Test all story variations
- Verify accessibility with keyboard navigation
Run Tests
- Run ./scripts/test-local.sh to execute full test suite
- All component tests should pass (15 tests for Create component)
- Verify no linting errors
Accessibility Testing
- Test keyboard navigation (Tab, Shift+Tab, ESC)
- Verify focus is trapped within modal when open
- Verify focus is restored to previous element when closed
- Test with screen reader (ARIA labels and roles)
Responsive Testing
- Modal is fixed width (560px) and centered
- Verify scrollable content area when content exceeds max height
- Test on different screen sizes

Notes

The Create component uses portal rendering to ensure it appears above all other content
Body scroll is locked when modal is open to prevent background scrolling
Focus trap ensures keyboard users can't navigate outside the modal
The InputWithCounter component is designed to be reusable across different modals with varying character limits
Button text in ModalFooter is localized using the i18n system
The "Next" button uses variant="default" (white background) and is disabled until input has content
The "Back" button uses variant="outlined" (outline style)
All components follow the container/presentation pattern for consistency
ESLint configuration was updated to handle TypeScript interface properties in .types.ts files
The StepperActive type was generalized to support any number of steps, not just 1-5

Future Enhancements

Consider adding animation/transition effects for modal open/close
Add support for custom header actions beyond close and more options
Consider adding form validation integration for multi-step flows
Add support for custom footer layouts beyond the standard back/next/stepper pattern

# Implement Create Modal Component with Supporting Subcomponents (CR-45) ## Overview This PR implements the Create modal component and its supporting subcomponents based on the Figma design specifications. The Create component provides a reusable modal dialog for multi-step creation flows (e.g., creating community policies). It includes portal rendering, keyboard navigation, focus management, and accessibility features. The implementation follows the container/presentation pattern and includes reusable utility components (`ModalHeader`, `ModalFooter`, `InputWithCounter`) that can be used independently or with other modal-like components. ## Changes ### New Components - **Create Component** (`app/components/Create/`) - Full container/presentation pattern implementation - Portal rendering to document body - Keyboard navigation (ESC to close, Tab focus trap) - Body scroll lock when open - Focus management (traps focus within modal, restores on close) - ARIA attributes for accessibility - Supports multi-step flows with stepper integration - Configurable header, content, and footer sections - **ModalHeader Component** (`app/components/ModalHeader/`) - Reusable header with close button and more options button - Uses `Icon_Close.svg` asset - Sticky positioning within modal - Horizontal dots for more options button - **ModalFooter Component** (`app/components/ModalFooter/`) - Reusable footer with back/next buttons and stepper - Integrated with i18n for button text localization - Supports custom footer content - Button states (disabled, default variant for next button, outlined variant for back button) - Centered stepper display - **InputWithCounter Component** (`app/components/InputWithCounter/`) - Reusable input field with character counter - Configurable max length - Optional help icon with proper spacing and sizing - Uses `Icon_Help.svg` with brand color - Controlled component pattern ### Modified Components - **ContentLockup Component** - Added `modal` variant for modal header styling - Supports title and description (uses description for secondary text in modal variant) - Left-aligned layout for modal context - **Stepper Component** - Updated `StepperActive` type from `1 | 2 | 3 | 4 | 5` to `number` to support any number of steps - Maintains backward compatibility ### Other Changes - **Internationalization** - Added button translations to `messages/en/common.json`: - `buttons.back`: "Back" - `buttons.next`: "Next" - `buttons.finish`: "Finish" - **Component Preview Page** - Added Create component showcase with multi-step example - Demonstrates `InputWithCounter` integration - Shows step navigation and button state management - **ESLint Configuration** - Added rule override for `.types.ts` files to disable unused-vars rule - Interface properties are used in implementation files, not in type definitions - **Testing** - Comprehensive unit tests for Create component (15 tests) - Tests cover accessibility, keyboard navigation, focus trapping, and user interactions - All tests use `renderWithProviders` to support i18n context - **Storybook** - Complete Storybook stories for Create component - Demonstrates various configurations and use cases ## Screenshots <img width="571" alt="Screenshot 2026-02-02 at 1.12.35 PM.png" src="attachments/ca19f581-f995-4bdf-bd7e-b9d1dfbf4d38"> ## How to Test 1. **View in Component Preview Page** - Navigate to `/components-preview` - Click "Open Create Dialog" button - Test step navigation using back/next buttons - Verify input character counter updates in real-time - Verify "Next" button is disabled when input is empty - Test ESC key to close modal - Test clicking overlay to close modal 2. **View in Storybook** - Run `npm run storybook` - Navigate to "Components/Create" stories - Test all story variations - Verify accessibility with keyboard navigation 3. **Run Tests** - Run `./scripts/test-local.sh` to execute full test suite - All component tests should pass (15 tests for Create component) - Verify no linting errors 4. **Accessibility Testing** - Test keyboard navigation (Tab, Shift+Tab, ESC) - Verify focus is trapped within modal when open - Verify focus is restored to previous element when closed - Test with screen reader (ARIA labels and roles) 5. **Responsive Testing** - Modal is fixed width (560px) and centered - Verify scrollable content area when content exceeds max height - Test on different screen sizes ## Notes - The Create component uses portal rendering to ensure it appears above all other content - Body scroll is locked when modal is open to prevent background scrolling - Focus trap ensures keyboard users can't navigate outside the modal - The `InputWithCounter` component is designed to be reusable across different modals with varying character limits - Button text in `ModalFooter` is localized using the i18n system - The "Next" button uses `variant="default"` (white background) and is disabled until input has content - The "Back" button uses `variant="outlined"` (outline style) - All components follow the container/presentation pattern for consistency - ESLint configuration was updated to handle TypeScript interface properties in `.types.ts` files - The `StepperActive` type was generalized to support any number of steps, not just 1-5 ### Future Enhancements - Consider adding animation/transition effects for modal open/close - Add support for custom header actions beyond close and more options - Consider adding form validation integration for multi-step flows - Add support for custom footer layouts beyond the standard back/next/stepper pattern

Screenshot 2026-02-02 at 1.12.35 PM.png

77 KiB

an.di self-assigned this 2026-02-02 20:12:43 +00:00

an.di added 2 commits 2026-02-02 20:12:44 +00:00

Implement create component a8eb9e192b

Fixes on create component tests 3b8f2e791f

an.di merged commit 59d766cda2 into main

2026-02-02 20:27:22 +00:00

an.di deleted branch adilallo/component/ModalCreate

2026-02-02 20:27:22 +00:00

an.di referenced this issue from a commit

2026-02-02 20:27:23 +00:00