refactor(components): [badge/breadcrumb/button] use type-based definitions by snowbitx · Pull Request #23414 · element-plus/element-plus

snowbitx · 2026-01-17T13:22:09Z

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. badge & breadcrumb / breadcrumb-item & button / button-group

Summary by CodeRabbit

Refactor
- Strengthened public TypeScript interfaces across Badge, Breadcrumb, Button, and ButtonGroup; components now use explicit typed props with inline defaults.
Chores
- Marked legacy prop type aliases and public typings as deprecated to guide migration to the new interfaces.
User-facing
- Components now expose explicit runtime defaults (badge offset [0, 0], breadcrumb separator '/', button defaults including direction, type, nativeType and loading icon) with preserved behavior.
Documentation
- Badge docs: offset default updated to [0, 0].

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

coderabbitai · 2026-01-17T13:22:15Z

📝 Walkthrough

Walkthrough

Adds explicit exported TypeScript prop interfaces for Badge, Breadcrumb, and Button (and related items), deprecates ExtractPropTypes-based public aliases, updates SFCs to use type-only imports with defineProps() plus withDefaults(...), and adjusts some prop types/defaults and docs (badge offset).

Changes

Cohort / File(s)	Summary
Badge: typings, component, docs `packages/components/badge/src/badge.ts`, `packages/components/badge/src/badge.vue`, `docs/en-US/component/badge.md`	Introduces `export interface BadgeProps`; removes `ExtractPropTypes`-based exported alias; adds deprecated `BadgePropsPublic = ExtractPublicPropTypes<...>`; adjusts `badgeStyle` runtime type; `.vue` switched to `defineProps<BadgeProps>()` + `withDefaults(...)` with explicit defaults (including `offset`); docs default for `offset` set to `[0, 0]`.
Breadcrumb & BreadcrumbItem: typings & components `packages/components/breadcrumb/src/breadcrumb.ts`, `packages/components/breadcrumb/src/breadcrumb.vue`, `packages/components/breadcrumb/src/breadcrumb-item.ts`, `packages/components/breadcrumb/src/breadcrumb-item.vue`	Adds `BreadcrumbProps` and `BreadcrumbItemProps` interfaces and deprecation notices; replaces ExtractPropTypes-based public exports with `*Public = ExtractPublicPropTypes<...>` aliases (deprecated); SFCs now use type-only imports and `defineProps<...>()` + `withDefaults(...)` with defaults for `separator`, `to`, `replace`.
Button & ButtonGroup: typings, defaults, components `packages/components/button/src/button.ts`, `packages/components/button/src/button.vue`, `packages/components/button/src/button-group.ts`, `packages/components/button/src/button-group.vue`	Adds `ButtonProps` interface and `ButtonType` / `ButtonNativeType` types; removes ExtractPropTypes-based exported aliases in favor of interfaces and deprecated `*Public` aliases; runtime `buttonProps` retained but annotated deprecated; SFCs switched to `defineProps<ButtonProps>()` + `withDefaults(...)` and introduce multiple explicit defaults (e.g., `markRaw(Loading)` for `loadingIcon`).

Sequence Diagram(s)

(omitted)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related issues

Refactor Component Props to type-based declarations #23399 — Implements the refactor plan to replace runtime prop objects with exported interfaces and switch components to typed defineProps usage.

Possibly related PRs

refactor(components): [link] use type-based definitions #23411 — Same refactor pattern (props interfaces + defineProps() + withDefaults) applied to other components.
refactor(components): [alert] use type-based definitions #23401 — Same interface-based props migration on different components (alert).
refactor(components): [switch] use type-based definitions #23420 — Related prop-typing replacement refactor across components.

Suggested reviewers

rzzf
btea
keeplearning66

Poem

🐰 I hopped through props and tidied each nest,
Replaced old aliases and gave defaults their rest.
With types snug and small changes in stride,
I left a few carrots — a joyful code ride. 🥕

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description only includes the template checklist items and a minimal reference to related issue `#23399`, but lacks substantive details about the changes, motivation, or impact.	Add a detailed description explaining the refactoring objectives, why type-based definitions are preferred, what components are affected, and any breaking changes or migration steps for users.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main refactoring effort across multiple components to adopt type-based definitions instead of runtime prop objects.
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.}

github-actions · 2026-01-17T13:22:16Z

pkg-pr-new · 2026-01-17T13:23:52Z

Open in StackBlitz

pnpm add https://pkg.pr.new/element-plus/element-plus@23414

npm i https://pkg.pr.new/element-plus/element-plus@23414

yarn add https://pkg.pr.new/element-plus/[email protected]

commit: fe7696b

github-actions · 2026-01-17T13:40:05Z

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

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@packages/components/button/src/button.vue`:
- Around line 30-49: The Button booleans (disabled, plain, text, round,
autoInsertSpace) are now defaulting to false via withDefaults, breaking
use-button's nullish-coalescing fallback to globalConfig; update the props
declaration (the withDefaults call in button.vue where ButtonProps/props is
defined) to explicitly set those boolean props to undefined (restore tri-state
defaults) so useButton (use-button.ts) can detect undefined and fall back to
globalConfig.value, or alternately adjust useButton's merge logic to treat false
as a valid value only when explicitly specified (e.g., check prop === undefined
before using globalConfig).

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@docs/en-US/component/badge.md`:
- Around line 62-73: Update the docs table row for the prop offset (referenced
as "offset ^(2.7.0)") so its Default cell matches the runtime default of [0, 0]
instead of "—"; locate the offset row in the badge props table and replace the
placeholder default with the literal "[0, 0]" (keeping existing formatting style
consistent with other default values).

🧹 Nitpick comments (1)

packages/components/badge/src/badge.vue (1)

30-46: Consider centralizing defaults to avoid drift

Defaults now live both here and in badgeProps. A shared badgeDefaults export could prevent divergence over time.

github-actions · 2026-01-17T15:22:26Z

Hello, @snowbitx, your PR title does not meet the standards, please refer to here.
你好，@snowbitx，你的 PR 标题不符合规范，请参考这里。

Co-authored-by: rzzf <[email protected]>

rzzf

Thanks for all the back-and-forth

keeplearning66

Thank you!

github-actions · 2026-01-18T08:12:28Z

@snowbitx Thanks for your contribution! ❤️

keeplearning66 · 2026-01-18T12:54:23Z

relate comment
We might need to explicitly set the default value of badgeStyle to undefined, because after merging this PR, the default value of badgeStyle in DevTools is shown as false, which is different from the previous version. 🤔

refactor(components): [badge] use type-based definitions

9678222

pull-request-triage Bot assigned snowbitx Jan 17, 2026

pull-request-triage Bot added the Needs Review label Jan 17, 2026

github-actions Bot added the Contribution::Community label Jan 17, 2026

snowbitx marked this pull request as ready for review January 17, 2026 13:25

snowbitx and others added 2 commits January 17, 2026 21:25

Merge branch 'dev' into refactor/use-type-bases

f5a56de

refactor(components): breadcrumb,breadcrumb-item

3b96c11

keeplearning66 reviewed Jan 17, 2026

View reviewed changes

Comment thread packages/components/badge/src/badge.ts

snowbitx added 2 commits January 17, 2026 21:51

refactor(components): button,button-group

b91eb31

fix: correct badgeStyle default value

5e4925b

coderabbitai Bot reviewed Jan 17, 2026

View reviewed changes

Comment thread packages/components/button/src/button.vue

snowbitx added 2 commits January 17, 2026 22:24

fix: correct button default value

6bafcd3

fix: correct badge-style

2292826

rzzf requested changes Jan 17, 2026

View reviewed changes

Comment thread packages/components/badge/src/badge.vue Outdated

Comment thread packages/components/breadcrumb/src/breadcrumb-item.vue Outdated

Comment thread packages/components/button/src/button-group.vue

coderabbitai Bot reviewed Jan 17, 2026

View reviewed changes

Comment thread docs/en-US/component/badge.md Outdated

rzzf changed the title ~~refactor(components): [badge] use type-based definitions~~ refactor(components): [badge/breadcrumb/button] use type-based definitions Jan 17, 2026

github-actions Bot added the CommitMessage::Unqualified Unqualified commit message label Jan 17, 2026

snowbitx and others added 2 commits January 17, 2026 23:25

Update packages/components/button/src/button-group.vue

b1b1462

Co-authored-by: rzzf <[email protected]>

fix: delete false default

c6e9156

rzzf reviewed Jan 17, 2026

View reviewed changes

Comment thread packages/components/badge/src/badge.vue Outdated

Comment thread packages/components/breadcrumb/src/breadcrumb-item.vue Outdated

rzzf mentioned this pull request Jan 17, 2026

Refactor Component Props to type-based declarations #23399

Closed

64 tasks

snowbitx and others added 4 commits January 18, 2026 00:16

Update packages/components/badge/src/badge.vue

cb4af98

Co-authored-by: rzzf <[email protected]>

Update packages/components/breadcrumb/src/breadcrumb-item.vue

d0e344f

Co-authored-by: rzzf <[email protected]>

fix: correct offset default in badge.md

8740a55

Merge branch 'dev' into refactor/use-type-bases

cde44d0

rzzf approved these changes Jan 17, 2026

View reviewed changes

snowbitx mentioned this pull request Jan 17, 2026

refactor(components): [card/calendar/carousel] use type-based definitions #23418

Closed

3 tasks

keeplearning66 approved these changes Jan 18, 2026

View reviewed changes

fix: revert the badgeStyle handling

663431d

snowbitx requested a review from btea January 18, 2026 07:53

Merge branch 'dev' into refactor/use-type-bases

fe7696b

btea approved these changes Jan 18, 2026

View reviewed changes

btea merged commit 6a5f2ff into element-plus:dev Jan 18, 2026
16 checks passed

coderabbitai Bot mentioned this pull request Jan 18, 2026

refactor(components): [upload] use type-based definitions #23442

Merged

3 tasks

btea mentioned this pull request Jan 18, 2026

fix(components): [badge] missing badgeStyle default value #23448

Merged

3 tasks

coderabbitai Bot mentioned this pull request Jan 25, 2026

refactor(components): [badge] use factory default for offset prop #23526

Merged

3 tasks

element-bot mentioned this pull request Jan 30, 2026

D2M #23568

Merged

3 tasks

coderabbitai Bot mentioned this pull request May 22, 2026

chore(docs): capitalize API descriptions #24293

Open

Uh oh!

Conversation

snowbitx commented Jan 17, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jan 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related issues

Possibly related PRs

Suggested reviewers

Poem

Uh oh!

github-actions Bot commented Jan 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new Bot commented Jan 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jan 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Jan 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rzzf left a comment

Choose a reason for hiding this comment

Uh oh!

keeplearning66 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Jan 18, 2026

Uh oh!

keeplearning66 commented Jan 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

snowbitx commented Jan 17, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jan 17, 2026 •

edited

Loading

github-actions Bot commented Jan 17, 2026 •

edited

Loading

pkg-pr-new Bot commented Jan 17, 2026 •

edited

Loading

github-actions Bot commented Jan 17, 2026 •

edited

Loading

github-actions Bot commented Jan 17, 2026 •

edited

Loading

keeplearning66 commented Jan 18, 2026 •

edited

Loading