refactor(components): [scrollbar] use type-based definitions by SevenDreamYang · Pull Request #23427 · element-plus/element-plus

SevenDreamYang · 2026-01-18T03:36:38Z

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 and unified TypeScript prop interfaces for scrollbar components, replacing prior runtime prop descriptors with typed contracts.
- Applied explicit default values across bar, scrollbar, and thumb props for more predictable behavior and better IDE support.
- Removed legacy prop aliases in favor of the new interfaces; deprecation notes added for the older aliases.

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

github-actions · 2026-01-18T03:36:47Z

coderabbitai · 2026-01-18T03:36:50Z

📝 Walkthrough

Walkthrough

Replaces runtime prop objects and ExtractPropTypes aliases with explicit TypeScript interfaces for scrollbar components; components now use defineProps() (withDefaults for defaults) and imports use ExtractPublicPropTypes. Deprecation comments added for removed aliases.

Changes

Cohort / File(s)	Summary
Type definition files `packages/components/scrollbar/src/bar.ts`, `packages/components/scrollbar/src/scrollbar.ts`, `packages/components/scrollbar/src/thumb.ts`	Removed `export type XProps = ExtractPropTypes<typeof xProps>` aliases; added explicit `export interface XProps { ... }` declarations (BarProps, ScrollbarProps, ThumbProps); removed `ExtractPropTypes` imports, retained `ExtractPublicPropTypes` for public aliases; added deprecation comment blocks.
Vue component files `packages/components/scrollbar/src/bar.vue`, `packages/components/scrollbar/src/scrollbar.vue`, `packages/components/scrollbar/src/thumb.vue`	Switched from `defineProps(runtimePropObject)` to `defineProps<Interface>()`; applied `withDefaults(...)` where defaults were set; replaced runtime prop-object imports with type imports referencing the new interfaces.

Sequence Diagram(s)

(omitted — changes are type/prop-interface refactors without new multi-component control flow)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

refactor(components): [tour] use type-based definitions #23415: Similar refactor replacing runtime prop objects/ExtractPropTypes with TypeScript interfaces and typed defineProps usage.
refactor(components): [link] use type-based definitions #23411: Same pattern converting exported ExtractPropTypes aliases to explicit interfaces and updating components to use defineProps().
refactor(components): [anchor] use type-based definitions #23403: Related refactor migrating prop objects to TypeScript interfaces and applying withDefaults/typed defineProps in components.

Suggested reviewers

btea
keeplearning66

Poem

🐰 I hopped through props beneath moonlight,

Swapped runtime shapes for types polite,
WithDefaults tucked each default tight,
Deprecations marked, interfaces bright,
A rabbit's nibble made the code just right.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is largely incomplete; it only shows the unchecked checklist template without substantive details about the changes, objectives, or rationale for the refactor.	Add a clear description of the refactoring's purpose, what changed (e.g., migration from ExtractPropTypes to TypeScript interfaces), and any breaking changes or migration notes for users.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly and accurately reflects the main refactoring: converting scrollbar component from runtime prop definitions to type-based definitions using TypeScript interfaces.
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 · 2026-01-18T03:39:33Z

Open in StackBlitz

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

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

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

commit: 9ed3a41

github-actions · 2026-01-18T03:44:59Z

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

coderabbitai

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@packages/components/scrollbar/src/scrollbar.ts`:
- Around line 83-86: The ariaOrientation prop's type currently includes the
string literal 'undefined' which is incorrect; update the ariaOrientation
property in the Scrollbar type definition to remove the string 'undefined'
(i.e., use 'horizontal' | 'vertical' or, if you need to allow the explicit
undefined value, use undefined without quotes) since the optional ? already
permits it being unset; modify the ariaOrientation declaration in
packages/components/scrollbar/src/scrollbar.ts accordingly.

In `@packages/components/scrollbar/src/scrollbar.vue`:
- Around line 58-69: The boolean props on the Scrollbar component (declared via
defineProps<ScrollbarProps>() and merged into props) are currently left
undefined by type-only props; update the withDefaults call that constructs props
to explicitly set native, noresize, and always to false so they default to false
at runtime (preserving backward compatibility with existing consumers that test
props.native === false or similar) — locate the
withDefaults(defineProps<ScrollbarProps>(), { ... }) block and add native:
false, noresize: false, always: false to its defaults.

github-actions · 2026-01-18T07:50:13Z

@SevenDreamYang Thanks for your contribution! ❤️

SevenDreamYang added 2 commits January 18, 2026 10:49

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

e79799e

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

74f48e0

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

rzzf mentioned this pull request Jan 18, 2026

Refactor Component Props to type-based declarations #23399

Closed

64 tasks

refactor: update

62bd264

coderabbitai Bot reviewed Jan 18, 2026

View reviewed changes

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

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

rzzf reviewed Jan 18, 2026

View reviewed changes

Comment thread packages/components/scrollbar/src/scrollbar.ts Outdated

Update packages/components/scrollbar/src/scrollbar.ts

9ed3a41

rzzf approved these changes Jan 18, 2026

View reviewed changes

btea approved these changes Jan 18, 2026

View reviewed changes

btea merged commit 71ac3d4 into element-plus:dev Jan 18, 2026
20 of 23 checks passed

element-bot mentioned this pull request Jan 30, 2026

D2M #23568

Merged

3 tasks

coderabbitai Bot mentioned this pull request Mar 26, 2026

feat(components): [scrollbar] expose scrollable state #23908

Open

3 tasks

coderabbitai Bot mentioned this pull request Apr 14, 2026

fix(components): [virtual-list] scrollbar-always-on loses reactivity #24064

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor(components): [scrollbar] use type-based definitions#23427

refactor(components): [scrollbar] use type-based definitions#23427
btea merged 4 commits into
element-plus:devfrom
SevenDreamYang:use-type-based-definitions

SevenDreamYang 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

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

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!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jan 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

SevenDreamYang 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

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

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!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jan 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

SevenDreamYang 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