239 lines
6.9 KiB
Markdown
239 lines
6.9 KiB
Markdown
# Design Review: Dashboard Redesign
|
|
|
|
**Date**: 2025-10-21
|
|
**Figma**: [Dashboard Mockup](https://figma.com/file/example123)
|
|
**Reviewer**: Navigator Product Design Skill
|
|
|
|
---
|
|
|
|
## Summary
|
|
|
|
Dashboard redesign introduces new metric visualization components and updates color system for better data hierarchy.
|
|
|
|
**Changes Overview**:
|
|
- Design Tokens: 12 new, 5 modified
|
|
- Components: 3 new, 1 to extend
|
|
- Breaking Changes: 1 (MetricCard props)
|
|
|
|
---
|
|
|
|
## New Design Tokens
|
|
|
|
### Colors
|
|
- **color.status.warning.500**: `#F59E0B` (color)
|
|
_Warning state for metrics below threshold_
|
|
- **color.status.error.600**: `#DC2626` (color)
|
|
_Error state for critical metrics_
|
|
- **color.status.success.500**: `#10B981` (color)
|
|
_Success state for metrics above target_
|
|
- **color.neutral.50**: `#F9FAFB` (color)
|
|
_Card background for dashboard widgets_
|
|
|
|
### Spacing
|
|
- **spacing.section.gap**: `48px` (dimension)
|
|
_Gap between dashboard sections_
|
|
- **spacing.widget.padding**: `24px` (dimension)
|
|
_Internal padding for metric widgets_
|
|
- **spacing.metric.gap**: `12px` (dimension)
|
|
_Gap between metric label and value_
|
|
|
|
### Typography
|
|
- **typography.heading.xl**: `36px/600/42px` (typography)
|
|
_Large dashboard headings_
|
|
- **typography.metric.value**: `48px/700/52px` (typography)
|
|
_Metric display values_
|
|
- **typography.metric.label**: `14px/500/20px` (typography)
|
|
_Metric labels_
|
|
|
|
### Other Tokens
|
|
- **radius.widget**: `12px` (dimension)
|
|
_Border radius for dashboard widgets_
|
|
- **shadow.widget**: `0 1px 3px rgba(0,0,0,0.1)` (shadow)
|
|
_Subtle shadow for elevated widgets_
|
|
|
|
---
|
|
|
|
## Modified Design Tokens
|
|
|
|
### color.primary.600
|
|
- **Old Value**: `#1D4ED8`
|
|
- **New Value**: `#2563EB`
|
|
- **Impact**: Affects primary buttons and links throughout dashboard
|
|
|
|
### spacing.md
|
|
- **Old Value**: `16px`
|
|
- **New Value**: `20px`
|
|
- **Impact**: Increases default spacing in grid layouts
|
|
|
|
### typography.body.medium
|
|
- **Old Value**: `16px/400/24px`
|
|
- **New Value**: `16px/500/24px`
|
|
- **Impact**: Slightly bolder body text for better readability
|
|
|
|
---
|
|
|
|
## New Components Required
|
|
|
|
### Atoms (Basic Elements)
|
|
|
|
#### StatBadge
|
|
|
|
**Purpose**: Small metric indicator with icon and optional pulse animation
|
|
**Variants**: success, warning, error, info
|
|
**States**: default, pulse (animated)
|
|
**Similar to**: Badge (78% match)
|
|
|
|
**Recommendation**: Extend existing Badge component with `variant="stat"` prop instead of creating new component. Add icon prop and pulse animation state.
|
|
|
|
### Molecules (Simple Combinations)
|
|
|
|
#### TrendIndicator
|
|
|
|
**Purpose**: Show metric trend with arrow and percentage change
|
|
**Composition**: Icon (arrow up/down) + Text (percentage) + StatBadge
|
|
**Variants**: up (green), down (red), neutral (gray)
|
|
**Similar to**: None (0% match)
|
|
|
|
**Recommendation**: Create new molecule component. Reuse StatBadge internally.
|
|
|
|
### Organisms (Complex Components)
|
|
|
|
#### DashboardGrid
|
|
|
|
**Purpose**: Responsive grid layout for dashboard widgets
|
|
**Composition**: Grid container + flexible widget slots
|
|
**Responsive**: 1 col (mobile), 2 col (tablet), 3 col (desktop)
|
|
**Similar to**: None (0% match)
|
|
|
|
**Recommendation**: Create new organism component with responsive grid behavior. Use CSS Grid for layout.
|
|
|
|
---
|
|
|
|
## Component Reuse Opportunities
|
|
|
|
### StatBadge → Extend Badge
|
|
|
|
**Similarity**: 78%
|
|
**Recommendation**: Extend existing Badge component with new variant instead of creating duplicate component
|
|
**Time Saved**: 2-3 hours
|
|
|
|
**Approach**: Add `variant="stat"` option to Badge props. Add `icon` prop for optional icon display. Add `pulse` boolean prop for animation state. Maintains existing Badge API while adding new functionality.
|
|
|
|
### MetricCard → Enhance Existing
|
|
|
|
**Similarity**: 85%
|
|
**Recommendation**: Add trend and comparison props to existing MetricCard component
|
|
**Time Saved**: 2 hours
|
|
|
|
**Approach**: Add `trend` prop (up/down/neutral). Add `comparisonPeriod` prop (string). Both optional initially for backward compatibility. Mark as required in v3.0.0.
|
|
|
|
---
|
|
|
|
## Design System Impact
|
|
|
|
### Token Health
|
|
|
|
- **In Sync**: 87 tokens
|
|
- **Drift Detected**: 5 tokens
|
|
- **Missing in Code**: 12 tokens
|
|
- **Unused in Design**: 3 tokens
|
|
|
|
**Sync Status**: Drift Detected
|
|
**Priority Level**: High
|
|
|
|
### High Impact Changes
|
|
|
|
- **Color primary.600 modification**
|
|
- **Impact**: Breaking change for custom theme consumers
|
|
- **Action Required**: Update documentation, notify users in changelog
|
|
|
|
- **Spacing.md increase** (16px → 20px)
|
|
- **Impact**: Layout shifts in existing grid components
|
|
- **Action Required**: Visual regression testing on all layouts
|
|
|
|
### Low Impact Changes
|
|
|
|
- Typography weight increase (400 → 500) - minimal visual change
|
|
- New status colors - additive only, no conflicts
|
|
- New widget tokens - isolated to dashboard feature
|
|
|
|
---
|
|
|
|
## Implementation Recommendations
|
|
|
|
### Phased Approach
|
|
|
|
**Phase 1: Design Tokens** (2 hours)
|
|
- Priority: High
|
|
- Add 12 new tokens to design-tokens.json
|
|
- Update 5 existing tokens
|
|
- Run Style Dictionary build
|
|
- Update Tailwind @theme
|
|
|
|
**Phase 2: Atomic Components** (3 hours)
|
|
- Priority: High
|
|
- Extend Badge component with stat variant (2h)
|
|
- Add pulse animation to Badge (1h)
|
|
|
|
**Phase 3: Molecule Components** (2 hours)
|
|
- Priority: Medium
|
|
- Create TrendIndicator component (2h)
|
|
|
|
**Phase 4: Organism Components** (5 hours)
|
|
- Priority: Medium
|
|
- Create DashboardGrid component (3h)
|
|
- Enhance MetricCard with trend props (2h)
|
|
|
|
### Total Estimated Time
|
|
|
|
**12 hours** (Medium complexity)
|
|
|
|
---
|
|
|
|
## Breaking Changes
|
|
|
|
### MetricCard
|
|
|
|
**Issue**: Adding required `trend` and `comparisonPeriod` props breaks existing usage
|
|
**Previous Mapping**: `src/components/molecules/MetricCard.tsx` (8 existing usages)
|
|
**Recommendation**: Add props as optional first, then require in major version
|
|
|
|
**Migration Steps**:
|
|
- Add props as optional in v2.4.0
|
|
- Add deprecation warning when props not provided
|
|
- Update all 8 existing usages in codebase
|
|
- Document migration in CHANGELOG.md
|
|
- Make props required in v3.0.0 (breaking change)
|
|
- Provide codemod script for automated migration
|
|
|
|
---
|
|
|
|
## Next Steps
|
|
|
|
1. **Review Implementation Plan**: `.agent/tasks/TASK-16-dashboard-redesign.md`
|
|
2. **Update Design Tokens**: Phase 1 implementation
|
|
3. **Implement Components**: Follow atomic design hierarchy
|
|
4. **Test & Verify**: Visual regression, accessibility, unit tests
|
|
5. **Update UI Kit Inventory**: After each component completion
|
|
|
|
---
|
|
|
|
## Design Fidelity Checklist
|
|
|
|
- [ ] All 12 new design tokens extracted and added to design system
|
|
- [ ] StatBadge extends Badge component correctly
|
|
- [ ] TrendIndicator composition matches Figma
|
|
- [ ] DashboardGrid responsive behavior (1/2/3 cols)
|
|
- [ ] MetricCard shows trend indicator
|
|
- [ ] Spacing matches Figma exactly (48px section gap, 24px widget padding)
|
|
- [ ] Typography scales applied (XL heading 36px, metric value 48px)
|
|
- [ ] Status colors used correctly (success/warning/error)
|
|
- [ ] Widget shadows and radius applied
|
|
- [ ] Interactive states (hover, active) match design
|
|
|
|
---
|
|
|
|
**Generated**: 2025-10-21 17:30:00
|
|
**Navigator Version**: 3.2.0
|
|
**Next Review**: After Phase 4 completion
|