Conversation
🦋 Changeset detectedLatest commit: 887b9a8 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for scouterna-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
Adds a new scout-avatar Stencil component to the design system and wires it into Storybook for documentation/demo, including a fallback image asset.
Changes:
- Introduces
scout-avatarcomponent implementation (TSX) and styling (CSS). - Adds a Storybook story for the React wrapper (
ScoutAvatar). - Updates Storybook static asset configuration to serve component assets.
Reviewed changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/ui-webc/src/components/avatar/avatar.tsx | Implements the Avatar component with props and fallback-image logic. |
| packages/ui-webc/src/components/avatar/avatar.css | Adds base layout and circular styling for the avatar image. |
| packages/ui-webc/src/components/avatar/readme.md | Adds generated component documentation for Avatar. |
| packages/storybook/src/stories/avatar.stories.tsx | Adds Storybook story to render and preview the Avatar component. |
| packages/storybook/.storybook/main.ts | Extends staticDirs so Storybook can serve built UI-webc assets. |
| getAssetPath, | ||
| h, | ||
| Prop, |
There was a problem hiding this comment.
Minor grammar: “scales to fit container” reads like it’s missing an article. Since this JSDoc is used for generated docs, please fix the wording here (and regenerate) rather than editing the generated readme directly.
| display: flex; | ||
| aspect-ratio: 1 / 1; | ||
| } | ||
| img { |
There was a problem hiding this comment.
The component claims it “scales to fit container”, but the <img> isn’t styled to fill the host. Without width/height: 100% (and usually object-fit: cover), the image will render at its intrinsic size and may not scale/crop correctly inside the container.
| img { | |
| img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; |
I hope the assets work now :D