Add user management components for model and participant selection#4
Merged
robdimarco-atxp merged 9 commits intomainfrom Jan 23, 2026
Merged
Conversation
Implements four new components based on Figma designs: 1. Tooltip - Hover tooltips for UI elements - Simple popover with text - Uses popover theme tokens - Proper ARIA role for accessibility 2. DropdownMenu - Standalone dropdown menus - Menu items with icons and avatars - Secondary icons (check, plus, chevron) - Separator and label support - Search input integration - Hover and active states 3. AvatarGroup - Overlapping user avatars - Negative margin overlap design - Border separation for clarity - Presence indicator support - Size variants (sm, default, lg) - Spacing variants (tight, default, loose) 4. ModelUserManagement - Complete compound component - Model selector button - Add user button - Avatar display (single or group) - User dropdown trigger - Integrates all sub-components Features: - TypeScript with proper prop types - class-variance-authority for variants - Comprehensive Storybook stories - Exported from src/index.ts - Vanilla HTML/CSS examples in vanilla/components/user-management.html - Updated vanilla/index.html with new component links Based on Figma: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=5077-6876
- Add tailwind-merge to cn utility to properly handle conflicting Tailwind classes - Fix avatar text size in dropdown menus: text-xs (12px) → text-[10px] for 16px avatars - Fix vertical alignment in ModelUserManagement by setting explicit height on UserAvatars - Convert empty interfaces to type aliases to fix TypeScript lint errors This ensures: - Small avatars (16px) in dropdowns render at correct size and don't inherit 40px default - All components in ModelUserManagement are properly vertically centered - Text in small avatars is proportional (10px text in 16px avatars) - Code passes TypeScript linting without empty interface warnings
This dependency is required for the cn utility function to properly merge conflicting Tailwind classes. Without it, component size overrides don't work correctly (e.g., h-4 w-4 on Avatar doesn't override h-10 w-10). The previous pnpm add command updated node_modules but didn't save to package.json properly.
The bg-background container was invisible on light backgrounds. Added border-input to match Figma design and provide visual separation. Also updated vanilla HTML examples to include the border.
…per alignment - ModelSelector: h-8 → h-[32px] - AddUserButton: h-[25px] w-[25px] → h-[32px] w-[32px] - UserAvatars: h-[29px] → h-[32px], p-0.5 pr-1 → px-1 - UserDropdownTrigger: h-[25px] w-[25px] → h-[32px] w-[32px] This ensures all elements in the component align vertically at the same baseline.
- Restructured UserAvatars to detect and separate UserDropdownTrigger from avatar children - UserDropdownTrigger now rendered inside the white rounded container with avatars - Updated UserDropdownTrigger size from 32px to 25px to match Figma design - Changed padding: px-1 → p-0.5 with pr-1 on inner avatar wrapper - Updated all stories to nest UserDropdownTrigger inside UserAvatars This fixes the 'black circle behind avatars' issue - the chevron is now properly integrated into the user management UI.
- Created isDropdownTrigger type guard function that properly checks for displayName - Checks: isValidElement, not string type, has displayName property, equals 'UserDropdownTrigger' - Eliminates @typescript-eslint/no-explicit-any errors
- Changed wrapper div to use h-[inherit] w-[inherit] - Changed Avatar to use h-full w-full instead of default h-10 w-10 - This allows AvatarGroup's size variants to properly control avatar dimensions - Fixes issue where avatars rendered at 40px instead of 25px in ModelUserManagement
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements four new components based on Figma designs for user management functionality:
New Components
1. Tooltip (
src/components/Tooltip/)bg-popoverandborder-bordertheme tokensrole="tooltip"for accessibility2. DropdownMenu (
src/components/DropdownMenu/)DropdownMenu- Container with border and shadowDropdownMenuItem- Menu items with icons, avatars, and secondary actionsDropdownMenuLabel- Section headersDropdownMenuSeparator- Visual dividers3. AvatarGroup (
src/components/AvatarGroup/)-ml-1spacingsm,default,lgtight,default,loose4. ModelUserManagement (
src/components/ModelUserManagement/)ModelUserManagement- Container with flex layoutModelSelector- Secondary button for model selectionUserManagementGroup- Groups user controlsAddUserButton- Circular button with plus iconUserAvatars- WrapsAvatarGroupwith backgroundUserDropdownTrigger- Circular button with chevronImplementation Details
✅ TypeScript - Proper prop types with
forwardRef✅ Variants - Uses
class-variance-authorityfor size/spacing options✅ Storybook - Comprehensive stories showing all variants and use cases
✅ Exports - Added to
src/index.ts✅ Type checks - All TypeScript checks pass
✅ Build - Project builds successfully
✅ Vanilla HTML/CSS - Created
vanilla/components/user-management.htmlwith examples✅ Documentation - Updated
vanilla/index.htmlwith new component linksDesign System Consistency
--theme-secondary,--theme-muted,--theme-popover)Figma Reference
Based on: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=5077-6876
Test Plan
Screenshots
Reviewers can view all variations in Storybook:
pnpm storybookNote: This PR adds foundational components for user management. Interactive behavior (dropdown positioning, tooltip triggers) will be enhanced in future PRs as needed.