Skip to content

refactor(components): [divider/result/page-header] use type-based definitions#23417

Merged
btea merged 3 commits into
element-plus:devfrom
william-xue:refactor/type-props-divider-result-page-header
Jan 18, 2026
Merged

refactor(components): [divider/result/page-header] use type-based definitions#23417
btea merged 3 commits into
element-plus:devfrom
william-xue:refactor/type-props-divider-result-page-header

Conversation

@william-xue
Copy link
Copy Markdown
Contributor

@william-xue william-xue commented Jan 17, 2026

将组件props类型从ExtractPropTypes改为直接定义接口
使用withDefaults为props提供默认值
统一组件中props的类型导入和使用方式

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.

Summary by CodeRabbit

  • Refactor
    • Introduced explicit public prop interfaces for Divider, Page Header, and Result components.
    • Components now use typed props with built-in default values (including default visuals/content for Page Header and default divider/result defaults).
    • Result icon handling standardized for more consistent display and safer fallbacks.
  • Chores
    • Simplified prop-related exports to rely on public-type interfaces only.

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

@pull-request-triage
Copy link
Copy Markdown

👋 @william-xue, seems like this is your first time contribution to element-plus.
Please make sure that you have read our guidelines and code of conduct before making a contribution.

@pull-request-triage pull-request-triage Bot added 1st contribution Their very first contribution Needs Review labels Jan 17, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jan 17, 2026

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jan 17, 2026

📝 Walkthrough

Walkthrough

Replaces runtime prop objects with explicit exported TypeScript prop interfaces for Divider, PageHeader, and Result; removes ExtractPropTypes aliases; components now use typed defineProps<...>() with withDefaults(...) and drop runtime prop imports.

Changes

Cohort / File(s) Summary
Divider Component
packages/components/divider/src/divider.ts, packages/components/divider/src/divider.vue
Added exported DividerProps interface; removed DividerProps = ExtractPropTypes<...>; component now uses withDefaults(defineProps<DividerProps>(), { direction: 'horizontal', contentPosition: 'center', borderStyle: 'solid' }); removed runtime dividerProps import.
PageHeader Component
packages/components/page-header/src/page-header.ts, packages/components/page-header/src/page-header.vue
Added exported PageHeaderProps interface (`icon?: string
Result Component
packages/components/result/src/result.ts, packages/components/result/src/result.vue
Added exported ResultProps interface (title?, subTitle?, icon? union); removed ResultProps = ExtractPropTypes<...>; component now uses withDefaults(defineProps<ResultProps>(), { title: '', subTitle: '', icon: 'info' }); removed runtime resultProps import.

Sequence Diagram(s)

(Skipped — changes are refactors of prop typing and defaults, not multi-component sequential flows.)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested reviewers

  • btea
  • keeplearning66

Poem

🐰 I hopped through props and made them bright,
Interfaces snug, defaults set right.
Runtime crumbs swept from the trail,
Type-safe burrows in every file. ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1
❌ Failed checks (1 inconclusive)
Check name Status Explanation Resolution
Description check ❓ Inconclusive The description includes the checklist template but all items remain unchecked. The initial lines describe the PR objectives but are in Chinese and lack English equivalents, making it incomplete. Provide complete English descriptions of the changes, check the applicable checklist items, and reference related issues if applicable.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The PR title clearly summarizes the main change: refactoring components to use type-based prop definitions instead of ExtractPropTypes.
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.

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: 1

🤖 Fix all issues with AI agents
In `@packages/components/divider/src/divider.vue`:
- Around line 26-30: The current change replaced type-only
defineProps<DividerProps>() (used with withDefaults) which drops runtime
validators defined in dividerProps; restore runtime validation by using the
runtime props object instead of the type-only signature—call
defineProps(dividerProps) (still wrapped by withDefaults if default values are
needed) so the validators on direction, contentPosition and borderStyle from
dividerProps are preserved; update the code around withDefaults, defineProps,
dividerProps and DividerProps accordingly to maintain types while keeping the
runtime validators.
🧹 Nitpick comments (2)
packages/components/result/src/result.ts (1)

31-35: Avoid drift between IconMap keys and ResultProps.icon union.
Derive the icon type from IconMap so updates stay in sync.

♻️ Suggested refactor
+export type ResultIcon = keyof typeof IconMap
+
 export interface ResultProps {
   title?: string
   subTitle?: string
-  icon?: 'primary' | 'success' | 'warning' | 'info' | 'error'
+  icon?: ResultIcon
 }
packages/components/divider/src/divider.ts (1)

8-12: Keep DividerProps unions aligned with runtime values.

Line 8–11 hand-codes string unions that must stay in sync with dividerProps.values. Consider extracting shared literal arrays to avoid drift.

♻️ Suggested refactor to share literals
+export const dividerDirections = ['horizontal', 'vertical'] as const
+export const dividerContentPositions = ['left', 'center', 'right'] as const
+export type DividerDirection = typeof dividerDirections[number]
+export type DividerContentPosition = typeof dividerContentPositions[number]
+
 export interface DividerProps {
-  direction?: 'horizontal' | 'vertical'
-  contentPosition?: 'left' | 'center' | 'right'
+  direction?: DividerDirection
+  contentPosition?: DividerContentPosition
   borderStyle?: BorderStyle
 }
 
 export const dividerProps = buildProps({
   direction: {
     type: String,
-    values: ['horizontal', 'vertical'],
+    values: dividerDirections,
     default: 'horizontal',
   },
   contentPosition: {
     type: String,
-    values: ['left', 'center', 'right'],
+    values: dividerContentPositions,
     default: 'center',
   },
   // ...
 } as const)

Comment thread packages/components/divider/src/divider.vue
@william-xue william-xue force-pushed the refactor/type-props-divider-result-page-header branch from 6478db4 to 7601e1f Compare January 17, 2026 16:45
@btea btea changed the title refactor(components): 重构组件props类型定义和使用方式 refactor(components): [divider/result/page-header]use type-based definitions Jan 18, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jan 18, 2026

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

@github-actions github-actions Bot added the CommitMessage::Unqualified Unqualified commit message label Jan 18, 2026
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Jan 18, 2026

Open in StackBlitz

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

commit: 63178d0

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jan 18, 2026

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

@rzzf rzzf changed the title refactor(components): [divider/result/page-header]use type-based definitions refactor(components): [divider/result/page-header] use type-based definitions Jan 18, 2026
@btea btea merged commit 0b8b849 into element-plus:dev Jan 18, 2026
18 checks passed
@github-actions
Copy link
Copy Markdown
Contributor

@william-xue Thanks for your contribution! ❤️

@william-xue william-xue deleted the refactor/type-props-divider-result-page-header branch January 23, 2026 07:06
@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

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants