Skip to content

refactor(components): [avatar] use type-based definitions#23457

Merged
btea merged 3 commits into
element-plus:devfrom
E66Crisp:refactor-avatar
Jan 19, 2026
Merged

refactor(components): [avatar] use type-based definitions#23457
btea merged 3 commits into
element-plus:devfrom
E66Crisp:refactor-avatar

Conversation

@E66Crisp
Copy link
Copy Markdown
Contributor

@E66Crisp E66Crisp commented Jan 19, 2026

Please make sure these boxes are checked before submitting your PR, thank you!

  • Make sure you follow contributing guide English | (中文 | Español | Français).
  • Make sure you are merging your commits to dev branch.
  • Add some descriptions and refer to relative issues for your PR.

ref #23399

Summary by CodeRabbit

  • Refactor
    • Improved Avatar prop definitions and validations for size and shape, limiting accepted size values and enforcing shape options.
  • Bug Fixes
    • Avatar now applies explicit default image source and fit, ensuring consistent rendering.
  • Chores
    • Introduced a clearer public Avatar props interface and marked legacy prop typings as deprecated for future removal.

✏️ Tip: You can customize this high-level summary in your review settings.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jan 19, 2026

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jan 19, 2026

📝 Walkthrough

Walkthrough

This PR converts Avatar props to an explicit TypeScript surface: adds a public AvatarProps interface, replaces runtime prop objects with type-based defineProps/withDefaults in the component, and replaces avatar-group's dependency on avatarProps with explicit, validated prop descriptors for size and shape.

Changes

Cohort / File(s) Summary
Avatar core type & props
packages/components/avatar/src/avatar.ts
Add public AvatarProps interface and deprecate the old ExtractPropTypes alias; add AvatarPropsPublic via ExtractPublicPropTypes; adjust imports and deprecation comments.
Avatar group prop descriptors
packages/components/avatar/src/avatar-group-props.ts
Replace buildProps/avatarProps usage with a plain exported avatarGroupProps object; define size and shape explicitly (typed with AvatarProps, restricted values, isNumber validator); add componentSizes and isNumber imports.
Avatar component props usage
packages/components/avatar/src/avatar.vue
Switch from defineProps(avatarProps) to withDefaults(defineProps<AvatarProps>(), { src: '', fit: 'cover' }); remove runtime avatarProps import and import AvatarProps as a type.

Sequence Diagram(s)

(Skipped — change is a props/type refactor without new multi-component control flow.)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested reviewers

  • btea
  • keeplearning66

Poem

🐰 I hopped through props with ears held high,
Typed every field and waved old types goodbye.
Defaults snugged in, validators clear,
Avatars align—hop, cheer, and a beer! 🥕

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main refactoring: converting avatar components from buildProps-based to type-based prop definitions.
Description check ✅ Passed The description includes the standard pre-submit checklist with all items marked complete, confirms targeting the dev branch, and references issue #23399, but lacks specific technical details about the changes.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Jan 19, 2026

Open in StackBlitz

pnpm add https://pkg.pr.new/element-plus/element-plus@23457
npm i https://pkg.pr.new/element-plus/element-plus@23457
yarn add https://pkg.pr.new/element-plus/[email protected]

commit: 2d513b3

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jan 19, 2026

🧪 Playground Preview: https://element-plus.run/?pr=23457
Please comment the example via this playground if needed.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 2

🤖 Fix all issues with AI agents
In `@packages/components/avatar/src/avatar-group-props.ts`:
- Around line 14-18: The size prop type in avatar-group-props.ts inherits an
incomplete type from AvatarProps['size'] (currently ComponentSize only) so
update the AvatarProps interface to include number (e.g., change
AvatarProps.size to ComponentSize | number) so AvatarProps['size'] matches the
runtime ([Number, String]) and the definePropType<AvatarProps['size']> is
accurate; also ensure any related validators or type guards (the validator in
avatar-group-props.ts that uses isNumber) reflect the widened type (accept
ComponentSize | number) where applicable.

In `@packages/components/avatar/src/avatar.ts`:
- Around line 12-41: The AvatarProps interface's size property must allow
numeric values to match the runtime avatarProps validator; update
AvatarProps.size from size?: ComponentSize to include number (e.g., size?:
ComponentSize | number) so TypeScript consumers can pass numeric sizes and
remain consistent with the runtime validator used in avatarProps.

Comment thread packages/components/avatar/src/avatar-group-props.ts
Comment thread packages/components/avatar/src/avatar.ts
@btea btea merged commit f612101 into element-plus:dev Jan 19, 2026
17 checks passed
@github-actions
Copy link
Copy Markdown
Contributor

@E66Crisp Thanks for your contribution! ❤️

@element-bot element-bot mentioned this pull request Jan 30, 2026
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants