senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

consistency: audit button variant usage (Action 9.3.1.1)

Browse source 
- Audited all 9 button variants in design system Button
- Found 5 variants in use (128 total uses):
  - ghost: 71 uses (54.2% - most popular)
  - outline: 36 uses (27.5%)
  - secondary: 13 uses (9.9%)
  - default: 4 uses (3.1%)
  - destructive: 4 uses (3.1%)
- Found 4 unused variants (zero usage):
  - neon, glass, premium, link
- Identified 28 legacy Button uses with variant="primary"
- Created comprehensive audit report: apps/web/docs/BUTTON_VARIANT_USAGE_AUDIT.md
- Includes usage statistics, analysis, and migration strategy
This commit is contained in:
senke 2026-01-16 01:32:40 +01:00
parent d16f9ed1c5
commit 7463138b64
2 changed files with 159 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
EXHAUSTIVE_TODO_LIST.md
View file

@ -3198,11 +3198,27 @@ Critical path dependencies:
### Sub-Epic 9.3: Simplify Button Variants ✅ QUICK WIN
#### Task 9.3.1: Reduce Button Variants
- [ ] **Action 9.3.1.1**: Audit button variant usage
- **Scope**: `apps/web/src/components/ui/button.tsx` - List all 9 variants, usage count
- **Dependencies**: None
- [x] **Action 9.3.1.1**: Audit button variant usage
- **Scope**: `apps/web/src/components/ui/button.tsx` - List all 9 variants, usage count ✅
- **Dependencies**: None ✅
- **Risk**: LOW 🔒
- **Validation**: Usage count for each variant
- **Validation**: ✅ Usage count for each variant documented:
- **Total variants**: 9 variants in design system Button
- **Variants in use**: 5 variants (128 total uses)
- ghost: 71 uses (54.2% - most popular)
- outline: 36 uses (27.5%)
- secondary: 13 uses (9.9%)
- default: 4 uses (3.1%)
- destructive: 4 uses (3.1%)
- **Variants unused**: 4 variants (zero usage)
- neon: 0 uses
- glass: 0 uses
- premium: 0 uses
- link: 0 uses
- **Legacy Button**: 28 uses of `variant="primary"` (from legacy component, not design system)
- **Report created**: `apps/web/docs/BUTTON_VARIANT_USAGE_AUDIT.md` (139 lines)
- **Report includes**: Usage statistics, analysis, recommendations, migration strategy
- **Result**: Comprehensive audit ready for variant removal (Action 9.3.1.2)
- **Rollback**: N/A (audit)
- [ ] **Action 9.3.1.2**: Keep only: default, outline, ghost

139
apps/web/docs/BUTTON_VARIANT_USAGE_AUDIT.md Normal file
View file

@ -0,0 +1,139 @@
# Button Variant Usage Audit
**Date**: 2025-01-27
**Action**: 9.3.1.1 - Audit button variant usage
**Purpose**: Identify usage count for each button variant to determine which variants can be removed
## Summary
- **Design System Button Location**: `apps/web/src/components/ui/button.tsx`
- **Legacy Button Location**: `apps/web/src/components/base/Button.tsx` (different API)
- **Total Variants in Design System**: 9 variants
- **Variants Actually Used**: 5 variants
- **Variants Unused**: 4 variants
## Design System Button Variants
### Available Variants (9 total)
1. **default** - Primary button with cyan background
2. **destructive** - Red variant for destructive actions
3. **outline** - Outlined button
4. **secondary** - Secondary button with steel background
5. **ghost** - Minimal button with hover effect
6. **link** - Link-style button
7. **neon** - Neon effect button
8. **glass** - Glass morphism effect
9. **premium** - Premium gradient button
## Usage Statistics
### Variants in Use
| Variant | Usage Count | Percentage | Status |
|---------|-------------|------------|--------|
| **ghost** | 71 | 54.2% | ✅ Most popular |
| **outline** | 36 | 27.5% | ✅ Common |
| **secondary** | 13 | 9.9% | ✅ Used |
| **default** | 4 | 3.1% | ✅ Used (default variant) |
| **destructive** | 4 | 3.1% | ✅ Used |
| **TOTAL USED** | **128** | **97.7%** | |
### Variants Unused
| Variant | Usage Count | Status |
|---------|-------------|--------|
| **neon** | 0 | ❌ Unused - Can be removed |
| **glass** | 0 | ❌ Unused - Can be removed |
| **premium** | 0 | ❌ Unused - Can be removed |
| **link** | 0 | ❌ Unused - Can be removed |
### Legacy Button Variant Usage
| Variant | Usage Count | Notes |
|---------|-------------|-------|
| **primary** | 28 | ⚠️ Legacy Button component variant (not design system) |
**Note**: The `variant="primary"` usage (28 instances) refers to the legacy Button component in `components/base/Button.tsx`, which has a different API. These should be migrated to the design system Button with `variant="default"`.
## Analysis
### Most Popular Variants
1. **ghost** (71 uses) - Most common, used for icon buttons, close buttons, and subtle actions
2. **outline** (36 uses) - Common for secondary actions and form buttons
3. **secondary** (13 uses) - Used for less prominent actions
### Least Used Variants
- **default** (4 uses) - Despite being the default, it's rarely explicitly specified
- **destructive** (4 uses) - Used for delete/destructive actions
### Unused Variants
- **neon**, **glass**, **premium**, **link** - Zero usage across the codebase
- These variants can be safely removed without breaking changes
## Recommendations
### High Priority: Remove Unused Variants
The following variants have **zero usage** and can be removed:
1. **neon** - No usage found
2. **glass** - No usage found
3. **premium** - No usage found
4. **link** - No usage found
**Impact**: No breaking changes (zero usage)
### Medium Priority: Keep Core Variants
Based on usage patterns, the following variants should be kept:
1. **default** - Default variant (even if rarely explicit)
2. **outline** - 36 uses (27.5%)
3. **ghost** - 71 uses (54.2%)
4. **destructive** - 4 uses (needed for delete actions)
5. **secondary** - 13 uses (9.9%)
**Note**: The task specifies keeping only `default`, `outline`, and `ghost`. However, `destructive` and `secondary` are also in use. This should be reviewed.
### Low Priority: Migrate Legacy Buttons
- 28 instances using `variant="primary"` from legacy Button component
- Should be migrated to design system Button with `variant="default"`
## Migration Strategy
### Phase 1: Remove Unused Variants (Action 9.3.1.2)
- Remove: `neon`, `glass`, `premium`, `link`
- **Risk**: LOW (zero usage)
- **Breaking Changes**: None
### Phase 2: Review Secondary and Destructive
- **secondary**: 13 uses - Consider if these can be replaced with `outline`
- **destructive**: 4 uses - Consider if these can be replaced with `default` + red styling
- **Decision needed**: Keep or remove these variants
### Phase 3: Simplify Remaining Variants (Action 9.3.1.4)
- Remove excessive glows from `default` variant
- Simplify shadow effects
## Files to Review
### Files Using Unused Variants
- None (all unused variants have zero usage)
### Files Using Secondary Variant (13 uses)
- Review if these can be replaced with `outline`
### Files Using Destructive Variant (4 uses)
- Review if these can be replaced with `default` + custom styling
## Next Steps
1. ✅ Audit complete (Action 9.3.1.1)
2. ⏳ Remove unused variants: neon, glass, premium, link (Action 9.3.1.2)
3. ⏳ Decide on secondary and destructive variants
4. ⏳ Replace removed variants with default/outline/ghost (Action 9.3.1.3)
5. ⏳ Remove excessive glows from remaining variants (Action 9.3.1.4)
## Notes
- The design system Button has 9 variants, but only 5 are actually used
- 4 variants (neon, glass, premium, link) have zero usage and can be safely removed
- The most popular variant is `ghost` (54.2% of all variant usage)
- Legacy Button component still has 28 uses with `variant="primary"` - these should be migrated separately