Skip to content

refactor(components): [collapse] use type-based definitions#23443

Merged
rzzf merged 2 commits into
element-plus:devfrom
snowbitx:refactor/use-type-collapse
Jan 18, 2026
Merged

refactor(components): [collapse] use type-based definitions#23443
rzzf merged 2 commits into
element-plus:devfrom
snowbitx:refactor/use-type-collapse

Conversation

@snowbitx
Copy link
Copy Markdown
Contributor

@snowbitx snowbitx commented Jan 18, 2026

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

    • Updated internal type system for Collapse component and related subcomponents.
    • Refined prop type definitions and extraction utilities for improved type safety.
  • Chores

    • Applied default values to component props including an arrow icon for collapse items and default positioning.
    • Enhanced component initialization with explicit type definitions.

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

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jan 18, 2026

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jan 18, 2026

📝 Walkthrough

Walkthrough

This PR refactors the Collapse and CollapseItem components to use explicit type-based prop interfaces instead of ExtractPropTypes. New TypeScript interfaces (CollapseProps, CollapseItemProps) are introduced with JSDoc documentation, ExtractPropTypes is replaced with ExtractPublicPropTypes, and component .vue files are updated to use typed defineProps with default values via withDefaults.

Changes

Cohort / File(s) Summary
Type system refactoring
packages/components/collapse/src/collapse.ts, packages/components/collapse/src/collapse-item.ts
Introduced new exported interfaces (CollapseProps with accordion/modelValue/expandIconPosition/beforeCollapse; CollapseItemProps with title/name/icon/disabled) with JSDoc comments. Replaced ExtractPropTypes with ExtractPublicPropTypes and renamed public type aliases to ...Public versions.
Component implementation updates
packages/components/collapse/src/collapse.vue, packages/components/collapse/src/collapse-item.vue
Updated props definitions to use typed withDefaults(defineProps<CollapseProps/CollapseItemProps>(), {...}) instead of untyped defineProps. Added default values: CollapseItem now defaults to empty title and ArrowRight icon; Collapse defaults modelValue to empty array and expandIconPosition to 'right'.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

Suggested reviewers

  • rzzf
  • btea

Poem

🐰 Types now shine with clarity bright,
Interfaces declared left and right,
CollapseProps and defaults so true,
ArrowRight icons in every view,
withDefaults refactors make props delight!

🚥 Pre-merge checks | ✅ 2 | ❌ 1
❌ Failed checks (1 inconclusive)
Check name Status Explanation Resolution
Description check ❓ Inconclusive The PR description includes checklist items and references issue #23399, but lacks substantive details about the refactoring changes, rationale, or impact. Add detailed description of the type-based definition refactoring, explain why this change improves the codebase, and clarify the scope and impact of modifications to collapse component types.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and specifically describes the main refactoring: converting the collapse component from runtime prop definitions to type-based prop definitions.
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
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@23443
npm i https://pkg.pr.new/element-plus/element-plus@23443
yarn add https://pkg.pr.new/element-plus/[email protected]

commit: e1ee7a0

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

🤖 Fix all issues with AI agents
In `@packages/components/collapse/src/collapse-item.vue`:
- Around line 57-60: The props declaration for CollapseItem (const props =
withDefaults(defineProps<CollapseItemProps>(), ...)) is missing an explicit
default for the disabled prop, causing it to be undefined instead of false;
update the withDefaults call for defineProps<CollapseItemProps>() (the same
place where title and icon defaults are set) to include disabled: false so
:aria-disabled="disabled" renders consistently.

In `@packages/components/collapse/src/collapse.vue`:
- Around line 16-19: The CollapseProps' boolean prop accordion currently has no
explicit default and will be undefined when omitted; update the props defaults
in the withDefaults call (the same place where modelValue and expandIconPosition
are set) to include accordion: false so props.accordion is always a boolean;
locate the const props = withDefaults(defineProps<CollapseProps>(), ...) block
in collapse.vue and add the accordion default entry to that defaults object.

Comment thread packages/components/collapse/src/collapse-item.vue
Comment thread packages/components/collapse/src/collapse.vue
@github-actions
Copy link
Copy Markdown
Contributor

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

Copy link
Copy Markdown
Member

@keeplearning66 keeplearning66 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you!

Comment thread packages/components/collapse/src/collapse-item.vue
@rzzf rzzf merged commit e83afbb into element-plus:dev Jan 18, 2026
20 checks passed
@github-actions
Copy link
Copy Markdown
Contributor

@snowbitx Thanks for your contribution! ❤️

Comment thread packages/components/collapse/src/collapse-item.vue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants