Skip to content

fix: Restore previous Avatar implementation as DeprecatedAvatar#1058

Open
pawelgrimm wants to merge 4 commits into
mainfrom
pawel/add-deprecated-avatar
Open

fix: Restore previous Avatar implementation as DeprecatedAvatar#1058
pawelgrimm wants to merge 4 commits into
mainfrom
pawel/add-deprecated-avatar

Conversation

@pawelgrimm
Copy link
Copy Markdown
Contributor

@pawelgrimm pawelgrimm commented Jun 4, 2026

Short description

Restores the previous Avatar implementation as DeprecatedAvatar while keeping the revamped Avatar export in place.

The deprecated component keeps legacy props such as user, avatarUrl, colorList, and responsive string sizes with scoped CSS module styles, and now lives in src/deprecated-avatar.

Restores the legacy Avatar stories under Deprecated Components/Avatar and moves the deprecated Input story into the same section.

PR Checklist

  • Added tests for bugs / new features
  • Updated docs (storybooks, readme)
  • Reviewed and approved Chromatic visual regression tests in CI

@pawelgrimm pawelgrimm changed the title Add DeprecatedAvatar export fix: Restore previous Avatar implementation as DeprecatedAvatar Jun 4, 2026
@pawelgrimm pawelgrimm self-assigned this Jun 4, 2026
@pawelgrimm pawelgrimm added the 👀 Show PR Used for PRs that need a review, but can be merged when CI is green. label Jun 4, 2026
pawelgrimm and others added 4 commits June 4, 2026 14:02
…sts + snapshot

- un-inline utils into utils.ts; restore utils.test.ts (9 cases)
- restore full component tests + snapshot from src/avatar@65811a36
- revert churn so every file is pure rename of original
- keep @deprecated JSDoc, displayName, type exports

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@pawelgrimm pawelgrimm force-pushed the pawel/add-deprecated-avatar branch from 84c1f94 to 69f517e Compare June 4, 2026 19:02
@pawelgrimm pawelgrimm marked this pull request as ready for review June 4, 2026 19:03
Copy link
Copy Markdown
Member

@doistbot doistbot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks Paweł for safely restoring the legacy Avatar component to ease the migration path 😄 🙌.

Few things worth tightening:

  • API conventions: Wrap the component in React.forwardRef and extend standard HTML div props (omitting style) so consumers can attach refs and standard attributes.
  • Accessibility: Provide semantic markup for the image by either using an actual <img> tag or adding role="img" with a derived aria-label.
  • Performance: Swap the root Box component for a plain div to avoid unnecessary responsive resolution overhead.
  • Test coverage: Add a test exercising the restored colorList prop to ensure the legacy behavior is fully protected.

I also included a few optional follow-up notes in the details below.

Optional follow-up notes (4)
  • [P3] src/deprecated-avatar/deprecated-avatar.test.tsx:7: The test suite is missing an accessibility test (jest-axe). Project guidelines mandate that every component should have an a11y test, even if this is a restored deprecated component.
  • [P3] src/deprecated-avatar/deprecated-avatar.stories.tsx:103: Spreading ...args directly passes the story's userName and email keys as props to DeprecatedAvatar, which spreads them onto Box and ultimately the DOM div. This will trigger a React "does not recognize prop on a DOM element" warning in the console. Consider destructuring these properties out before spreading the rest of the arguments.
  • [P3] src/deprecated-avatar/deprecated-avatar.tsx:67: colorList is currently typed as any string[], so colorList={[]} is a valid call. In that case emailToIndex(user.email, colorList.length) becomes ... % 0, which returns NaN and leaves backgroundColor unset, so the avatar can render white initials on no background. Guard the empty-array case here, or fall back to AVATAR_COLORS when colorList.length === 0.
  • [P3] src/deprecated-avatar/deprecated-avatar.test.tsx:13: toMatchSnapshot() is locking the entire rendered node here, including Box's class composition, for a behavior that's really just “uses avatarUrl”. A focused assertion on backgroundImage/textIndent would cover the contract with less churn when unrelated markup or class details change.

Share FeedbackReview Logs

Comment thread src/deprecated-avatar/deprecated-avatar.tsx
Comment thread src/deprecated-avatar/deprecated-avatar.tsx

import { DeprecatedAvatar } from './deprecated-avatar'

describe('DeprecatedAvatar', () => {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 P2 This suite never exercises the restored colorList prop, even though preserving that legacy API is one of the goals of this PR. Please add a case that passes a custom list and asserts the resulting backgroundColor, otherwise a regression here will slip through while the initials-only tests still pass.

Comment thread src/deprecated-avatar/deprecated-avatar.tsx
@pawelgrimm pawelgrimm mentioned this pull request Jun 4, 2026
3 tasks
@pawelgrimm
Copy link
Copy Markdown
Contributor Author

Doistbot made some good points, but we're not reworking the avatar here, we're just bringing back the previous implementation under the "Deprecated" namespace.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

👀 Show PR Used for PRs that need a review, but can be merged when CI is green.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants