fix(timeline): add description prop for configuration mode display Fixes #3070

[IKEYCY]

PR

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our Commit Message Guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

Summary by CodeRabbit

Release Notes

• New Features
  • Added description property to timeline component for customizable item descriptions across PC and mobile-first modes.

[coderabbitai]

Walkthrough

A new description prop was added to timeline-related components. The timeline-item component now renders the description prop when provided, falling back to node.description if undefined. The prop is exposed in both the API documentation and Vue component implementation.

Changes

Cohort / File(s)	Summary
Timeline description prop addition examples/sites/demos/apis/time-line.js, packages/vue/src/timeline-item/src/pc.vue	Added public description prop (type: string, default: '') to timeline components with conditional rendering logic that prioritizes the prop over node.description

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Verify the prop defaults and types are consistent across both files
• Confirm the conditional rendering logic correctly prioritizes description prop over node.description
• Check that prop documentation and Chinese/English descriptions are accurate

Poem

🐰 A ribbon's tale grows long and fine,
With descriptions woven through the line,
Each moment marked with words so clear,
The timeline dances, bright and dear! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: adding a description prop to the timeline component for configuration mode display, with a direct reference to issue #3070.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions:
   | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context.
   Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/vue/src/timeline-item/src/pc.vue (1)

174-180: Update API documentation to include description prop for timeline-item component

The description prop is actively used in the timeline-item component (pc.vue line 176 and template lines 54-58) but is not documented in the API docs. The timeline-item section in examples/sites/demos/apis/time-line.js currently only documents line-width, node, and space props.

Add a description prop entry to the timeline-item component's props array in examples/sites/demos/apis/time-line.js (after the space prop) to match the parent component's documentation style.

🧹 Nitpick comments (2)

packages/vue/src/timeline-item/src/pc.vue (1)

52-60: Description fallback logic works but consider layout consistency and simpler checks

The new fallback (description prop → node.description) is reasonable and backward compatible, but two points:

• In the vertical layout (Lines 155–159), description rendering still uses only node.description. If description is meant to override the node text in all layouts, you may want to apply the same fallback there for consistency, or explicitly confirm it is only for the horizontal/text-position='right' mode.
• The explicit !== undefined && !== null checks are a bit verbose; description != null (and similarly for node.description) would keep behavior while simplifying the template.

examples/sites/demos/apis/time-line.js (1)

247-257: Clarify semantics of new description prop and align with existing API

The new description prop for time-line is fine mechanically, but its role is a bit unclear compared to existing API:

• Other similar props (name-field, time-field, tips-field, auto-color-field) are field selectors, while description here is described generically as "Timeline description". If this is also a field selector for node.description, consider naming it description-field (or adjusting the description text) to match the pattern.
• Templates in packages/vue/src/timeline-item/src/pc.vue already read node.description, and timeline-item now exposes a description prop. It might be worth tightening the doc copy to specify whether this prop controls the node description field, a global description string, or configuration-mode metadata.

Also consider, in a follow-up, adding an optional description?: string to the ITimelineItem type to document the existing node.description usage.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 41a9a9b and 8307423.

📒 Files selected for processing (2)

• examples/sites/demos/apis/time-line.js (1 hunks)
• packages/vue/src/timeline-item/src/pc.vue (2 hunks)

[zzcr]

您好，感谢您的PR，这个PR提交是为了解决什么样的场景问题呢？能不能描述一下呢？

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Hello, thank you for your PR. What kind of scenario problem is this PR submitted to solve? Can you describe it?