Pattern: How should we make the modern tab design reusable across the...

Documentation for Sessions

🎨 Pattern: How should we make the modern tab design reusable across the...

Date: 2026-02-17
Time: 18:44:41 UTC
Session: gspace1-111.2
Agent: angular
Confidence: 99%
Status: ✅ Documented

📋 Decision Context

Question:

How should we make the modern tab design reusable across the codebase following DRY principles?

Task: Make modern tab design reusable via ux-tabs component extension

🎯 Decision Made

Chosen:

Added 'floating' variant to ux-tabs component with three-level hierarchy support

Options Considered:

  1. Keep custom tab implementations in each component
  2. Create new standalone tab component
  3. Extend existing ux-tabs component with new variant
  4. Use CSS-only solution without component changes

💭 Reasoning

Extended the existing ux-tabs component with a 'floating' variant and 'level' property to fully embrace DRY (Don't Repeat Yourself) principles. This approach provides maximum code reuse while maintaining all the benefits of our modern design system. Key advantages: (1) Single source of truth - all tab styling is centralized in one well-tested component, (2) Future-proof - any improvements to the floating design automatically propagate to all usage sites, (3) Consistency - impossible for implementations to drift since they all use the same component, (4) Zero custom SCSS needed - users just specify variant='floating' and level={1|2|3}, (5) Full feature set - includes animations, keyboard navigation, route integration, lazy loading, and accessibility out of the box, (6) Easy migration - existing components can replace 50+ lines of custom SCSS with a 3-line component usage, (7) Hierarchy enforcement - the 'level' prop ensures proper typography scaling automatically, (8) Theme integration - uses CSS custom properties so it adapts to theme changes, (9) Test coverage - component is thoroughly tested unlike ad-hoc implementations. This eliminates ~200+ lines of duplicated SCSS across Vitto components and provides a production-ready, accessible, and maintainable solution that scales with the application.

📁 Files Involved

🔗 Related

Auto-generated by MCP Smart Consolidation