refactor(components): [popper] use type-based definitions by snowbitx · Pull Request #23450 · element-plus/element-plus

snowbitx · 2026-01-18T15:22:18Z

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
- Reworked Popper component props and defaults into explicit typed interfaces, simplifying prop typing and runtime defaults across Popper, Content, Trigger and Arrow.
- Components now apply explicit default values (e.g., role/defaults for popper content/arrow offset) via typed defaults rather than inline prop descriptors, improving consistency.
Chores
- Removed legacy prop extraction usage and cleaned up type exports and imports.

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

github-actions · 2026-01-18T15:22:27Z

coderabbitai · 2026-01-18T15:22:32Z

📝 Walkthrough

Walkthrough

Refactors Popper props from ExtractPropTypes-derived runtime descriptors to explicit TypeScript interfaces and separate defaults; updates components to use typed defineProps with withDefaults and adjusts related types/imports across popper arrow, content, popper, trigger, and utilities.

Changes

Cohort / File(s)	Change Summary
Arrow component `packages/components/popper/src/arrow.ts`	Added `PopperArrowProps` interface and `PopperArrowPropsPublic` alias, removed `ExtractPropTypes` import, introduced `popperArrowPropsDefaults`, added `usePopperArrowProps`/`UsePopperArrowProps` aliases and `ElPopperArrowInstance` alias.
Content core types & defaults `packages/components/popper/src/content.ts`	Added `PopperCoreConfigProps` and `PopperContentProps` interfaces, `PopperCoreConfigPropsPublic`/`PopperContentPropsPublic` aliases, introduced `popperCoreConfigPropsDefaults` and `popperContentPropsDefaults`, and import adjustments to use arrow defaults/types.
Content component `packages/components/popper/src/content.vue`	Switched from runtime `popperContentProps` descriptor to `defineProps<PopperContentProps>()` with `withDefaults(..., popperContentPropsDefaults)`; updated imports to use the typed props and defaults.
Content DOM composable `packages/components/popper/src/composables/use-content-dom.ts`	Applied non-null assertion to `props.effect` in `contentClass` computation (`ns.is(props.effect!)`).
Main Popper types `packages/components/popper/src/popper.ts`	Added `PopperProps` interface (including optional `role`), removed `ExtractPropTypes`-derived exported type, added `PopperPropsPublic = ExtractPublicPropTypes<typeof popperProps>`, preserved `usePopperProps` alias/deprecation notes.
Main Popper component `packages/components/popper/src/popper.vue`	Changed props declaration to `withDefaults(defineProps<PopperProps>(), { role: 'tooltip' })`, importing the `PopperProps` type.
Trigger types `packages/components/popper/src/trigger.ts`	Added `PopperTriggerProps` interface defining optional event handlers and related props; removed previous `typeof popperTriggerProps` alias.
Trigger component `packages/components/popper/src/trigger.vue`	Switched from `defineProps(popperTriggerProps)` to `withDefaults(defineProps<PopperTriggerProps>(), {})` and updated imports to use the `PopperTriggerProps` type.
Utilities `packages/components/popper/src/utils.ts`	Narrowed `deriveExtraModifiers` parameter type to `NonNullable<PopperCoreConfigProps['popperOptions']>['modifiers']` (non-nullable index access).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

rzzf
btea

Poem

🐰 With whiskers twitching, I compile the night,
Types hop in place, all tidy and bright,
Defaults snugly tucked, no extractor in sight,
Interfaces singing, refactor delight,
A rabbit's small cheer for code done right.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main refactor: converting popper component definitions from runtime prop objects to type-based definitions across multiple files.
Description check	✅ Passed	The description includes all required checklist items marked as completed, mentions the contributing guide, confirms dev branch targeting, and provides issue reference `#23399`.

_{✏️ 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 · 2026-01-18T15:24:03Z

Open in StackBlitz

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

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

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

commit: 4568819

github-actions · 2026-01-18T15:29:34Z

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

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

wjp980108 · 2026-01-19T08:01:57Z

When can this PR be merged? My modified tooltip component needs the content modified in this PR. @rzzf

github-actions · 2026-01-19T08:18:17Z

@snowbitx Thanks for your contribution! ❤️

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

6befef8

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

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

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

Dsaquel mentioned this pull request Jan 18, 2026

Refactor Component Props to type-based declarations #23399

Closed

64 tasks

Dsaquel reviewed Jan 18, 2026

View reviewed changes

Comment thread packages/components/popper/src/trigger.vue

rzzf reviewed Jan 19, 2026

View reviewed changes

Comment thread packages/components/popper/src/content.ts

snowbitx and others added 2 commits January 19, 2026 12:32

Update packages/components/popper/src/content.ts

f3a736a

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

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

4568819

rzzf approved these changes Jan 19, 2026

View reviewed changes

rzzf mentioned this pull request Jan 19, 2026

refactor(components): [popconfirm] use type-based definitions #23455

Merged

3 tasks

Dsaquel approved these changes Jan 19, 2026

View reviewed changes

Dsaquel merged commit 3dcb61f into element-plus:dev Jan 19, 2026
20 checks passed

This was referenced Jan 19, 2026

refactor(components): [tooltip] use type-based definitions #23475

Merged

refactor(components): [cascader] use type-based definitions #23478

Merged

element-bot mentioned this pull request Jan 30, 2026

D2M #23568

Merged

3 tasks

rzzf mentioned this pull request Mar 30, 2026

refactor(components): cleanup defineProps types #23934

Merged

3 tasks

coderabbitai Bot mentioned this pull request Apr 9, 2026

perf(types): [all] Updated vue version and type descriptions #24007

Closed

3 tasks

coderabbitai Bot mentioned this pull request Apr 22, 2026

feat(components): [autocomplete] add popper-options and show-arrow props #24109

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor(components): [popper] use type-based definitions#23450

refactor(components): [popper] use type-based definitions#23450
Dsaquel merged 3 commits into
element-plus:devfrom
snowbitx:refactor/use-type-popper

snowbitx commented Jan 18, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

github-actions Bot commented Jan 18, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jan 18, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Poem

Uh oh!

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

edited

Loading

Uh oh!

github-actions Bot commented Jan 18, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

wjp980108 commented Jan 19, 2026

Uh oh!

Uh oh!

github-actions Bot commented Jan 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

snowbitx commented Jan 18, 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!

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

Uh oh!

Uh oh!

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

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Poem

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

Uh oh!

wjp980108 commented Jan 19, 2026

Uh oh!

Uh oh!

github-actions Bot commented Jan 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

snowbitx commented Jan 18, 2026 •

edited by coderabbitai Bot

Loading

github-actions Bot commented Jan 18, 2026 •

edited

Loading

coderabbitai Bot commented Jan 18, 2026 •

edited

Loading

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

edited

Loading

github-actions Bot commented Jan 18, 2026 •

edited

Loading