refactor(components): [notification] use type-based definitions by E66Crisp · Pull Request #23445 · element-plus/element-plus

E66Crisp · 2026-01-18T11:15:25Z

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

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.

Summary by CodeRabbit

Improvements
- Clearer, explicit typing and a unified prop surface for notifications.
- Added explicit notification types and four corner positions (now including bottom-right).
- Default values declared for all props and a refined default close icon for better dismissal UX.
- Positioning/offset handling updated to support all corner positions.
- Legacy prop alias marked as deprecated to guide migration.
Tests
- Simplified tests: removed assertion of console warning for invalid icon types.

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

github-actions · 2026-01-18T11:15:33Z

coderabbitai · 2026-01-18T11:15:37Z

📝 Walkthrough

Walkthrough

Introduces explicit Notification prop/interface types and position literals, deprecates the legacy public prop alias, updates the Vue component to use typed props with defaults (including a default close icon), updates notify typings to use the new position type, and removes a console.warn assertion from a test.

Changes

Cohort / File(s)	Summary
Type definitions `packages/components/notification/src/notification.ts`	Added `Component` import; introduced `NotificationType` and `NotificationPosition`; added `NotificationProps` interface with JSDoc and defaults; added deprecation notes while preserving `notificationProps` and deprecated `NotificationPropsPublic`.
Component implementation `packages/components/notification/src/notification.vue`	Switched from `defineProps(notificationProps)` to `withDefaults(defineProps<NotificationProps>(), {...})`; import `NotificationProps` type and `notificationEmits`; added default `closeIcon` using `Close` from `@element-plus/icons-vue`.
Runtime notify logic `packages/components/notification/src/notify.ts`	Replaced `NotificationOptions['position']` with `NotificationPosition`; typed `notifications` as `Record<NotificationPosition, NotificationQueue>`; updated `close` and `updateOffsets` signatures and included `bottom-right` key.
Tests `packages/components/notification/__tests__/notification.test.tsx`	Removed `console.warn` spy/assertion related to invalid icon type; left runtime validation TODO and restored mock cleanup.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

refactor(components): [link] use type-based definitions #23411 — same refactor pattern introducing explicit prop interfaces and switching components to typed defineProps with defaults.
refactor(components): [descriptions] use type-based definitions #23434 — related migration replacing runtime prop objects with exported interfaces and deprecating legacy ExtractPropTypes aliases.
refactor(components): [message] use type-based definitions #23423 — similar code-level change: exported prop interfaces + switching component props to typed defineProps<...>() with defaults.

Suggested reviewers

btea
keeplearning66

Poem

🐰
I hopped through props and IDs tonight,
I stitched new types by soft moonlight.
Defaults tucked in a cozy row,
Close icons ready — off we go! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% 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 accurately reflects the main change: refactoring the notification component to use type-based prop definitions instead of buildProps.
Description check	✅ Passed	The description includes a reference to issue `#23399` and confirms the repository checklist was completed, but lacks specific details about what changes were made.

_{✏️ 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.}

E66Crisp · 2026-01-18T11:19:56Z

Hello Reviewer, regarding the content about icon?: string | Component, is it necessary to export it as a type in packages\utils\vue\icon.ts? For example, add export type IconComponentType = string | Component in the icon.ts file.

rzzf · 2026-01-18T13:39:33Z

Hello Reviewer, regarding the content about icon?: string | Component, is it necessary to export it as a type in packages\utils\vue\icon.ts? For example, add export type IconComponentType = string | Component in the icon.ts file.

It might be needed in the future, but I don’t think it’s necessary for now.

E66Crisp · 2026-01-19T00:56:28Z

Hello Reviewer, regarding the content about icon?: string | Component, is it necessary to export it as a type in packages\utils\vue\icon.ts? For example, add export type IconComponentType = string | Component in the icon.ts file.

It might be needed in the future, but I don’t think it’s necessary for now.

Yes, refactoring the code does not include this part of the modification.

E66Crisp · 2026-01-19T00:57:56Z

Hello Reviewer, I'm encountering a test failure after refactoring from buildProps to defineProps<NotificationProps>().

The test expects console.warn to be called for invalid prop values, but runtime validation was lost after the migration. I noticed Message component has a similar test but doesn't check for console.warn after the same migration.

Should I:

Remove the console.warn expectation from the test (similar to Message), or
Add manual runtime validation to preserve the developer experience?

Looking forward to your guidance. Thanks!

pkg-pr-new · 2026-01-19T01:12:02Z

Open in StackBlitz

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

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

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

commit: 7212c30

rzzf · 2026-01-19T17:07:22Z

Remove the console.warn expectation from the test (similar to Message), or

We can first comment out the assertion instead of deleting it.

Add manual runtime validation to preserve the developer experience?

See #23458

E66Crisp · 2026-01-20T00:37:45Z

Remove the console.warn expectation from the test (similar to Message), or

We can first comment out the assertion instead of deleting it.

Add manual runtime validation to preserve the developer experience?

See #23458

Got it. I've commented out this section of code. tks.

github-actions · 2026-01-20T00:43:13Z

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

github-actions · 2026-01-20T12:16:24Z

@E66Crisp Thanks for your contribution! ❤️

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

9acc191

pull-request-triage Bot assigned E66Crisp 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

test: remove runtime validation expectation

17dd574

btea mentioned this pull request Jan 18, 2026

Refactor Component Props to type-based declarations #23399

Closed

64 tasks

rzzf marked this pull request as draft January 18, 2026 13:46

fix(components): [notification] position type constraint error

28803b4

E66Crisp marked this pull request as ready for review January 19, 2026 01:29

E66Crisp marked this pull request as draft January 19, 2026 02:50

Update notification.test.tsx

bef8f61

btea reviewed Jan 20, 2026

View reviewed changes

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

E66Crisp and others added 3 commits January 20, 2026 10:25

Update notification.vue

e95ec5f

Merge branch 'dev' into refactor-notification

371d140

chore: revert comments

7212c30

rzzf approved these changes Jan 20, 2026

View reviewed changes

rzzf marked this pull request as ready for review January 20, 2026 08:57

btea approved these changes Jan 20, 2026

View reviewed changes

btea merged commit 77a4e31 into element-plus:dev Jan 20, 2026
16 of 17 checks passed

coderabbitai Bot mentioned this pull request Jan 22, 2026

fix(components): [notification] fix stacking with debounced updates #23500

Open

3 tasks

element-bot mentioned this pull request Jan 30, 2026

D2M #23568

Merged

3 tasks

Uh oh!

Conversation

E66Crisp 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

Possibly related PRs

Suggested reviewers

Poem

Uh oh!

E66Crisp commented Jan 18, 2026

Uh oh!

rzzf commented Jan 18, 2026

Uh oh!

E66Crisp commented Jan 19, 2026

Uh oh!

E66Crisp commented Jan 19, 2026

Uh oh!

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

Uh oh!

Uh oh!

rzzf commented Jan 19, 2026

Uh oh!

E66Crisp commented Jan 20, 2026

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jan 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

E66Crisp 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 19, 2026 •

edited

Loading

github-actions Bot commented Jan 20, 2026 •

edited

Loading