Add displayName to components and sub-components #676
Description
Summary
Several components and their sub-components are missing displayName, making them harder to identify in React DevTools and error messages.
Note: Once the forwardRef removal in #649 is complete, named function declarations will auto-infer displayName in React 19. This issue covers the components that will still need explicit displayName (e.g., compound components created via
Object.assign, arrow function components).
Affected Components
| Component | Issue | Details |
|---|---|---|
| Table (#642) | item 1 | None of 7 sub-components (TableRoot, TableHeader, TableBody, TableRow, TableHead, TableCell, SectionHeader) have displayName |
| Skeleton (#638) | item 5 | Missing displayName |
| SidePanel (#636) | item 6 | Missing on all sub-components |
| Select (#633) | item 4 | Missing on SelectMultipleValue |
| Label (#624) | item 2 | Missing displayName |
| Grid (#618) | item 3 | Missing displayName |
| Flex (#617) | item 1 | Missing displayName |
Pattern
// For named function components (auto-inferred in React 19)
function Button({ ...props }: ButtonProps) { ... }
// displayName = "Button" ✓
// For compound components via Object.assign (still needs explicit)
const Table = Object.assign(TableRoot, {
Header: TableHeader,
Body: TableBody,
});
TableRoot.displayName = 'Table';
TableHeader.displayName = 'Table.Header';
TableBody.displayName = 'Table.Body';Acceptance Criteria
- All compound sub-components have explicit
displayName - displayName follows dot notation for sub-components (e.g.,
Table.Header) - Verify in React DevTools that all components show readable names