docs(avatar): engineering guidelines #840
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR adds comprehensive engineering guidelines and documentation for the Avatar component, including test specifications and developer implementation documentation.
Key Changes
- Adds test specification file with structured test cases covering basic rendering, size variants, disabled state, and accessibility
- Adds developer documentation with usage examples, accessibility guidelines, common patterns, and testing guidance
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| packages/nimbus/src/components/avatar/avatar.docs.spec.tsx | New test specification file with comprehensive test coverage for Avatar component functionality, organized into four sections with @docs annotations |
| packages/nimbus/src/components/avatar/avatar.dev.mdx | New developer documentation file covering import, basic usage, size options, color palettes, image handling, disabled state, accessibility requirements, API reference, common patterns, and testing examples |
| ### Import | ||
|
|
||
| ```tsx | ||
| import { Avatar, type AvatarProps } from "@commercetools/nimbus"; |
There was a problem hiding this comment.
The import statement should use single quotes for consistency with other components in the codebase. Change the double quotes to single quotes.
| import { Avatar, type AvatarProps } from "@commercetools/nimbus"; | |
| import { Avatar, type AvatarProps } from '@commercetools/nimbus'; |
| ### Disabled state | ||
|
|
||
| The `isDisabled` prop visually indicates that the avatar is in a disabled state: | ||
|
|
||
| ```jsx-live-dev | ||
| const App = () => ( | ||
| <Stack direction="row" gap="400" alignItems="center"> | ||
| <Avatar firstName="John" lastName="Doe" isDisabled /> | ||
| <Avatar | ||
| firstName="Jane" | ||
| lastName="Smith" | ||
| src="https://i.pravatar.cc/150?img=1" | ||
| isDisabled | ||
| /> | ||
| </Stack> | ||
| ) | ||
| ``` |
There was a problem hiding this comment.
I see that we do have disabled styling for this component, but i am not seeing the visual changes applied. wont hold the pr up for this, but we can throw up a ticket to investigate?
There was a problem hiding this comment.
Yeah, I agree. I'll make a ticket
Summary
IYKYK