CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Align Prop Names #38

Merged
an.di merged 3 commits from adilallo/maintenance/AlignPropNames into main 2026-02-05 00:03:33 +00:00
Conversation 0 Commits 3 Files Changed 55
+1154 -118
an.di commented 2026-02-04 23:59:41 +00:00
Owner
Copy Link
Copy Source

Align Component Props with Figma Design Specifications

Overview

This PR aligns all component property names and values with Figma design specifications while maintaining full backward compatibility. Figma uses PascalCase for prop values (e.g., "Standard", "Inverse", "Default"), while the codebase uses lowercase. This change enables components to accept both formats and normalize internally, treating Figma as the source of truth.

Key Goals:

  • Ensure all components accept both PascalCase (Figma) and lowercase (codebase) prop values
  • Maintain 100% backward compatibility with existing code
  • Establish a consistent pattern for future component development
  • Add development rules to guide future work

Changes

Core Infrastructure

  • Created lib/propNormalization.ts - Centralized normalization utilities with 20+ functions:
    • normalizeMode() - Standard/Inverse modes
    • normalizeState() - Default/Hover/Focus/Selected states
    • normalizeInputState() - Default/Active/Hover/Focus for inputs
    • normalizeVariant() - Generic variant normalization
    • normalizeSize() - Generic size normalization
    • normalizeLabelVariant() - Label variants (default/horizontal)
    • normalizeSmallMediumLargeSize() - Small/medium/large sizes
    • Component-specific normalizers for Alert, Tooltip, MenuBar, ContentLockup, QuoteBlock, NumberCard, AskOrganizer, ContextMenuItem, ImagePlaceholder, ToggleGroup, and more

Components Updated (50+ components)

Form Components:

  • RadioButton, RadioGroup - mode, state props (added indicator prop from Figma)
  • Checkbox, CheckboxGroup - mode, state props
  • TextInput, TextArea - state, size, labelVariant props
  • SelectInput, SelectOption - state, size, labelVariant props
  • Toggle, ToggleGroup - state, position props
  • Switch - state props

Core UI Components:

  • Button - variant, size props
  • Alert - status, type props
  • Tooltip - position prop
  • Progress, Stepper - verified (no enum props needed)

Navigation & Layout:

  • MenuBar - size prop
  • MenuBarItem - variant, size props
  • NavigationItem - variant, size props
  • Header, HomeHeader - verified (complex internal types)

Content Components:

  • ContentLockup - variant, alignment props
  • ContentContainer - size prop
  • ContentThumbnailTemplate - variant prop
  • SectionHeader - variant prop

Card & Display Components:

  • NumberCard - size prop
  • QuoteBlock - variant prop
  • Logo - size prop (complex enum)

Feature Components:

  • AskOrganizer - variant prop

Context & Menu Components:

  • ContextMenuItem - size prop

Utility Components:

  • Avatar, AvatarContainer - size props
  • ImagePlaceholder - color prop

Development Rules

  • Created .cursorrules - Development guidelines for:
    • Component prop alignment with Figma
    • Tailwind-first styling approach
  • Added .cursorrules to .gitignore - Keeps local development rules out of repository

Type System Updates

  • All enum-like props now accept both PascalCase and lowercase in TypeScript types
  • Type definitions include union types: "small" | "medium" | "Small" | "Medium"
  • Internal normalization ensures consistent lowercase usage throughout codebase

How to Test

  1. Verify Backward Compatibility:
    // Existing lowercase usage should still work

# Align Component Props with Figma Design Specifications ## Overview This PR aligns all component property names and values with Figma design specifications while maintaining full backward compatibility. Figma uses PascalCase for prop values (e.g., "Standard", "Inverse", "Default"), while the codebase uses lowercase. This change enables components to accept both formats and normalize internally, treating Figma as the source of truth. **Key Goals:** - Ensure all components accept both PascalCase (Figma) and lowercase (codebase) prop values - Maintain 100% backward compatibility with existing code - Establish a consistent pattern for future component development - Add development rules to guide future work ## Changes ### Core Infrastructure - **Created `lib/propNormalization.ts`** - Centralized normalization utilities with 20+ functions: - `normalizeMode()` - Standard/Inverse modes - `normalizeState()` - Default/Hover/Focus/Selected states - `normalizeInputState()` - Default/Active/Hover/Focus for inputs - `normalizeVariant()` - Generic variant normalization - `normalizeSize()` - Generic size normalization - `normalizeLabelVariant()` - Label variants (default/horizontal) - `normalizeSmallMediumLargeSize()` - Small/medium/large sizes - Component-specific normalizers for Alert, Tooltip, MenuBar, ContentLockup, QuoteBlock, NumberCard, AskOrganizer, ContextMenuItem, ImagePlaceholder, ToggleGroup, and more ### Components Updated (50+ components) **Form Components:** - RadioButton, RadioGroup - mode, state props (added `indicator` prop from Figma) - Checkbox, CheckboxGroup - mode, state props - TextInput, TextArea - state, size, labelVariant props - SelectInput, SelectOption - state, size, labelVariant props - Toggle, ToggleGroup - state, position props - Switch - state props **Core UI Components:** - Button - variant, size props - Alert - status, type props - Tooltip - position prop - Progress, Stepper - verified (no enum props needed) **Navigation & Layout:** - MenuBar - size prop - MenuBarItem - variant, size props - NavigationItem - variant, size props - Header, HomeHeader - verified (complex internal types) **Content Components:** - ContentLockup - variant, alignment props - ContentContainer - size prop - ContentThumbnailTemplate - variant prop - SectionHeader - variant prop **Card & Display Components:** - NumberCard - size prop - QuoteBlock - variant prop - Logo - size prop (complex enum) **Feature Components:** - AskOrganizer - variant prop **Context & Menu Components:** - ContextMenuItem - size prop **Utility Components:** - Avatar, AvatarContainer - size props - ImagePlaceholder - color prop ### Development Rules - **Created `.cursorrules`** - Development guidelines for: - Component prop alignment with Figma - Tailwind-first styling approach - **Added `.cursorrules` to `.gitignore`** - Keeps local development rules out of repository ### Type System Updates - All enum-like props now accept both PascalCase and lowercase in TypeScript types - Type definitions include union types: `"small" | "medium" | "Small" | "Medium"` - Internal normalization ensures consistent lowercase usage throughout codebase ## How to Test 1. **Verify Backward Compatibility:** // Existing lowercase usage should still work <Button variant="filled" size="small" /> <Alert status="positive" type="toast" />
an.di self-assigned this 2026-02-04 23:59:41 +00:00
an.di added 2 commits 2026-02-04 23:59:42 +00:00
Align props with figma af7e2d3e51
Add rule about figma props 967fc11ae8
an.di added 1 commit 2026-02-05 00:03:16 +00:00
Resolve test errors b0b9699ced
an.di merged commit 3db151b40c into main 2026-02-05 00:03:33 +00:00
an.di deleted branch adilallo/maintenance/AlignPropNames 2026-02-05 00:03:33 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
an.di (Andy DiLallo) ntnsndr (Nathan Schneider)
No Assignees an.di
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CommunityRule/community-rule#38