refactor(Steps/Timeline): use genCssVar hook to generate CSS variables#56562
refactor(Steps/Timeline): use genCssVar hook to generate CSS variables#56562li-jia-nan merged 11 commits intomasterfrom
Conversation
|
|
|
|
👁 Visual Regression Report for PR #56562 Passed ✅
🎊 Congrats! No visual-regression diff found. 
|
📝 WalkthroughSummary by CodeRabbit发布说明
✏️ Tip: You can customize this high-level summary in your review settings. Walkthrough将 Steps 与 Timeline 的样式从硬编码 CSS 自定义属性迁移为基于 genCssVar 的主题作用域 CSS 变量；若干组件改为 React.FC/箭头函数并透传或接收 rootPrefixCls，样式引用改为 varName/varRef，部分样式键名与计算被改写。（≤50 字） Changes
Sequence Diagram(s)（条件不满足，已省略） Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
兔子的贺诗
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
Summary of ChangesHello @li-jia-nan, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request refactors the Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
There was a problem hiding this comment.
Code Review
This pull request is an excellent and thorough refactoring to use the genCssVar hook for generating CSS variables across the Steps and related Timeline components. This significantly improves code maintainability and consistency by removing hardcoded variable names. The changes are applied systematically and correctly across all relevant files. I also appreciate the subtle performance optimization of replacing translateX/Y with translate3d to leverage hardware acceleration. The code quality is high, and I have no further suggestions for improvement.
size-limit report 📦
|
More templates
commit: |
Deploying ant-design-next with
|
| Latest commit: |
d4b926c
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://52157848.ant-design-next.pages.dev |
| Branch Preview URL: | https://gencssvar-steps-11.ant-design-next.pages.dev |
There was a problem hiding this comment.
Pull request overview
This pull request refactors the Steps and Timeline components to use the genCssVar hook for generating CSS variables, replacing manual string concatenation. This improves code consistency and maintainability by standardizing CSS variable naming across the codebase.
Changes:
- Migrated CSS variable definitions from manual string format (
'--ant-steps-*') to usinggenCssVarhook withvarName()andvarRef()functions - Updated all Steps and Timeline style files to use the new CSS variable generation pattern
- Added
rootPrefixClsparameter toProgressIconcomponent to support the new CSS variable generation - Optimized some transform properties from
translateY/translateXtotranslate3dfor better performance
Reviewed changes
Copilot reviewed 18 out of 18 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| components/steps/style/index.ts | Updated basic styles to use genCssVar hook |
| components/steps/style/status.ts | Migrated status-specific styles with CSS variable hook |
| components/steps/style/vertical.ts | Updated vertical layout styles |
| components/steps/style/util.ts | Refactored utility function to use genCssVar |
| components/steps/style/small.ts | Updated small size variant styles |
| components/steps/style/rtl.ts | Migrated RTL-specific styles |
| components/steps/style/progress.ts | Updated progress-related styles |
| components/steps/style/progress-dot.ts | Migrated dot variant styles |
| components/steps/style/panel.ts | Updated panel layout styles |
| components/steps/style/nav.ts | Migrated navigation variant styles |
| components/steps/style/label-placement.ts | Updated label placement styles |
| components/steps/style/inline.ts | Migrated inline variant styles |
| components/steps/style/icon.ts | Updated icon-related styles |
| components/steps/style/horizontal.ts | Migrated horizontal layout styles |
| components/steps/index.tsx | Added rootPrefixCls and varName usage |
| components/steps/ProgressIcon.tsx | Updated to accept rootPrefixCls for CSS variable generation |
| components/timeline/style/index.ts | Updated timeline styles to use genCssVar |
| components/timeline/style/horizontal.ts | Migrated horizontal timeline styles |
Deploying ant-design with
|
| Latest commit: |
d4b926c
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://a118bbd1.ant-design.pages.dev |
| Branch Preview URL: | https://gencssvar-steps-11.ant-design.pages.dev |
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
components/steps/style/util.ts (1)
4-8: 移除any：withoutVar(cssVar: any)违反严格 TS 约束该文件匹配
**/*.{ts,tsx}，any不符合规范；同时正则可收敛避免误匹配。建议最小改动改为string | undefined并改用非贪婪/锚定匹配。As per coding guidelines, 禁止使用any。建议修复（最小 diff）
-function withoutVar(cssVar: any): string { - return (cssVar || '--ant-not-exist').replace(/var\((.*)\)/, '$1'); +function withoutVar(cssVar?: string): string { + return (cssVar ?? '--ant-not-exist').replace(/^var\(([^)]+)\)$/, '$1'); }Also applies to: 14-49
components/steps/style/progress.ts (1)
79-79: 选择器名称包含拼写错误，导致样式规则无法应用。选择器
${componentCls}-with-progress11中的11后缀是拼写错误。实际的组件类名为with-progress（不带11后缀），参见components/steps/index.tsx第 379 行。由于选择器不匹配，此行及其后续的所有样式规则都无法应用到实际的 DOM 元素上。建议的修复
- [`&${componentCls}-with-progress11`]: { + [`&${componentCls}-with-progress`]: {
🤖 Fix all issues with AI agents
In @components/steps/style/label-placement.ts:
- Around line 5-45: The base selector uses varRef('heading-height') without a
guaranteed definition, so update its usages in genLabelPlacementStyle (notably
the [`${itemCls}-icon`].marginBlockStart calc) to provide a fallback via
varRef's second arg (e.g., varRef('heading-height', varRef('icon-size')) or
another sensible fallback like varRef('title-horizontal-title-height') or
varRef('icon-size')), and apply the same fallback pattern to any other
base-level varRef('heading-height') references to ensure the calc remains valid
when the horizontal/vertical branches haven't set it.
In @components/timeline/style/horizontal.ts:
- Around line 14-15: The CSS variable usage is inconsistent: replace the
hard-coded '--steps-title-vertical-row-gap' in
components/timeline/style/horizontal.ts with the generated variable via
genCssVar (or varName) so it follows the same pattern as
[varName('content-height')], i.e. use the same helper that produces the token
name instead of a literal string; alternatively, if this variable intentionally
references Steps across components, add a clear comment above the line
explaining the cross-component dependency and why a literal is required. Ensure
you reference the same generation function used elsewhere (varName/genCssVar)
and update both the key and any related token lookups to keep naming consistent.
In @components/timeline/style/index.ts:
- Around line 133-141: Replace the hardcoded '12' and '/24' in genVerticalStyle
by introducing a design token (e.g., headSpanColumns with default 12) on the
ComponentToken (and a totalColumns token defaulting to 24 if one doesn't exist)
and update genVerticalStyle to reference those tokens via genCssVar/varRef
instead of literal numbers; specifically add headSpanColumns to the token type,
emit its CSS variable with genCssVar(antCls, 'timeline'), and compute the
percentage using the token-based variables (headSpanColumns / totalColumns) so
the layout is driven by design tokens rather than hardcoded values while keeping
existing symbols genVerticalStyle, TimelineToken, genCssVar, componentCls and
antCls.
🧹 Nitpick comments (1)
components/steps/style/status.ts (1)
45-61: CSS 变量默认值使用了硬编码颜色。变量定义中使用了
'#000'和'#fff'作为默认值。虽然这些值会被后续状态特定的样式覆盖（如 Wait、Process 等状态），但根据编码规范，应避免硬编码颜色值。建议使用设计令牌作为默认值，例如token.colorText或token.colorTextLightSolid。♻️ 建议的改进
// >>> text - [varName('item-title-color')]: '#000', - [varName('item-content-color')]: '#000', + [varName('item-title-color')]: colorText, + [varName('item-content-color')]: colorText, [varName('item-subtitle-color')]: varRef('item-content-color'), // >>> icon - [varName('item-icon-custom-color')]: '#000', - [varName('item-icon-bg-color')]: '#000', - [varName('item-icon-border-color')]: '#000', - [varName('item-icon-text-color')]: '#fff', + [varName('item-icon-custom-color')]: colorText, + [varName('item-icon-bg-color')]: colorText, + [varName('item-icon-border-color')]: colorText, + [varName('item-icon-text-color')]: colorTextLightSolid,
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (18)
components/steps/ProgressIcon.tsxcomponents/steps/index.tsxcomponents/steps/style/horizontal.tscomponents/steps/style/icon.tscomponents/steps/style/index.tscomponents/steps/style/inline.tscomponents/steps/style/label-placement.tscomponents/steps/style/nav.tscomponents/steps/style/panel.tscomponents/steps/style/progress-dot.tscomponents/steps/style/progress.tscomponents/steps/style/rtl.tscomponents/steps/style/small.tscomponents/steps/style/status.tscomponents/steps/style/util.tscomponents/steps/style/vertical.tscomponents/timeline/style/horizontal.tscomponents/timeline/style/index.ts
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Always use TypeScript with strict type checking
Never useanytype - define precise types instead
Use interfaces (not type aliases) for object structures
Export all public interface types
Prefer union types over enums, useas constfor constants
Use early returns to improve readability
Support tree shaking
Follow import order: React → dependencies → antd components → custom components → types → styles
Prefer antd built-in components over external dependencies
Pass all ESLint and TypeScript checks
No console errors or warnings
**/*.{ts,tsx}: Use TypeScript and React to develop, with function-based components and hooks instead of class components
Use early returns to improve code readability
Component names should use PascalCase
Property names should use camelCase
Use React.memo, useMemo, and useCallback appropriately to optimize performance
All components and functions must provide accurate type definitions; avoid usinganytype and use interfaces instead of type aliases for object structures
Component props should use interface definition with naming conventionComponentNameProps; define separate interfaces for component state likeComponentNameState
UseReact.ForwardRefRenderFunctionfor component ref types and explicitly define all callback function parameters and return values
Use generics appropriately to enhance type flexibility; use union types andas constinstead ofenum; rely on TypeScript's type inference and minimize type assertions
Internationalization: obtain locale configuration viauseLocalehook fromcomponents/locale/index.tsx; ensure new locale configurations have corresponding type definitions
Files:
components/steps/ProgressIcon.tsxcomponents/steps/style/panel.tscomponents/timeline/style/horizontal.tscomponents/steps/style/rtl.tscomponents/steps/style/label-placement.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/small.tscomponents/steps/style/nav.tscomponents/steps/style/inline.tscomponents/steps/style/progress.tscomponents/steps/style/util.tscomponents/steps/style/icon.tscomponents/steps/style/progress-dot.tscomponents/steps/index.tsxcomponents/steps/style/vertical.tscomponents/timeline/style/index.tscomponents/steps/style/index.ts
components/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/*.tsx: Component props interfaces should be namedComponentNameProps
Component ref types should useReact.ForwardRefRenderFunction
Use functional components with hooks exclusively (no class components)
Apply performance optimizations with React.memo, useMemo, useCallback appropriately
Support server-side rendering
Components must support ref forwarding with structure including nativeElement, focus, and other methods
Use PascalCase for component names
Use camelCase for props with specific patterns:default+PropNamefor defaults,forceRenderfor force rendering,openinstead ofvisiblefor panel state,show+PropNamefor display toggles,PropName+ablefor capabilities,dataSourcefor data source,disabledfor disabled state,extrafor additional content,iconfor icons,triggerfor triggers,classNamefor CSS classes
Useon+EventNamepattern for event handlers (e.g.,onClick,onChange)
Useon+SubComponentName+EventNamepattern for sub-component events
Use complete names, never abbreviations in prop naming
Optimize for minimal re-renders
UseuseLocalehook fromcomponents/locale/index.tsx
Support accessibility (WCAG 2.1 AA)
Files:
components/steps/ProgressIcon.tsxcomponents/steps/index.tsx
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
Files:
components/steps/ProgressIcon.tsxcomponents/steps/style/panel.tscomponents/timeline/style/horizontal.tscomponents/steps/style/rtl.tscomponents/steps/style/label-placement.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/small.tscomponents/steps/style/nav.tscomponents/steps/style/inline.tscomponents/steps/style/progress.tscomponents/steps/style/util.tscomponents/steps/style/icon.tscomponents/steps/style/progress-dot.tscomponents/steps/index.tsxcomponents/steps/style/vertical.tscomponents/timeline/style/index.tscomponents/steps/style/index.ts
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/steps/ProgressIcon.tsxcomponents/steps/style/panel.tscomponents/timeline/style/horizontal.tscomponents/steps/style/rtl.tscomponents/steps/style/label-placement.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/small.tscomponents/steps/style/nav.tscomponents/steps/style/inline.tscomponents/steps/style/progress.tscomponents/steps/style/util.tscomponents/steps/style/icon.tscomponents/steps/style/progress-dot.tscomponents/steps/index.tsxcomponents/steps/style/vertical.tscomponents/timeline/style/index.tscomponents/steps/style/index.ts
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/steps/ProgressIcon.tsxcomponents/steps/style/panel.tscomponents/timeline/style/horizontal.tscomponents/steps/style/rtl.tscomponents/steps/style/label-placement.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/small.tscomponents/steps/style/nav.tscomponents/steps/style/inline.tscomponents/steps/style/progress.tscomponents/steps/style/util.tscomponents/steps/style/icon.tscomponents/steps/style/progress-dot.tscomponents/steps/index.tsxcomponents/steps/style/vertical.tscomponents/timeline/style/index.tscomponents/steps/style/index.ts
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/*.tsx: Use @ant-design/cssinjs as the styling solution; place component styles instyle/directory with filenames followinggen[ComponentName]Stylenaming convention
Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties likemargin-inline-startinstead of directional properties
Use CSS transitions for simple animations and @rc-component/motion for complex animations; respect prefers-reduced-motion user preference
Follow WCAG 2.1 AA accessibility standards: ensure clear focus states, sufficient color contrast, avoid color-only information conveyance, support 200% page zoom, and avoid flickering animations
Files:
components/steps/ProgressIcon.tsxcomponents/steps/index.tsx
components/**/style/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/style/*.ts: Use@ant-design/cssinjsfor all styling
Generate styles with functions namedgen[ComponentName]Style
Use design tokens from the Ant Design token system
Support both light and dark themes
Use CSS logical properties for RTL support (e.g.,margin-inline-startinstead ofmargin-left)
Respectprefers-reduced-motionfor animations
Files:
components/steps/style/panel.tscomponents/timeline/style/horizontal.tscomponents/steps/style/rtl.tscomponents/steps/style/label-placement.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/small.tscomponents/steps/style/nav.tscomponents/steps/style/inline.tscomponents/steps/style/progress.tscomponents/steps/style/util.tscomponents/steps/style/icon.tscomponents/steps/style/progress-dot.tscomponents/steps/style/vertical.tscomponents/timeline/style/index.tscomponents/steps/style/index.ts
🧠 Learnings (18)
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Applied to files:
components/steps/ProgressIcon.tsxcomponents/steps/style/panel.tscomponents/timeline/style/horizontal.tscomponents/steps/style/rtl.tscomponents/steps/style/label-placement.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/small.tscomponents/steps/style/nav.tscomponents/steps/style/inline.tscomponents/steps/style/progress.tscomponents/steps/style/util.tscomponents/steps/style/icon.tscomponents/steps/style/progress-dot.tscomponents/steps/index.tsxcomponents/steps/style/vertical.tscomponents/timeline/style/index.tscomponents/steps/style/index.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.{ts,tsx} : Never hardcode colors, sizes, or spacing values
Applied to files:
components/steps/ProgressIcon.tsxcomponents/steps/style/panel.tscomponents/timeline/style/horizontal.tscomponents/steps/style/rtl.tscomponents/steps/style/label-placement.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/small.tscomponents/steps/style/nav.tscomponents/steps/style/inline.tscomponents/steps/style/progress.tscomponents/steps/style/util.tscomponents/steps/style/icon.tscomponents/steps/style/progress-dot.tscomponents/steps/index.tsxcomponents/steps/style/vertical.tscomponents/timeline/style/index.tscomponents/steps/style/index.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use `ant-design/cssinjs` for all styling
Applied to files:
components/steps/ProgressIcon.tsxcomponents/steps/style/panel.tscomponents/timeline/style/horizontal.tscomponents/steps/style/rtl.tscomponents/steps/style/label-placement.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/small.tscomponents/steps/style/nav.tscomponents/steps/style/inline.tscomponents/steps/style/progress.tscomponents/steps/style/util.tscomponents/steps/style/icon.tscomponents/steps/style/progress-dot.tscomponents/steps/index.tsxcomponents/steps/style/vertical.tscomponents/timeline/style/index.tscomponents/steps/style/index.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Generate styles with functions named `gen[ComponentName]Style`
Applied to files:
components/steps/ProgressIcon.tsxcomponents/steps/style/panel.tscomponents/timeline/style/horizontal.tscomponents/steps/style/rtl.tscomponents/steps/style/label-placement.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/small.tscomponents/steps/style/nav.tscomponents/steps/style/inline.tscomponents/steps/style/progress.tscomponents/steps/style/util.tscomponents/steps/style/icon.tscomponents/steps/style/progress-dot.tscomponents/steps/index.tsxcomponents/steps/style/vertical.tscomponents/timeline/style/index.tscomponents/steps/style/index.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token system
Applied to files:
components/steps/ProgressIcon.tsxcomponents/steps/style/panel.tscomponents/timeline/style/horizontal.tscomponents/steps/style/rtl.tscomponents/steps/style/label-placement.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/small.tscomponents/steps/style/nav.tscomponents/steps/style/inline.tscomponents/steps/style/progress.tscomponents/steps/style/util.tscomponents/steps/style/icon.tscomponents/steps/style/progress-dot.tscomponents/steps/index.tsxcomponents/steps/style/vertical.tscomponents/timeline/style/index.tscomponents/steps/style/index.ts
📚 Learning: 2025-11-13T02:52:08.942Z
Learnt from: meet-student
Repo: ant-design/ant-design PR: 55697
File: components/drawer/index.tsx:86-88
Timestamp: 2025-11-13T02:52:08.942Z
Learning: In Ant Design components (components/**/*.{ts,tsx}), always use `import useId from 'rc-util/lib/hooks/useId'` instead of `React.useId()` for generating unique IDs, to ensure compatibility with React 16-19. The rc-util hook automatically uses the native implementation in React 18+ and provides a fallback for older versions.
Applied to files:
components/steps/ProgressIcon.tsxcomponents/steps/index.tsxcomponents/steps/style/index.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS transitions for simple animations and rc-component/motion for complex animations; respect prefers-reduced-motion user preference
Applied to files:
components/steps/ProgressIcon.tsxcomponents/steps/style/nav.tscomponents/steps/style/progress.tscomponents/steps/style/progress-dot.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Support both light and dark themes
Applied to files:
components/steps/ProgressIcon.tsxcomponents/steps/style/panel.tscomponents/timeline/style/horizontal.tscomponents/steps/style/rtl.tscomponents/steps/style/label-placement.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/small.tscomponents/steps/style/nav.tscomponents/steps/style/inline.tscomponents/steps/style/progress.tscomponents/steps/style/icon.tscomponents/steps/style/progress-dot.tscomponents/steps/index.tsxcomponents/steps/style/vertical.tscomponents/timeline/style/index.tscomponents/steps/style/index.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use CSS logical properties for RTL support (e.g., `margin-inline-start` instead of `margin-left`)
Applied to files:
components/steps/ProgressIcon.tsxcomponents/steps/style/panel.tscomponents/timeline/style/horizontal.tscomponents/steps/style/rtl.tscomponents/steps/style/label-placement.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/small.tscomponents/steps/style/nav.tscomponents/steps/style/inline.tscomponents/steps/style/progress.tscomponents/steps/style/util.tscomponents/steps/style/icon.tscomponents/steps/style/progress-dot.tscomponents/steps/index.tsxcomponents/steps/style/vertical.tscomponents/timeline/style/index.tscomponents/steps/style/index.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties like `margin-inline-start` instead of directional properties
Applied to files:
components/steps/ProgressIcon.tsxcomponents/timeline/style/horizontal.tscomponents/steps/style/rtl.tscomponents/steps/style/label-placement.tscomponents/steps/style/small.tscomponents/steps/style/vertical.tscomponents/timeline/style/index.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use ant-design/cssinjs as the styling solution; place component styles in `style/` directory with filenames following `gen[ComponentName]Style` naming convention
Applied to files:
components/steps/style/panel.tscomponents/timeline/style/horizontal.tscomponents/steps/style/rtl.tscomponents/steps/style/label-placement.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/small.tscomponents/steps/style/nav.tscomponents/steps/style/inline.tscomponents/steps/style/progress.tscomponents/steps/style/util.tscomponents/steps/style/icon.tscomponents/steps/style/progress-dot.tscomponents/steps/index.tsxcomponents/steps/style/vertical.tscomponents/timeline/style/index.tscomponents/steps/style/index.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Respect `prefers-reduced-motion` for animations
Applied to files:
components/steps/style/panel.tscomponents/timeline/style/horizontal.tscomponents/steps/style/rtl.tscomponents/steps/style/label-placement.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/small.tscomponents/steps/style/nav.tscomponents/steps/style/inline.tscomponents/steps/style/progress.tscomponents/steps/style/util.tscomponents/steps/style/icon.tscomponents/steps/style/progress-dot.tscomponents/steps/index.tsxcomponents/steps/style/vertical.tscomponents/timeline/style/index.tscomponents/steps/style/index.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to **/*.{ts,tsx,css} : Maintain cross-browser compatibility
Applied to files:
components/steps/style/panel.tscomponents/timeline/style/horizontal.tscomponents/steps/style/rtl.tscomponents/steps/style/horizontal.tscomponents/steps/style/util.tscomponents/steps/style/icon.tscomponents/timeline/style/index.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Follow Ant Design design specification and adhere to the design token system throughout the project
Applied to files:
components/steps/style/status.tscomponents/steps/style/index.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.{ts,tsx} : Use generics appropriately to enhance type flexibility; use union types and `as const` instead of `enum`; rely on TypeScript's type inference and minimize type assertions
Applied to files:
components/steps/style/util.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Use `useLocale` hook from `components/locale/index.tsx`
Applied to files:
components/steps/index.tsxcomponents/steps/style/index.ts
📚 Learning: 2025-11-24T10:42:01.303Z
Learnt from: Wxh16144
Repo: ant-design/ant-design PR: 55810
File: .dumi/theme/common/VersionUpgrade/ChangeLog.tsx:69-71
Timestamp: 2025-11-24T10:42:01.303Z
Learning: In Ant Design's `.dumi/theme/` documentation and theme files, browser compatibility considerations are less strict than in the component library itself. Native APIs like ResizeObserver can be used directly without requiring polyfills or wrapper packages that are used in the main components.
Applied to files:
components/steps/index.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to **/*.{ts,tsx} : Follow import order: React → dependencies → antd components → custom components → types → styles
Applied to files:
components/steps/style/index.ts
🧬 Code graph analysis (14)
components/steps/ProgressIcon.tsx (1)
components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)
components/steps/style/panel.ts (2)
components/steps/style/index.ts (1)
StepsToken(92-94)components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)
components/steps/style/rtl.ts (2)
components/steps/style/index.ts (1)
StepsToken(92-94)components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)
components/steps/style/status.ts (1)
components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)
components/steps/style/horizontal.ts (2)
components/steps/style/index.ts (1)
StepsToken(92-94)components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)
components/steps/style/small.ts (2)
components/steps/style/index.ts (1)
StepsToken(92-94)components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)
components/steps/style/inline.ts (3)
components/steps/style/index.ts (1)
StepsToken(92-94)components/theme/internal.ts (1)
calc(28-28)components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)
components/steps/style/progress.ts (3)
components/steps/style/index.ts (1)
StepsToken(92-94)components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)components/theme/internal.ts (1)
calc(28-28)
components/steps/style/util.ts (2)
components/steps/style/index.ts (1)
StepsToken(92-94)components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)
components/steps/style/icon.ts (3)
components/style/index.tsx (1)
genIconStyle(145-152)components/steps/style/index.ts (1)
StepsToken(92-94)components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)
components/steps/style/progress-dot.ts (2)
components/steps/style/index.ts (1)
StepsToken(92-94)components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)
components/steps/index.tsx (1)
components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)
components/steps/style/vertical.ts (3)
components/steps/style/index.ts (1)
StepsToken(92-94)components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)components/theme/internal.ts (1)
calc(28-28)
components/timeline/style/index.ts (1)
components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (19)
- GitHub Check: Agent
- GitHub Check: CodeQL analysis (javascript-typescript)
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: build
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: test-node
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: lint
- GitHub Check: build preview
- GitHub Check: build
- GitHub Check: size
- GitHub Check: Analyze (javascript)
- GitHub Check: build
- GitHub Check: Cloudflare Pages: ant-design-next
🔇 Additional comments (23)
components/steps/style/small.ts (1)
5-31: 实现方向正确：用genCssVar统一生成 Steps CSS 变量名这里用
varName('...')在${componentCls}${componentCls}-small上集中定义变量，后续其它样式文件用varRef('...')读取会更一致，符合这次重构目标。基于仓库规范（style 使用 token + cssinjs）。components/steps/style/icon.ts (1)
5-40:icon-size/icon-border-width改为 varName/varRef：OK变量在
[componentCls]下定义、在${itemCls}-icon内用varRef读取，结构清晰且与本次“统一变量生成”一致。components/steps/style/progress-dot.ts (1)
6-61: Dot 模式变量化 + active 覆盖写法一致，translate3d改动也 OK
icon-size-active/icon-size的定义与 active 状态覆盖保持一致；translate3d(-50%, -50%, 0)也更稳。components/steps/ProgressIcon.tsx (1)
4-21: CSS 变量前缀和progress-radius定义已正确对齐验证确认：
- 所有
ProgressIcon调用方都正确传入了rootPrefixCls（index.tsx 第 294-300 行）progress-radius变量在样式文件中正确定义（style/progress.ts 第 57 行），使用varName('progress-radius')声明- 组件中
varRef('progress-radius')的调用与样式定义的 CSS 变量命名空间完全对齐无需修改。
components/steps/style/nav.ts (1)
6-79: 基础变量已确认正确定义，无需调整检查样式合成顺序：在
components/steps/style/index.ts中，genStatusStyle在第 223 行、genLegacyNavStyle在第 224 行被应用。由于status.ts中明确定义了item-content-color、item-icon-bg-color、item-icon-border-color、item-icon-text-color等所有基础变量，而 nav 样式在其之后执行，所以varRef()引用这些变量时，它们必定已在样式树中定义。该实现方式安全无虞。components/steps/style/rtl.ts (1)
6-41: 无需调整 -item-base-width变量已在 panel 样式中正确定义
item-base-width在panel.ts第 73 行已定义为 CSS 变量，该变量在.steps-panel级别注入。RTL 样式中.steps-rtl.steps-panel.steps-filled .steps-item选择器是.steps-panel的后代选择器，CSS 变量会通过级联自动继承。两个样式文件都使用同一 token 上下文，无需额外确认或防守。Likely an incorrect or invalid review comment.
components/steps/index.tsx (2)
292-301:ProgressIcon透传rootPrefixCls/percent的改动一致且可读性更好仅在
status === 'process' && mergedPercent !== undefined时包裹ProgressIcon，同时透传rootPrefixCls，与本 PR “用 genCssVar 生成变量前缀”的方向一致。
171-188: 无需修改 —items-offset的数值用法是正确的该变量用作 CSS
flex属性的值（见 style/inline.ts 第 24 行），而flex属性接受纯数字作为 flex-grow 系数。offset 是 number 类型，生成--steps-items-offset:0或--steps-items-offset:2这样的纯数字值完全符合 CSS 规范，不需要添加px单位。Likely an incorrect or invalid review comment.
components/steps/style/horizontal.ts (1)
7-27: 水平样式切换到genCssVar+translate3d没问题，变量引用更统一
horizontal-rail-margin由 varName 写入、varRef 读取的方式一致，减少了手写--steps-*的维护成本。components/steps/style/vertical.ts (1)
7-49: CSS 变量体系完整，genCssVar 替换方向正确已验证
varRef()引用的所有变量都在 Steps 样式体系中有定义写入点：
icon-size-max：label-placement.ts 定义heading-height：label-placement.ts 定义（水平和垂直布局分别处理）item-wrapper-padding-top：index.ts、inline.ts、progress.ts、label-placement.ts 多处定义rail-size：index.ts、inline.ts、progress-dot.ts 多处定义CSS 变量生成模式统一，无布局回退风险。该改动成功实现了主题前缀集中管理和 CSS 变量的规范化，降低了手写 CSS 变量名漏改的风险。
components/steps/style/index.ts (3)
7-7: 导入 genCssVar 符合项目重构模式。导入位置和顺序符合编码规范，与其他 Steps 样式模块保持一致。
96-108: CSS 变量生成逻辑正确实现。通过
genCssVar(antCls, 'steps')生成命名空间化的 CSS 变量名称和引用函数，所有变量定义使用设计令牌（如token.fontSizeLG、token.lineWidth），避免了硬编码值，符合 Ant Design 设计令牌系统规范。
138-151: varRef 引用与 varName 定义正确对应。
title-font-size、title-line-height、subtitle-font-size、subtitle-line-height的引用与上方定义一致，CSS 变量系统设置正确。components/steps/style/inline.ts (2)
8-13: 令牌提取和 CSS 变量生成正确。正确提取了
paddingXS、lineWidth、antCls、calc等令牌，并使用calc(paddingXS).add(lineWidth).equal()计算容器顶部内边距，符合 cssinjs 的计算模式。
16-45: 内联样式的 CSS 变量定义完整。为
items-offset、item-wrapper-padding-top、icon-size、title-font-size、rail-size等属性定义了生成的 CSS 变量，与基础样式模块中的变量系统保持一致。通过varRef('items-offset')引用变量的方式正确。components/steps/style/status.ts (2)
171-222: 状态样式正确使用设计令牌覆盖默认值。Wait、Process、Finish、Error 各状态的样式正确使用
colorTextDisabled、colorPrimary、colorError等设计令牌覆盖默认的 CSS 变量值，确保主题一致性。
224-329: Filled 和 Outlined 变体样式实现完整。两种变体的样式定义完整覆盖了所有状态（Wait、Process/Finish、Error）以及 Normal、Hover、Active 三种交互状态，CSS 变量引用方式一致。
components/timeline/style/horizontal.ts (2)
42-42: 使用 translate3d 优化渲染性能。将
translate替换为translate3d可以触发 GPU 加速，对于频繁的动画和变换操作有性能提升。这是一个合理的优化。Also applies to: 59-59, 69-69, 108-108
73-88: 交替布局位置样式正确使用 varRef。
placement-start和placement-end的bottom/top属性正确引用了生成的alternate-content-offset变量。components/steps/style/panel.ts (3)
24-26: 边框样式正确使用生成的 CSS 变量。
borderStyle通过varRef('panel-border-color')引用动态边框颜色，确保主题一致性。
65-73: 复杂计算链正确组合 calc 和 varRef。
panel-title-height和item-base-height的计算正确使用了 cssinjs 的calc链式调用配合varRef引用其他 CSS 变量，实现了动态尺寸计算。
167-181: Filled 变体的 clipPath 正确使用 varRef。
clipPath的polygon计算中正确使用varRef('item-base-width')引用动态宽度值，确保面板箭头形状随尺寸变化而调整。components/steps/style/progress.ts (1)
41-76: 进度图标 SVG 样式正确使用生成的 CSS 变量。
svg-size、icon-size-ptg-unitless、progress-radius等变量的定义和引用正确实现了动态尺寸计算。过渡动画使用motionDurationSlow令牌而非硬编码值，符合设计令牌规范。
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @components/steps/style/status.ts:
- Around line 45-65: The style file hardcodes colors ('#000', '#fff') for
several variables—replace those literals with Ant Design design tokens instead:
map '#000' uses to appropriate tokens like colorText (or colorTextSecondary for
subtitles) for varName('item-solid-line-color'), varName('item-title-color'),
varName('item-content-color'), varName('item-icon-custom-color'),
varName('item-icon-bg-color'), varName('item-icon-border-color'),
varName('item-icon-dot-color'), varName('item-text-hover-color') and map '#fff'
to colorTextLightSolid or colorBgContainer for varName('item-icon-text-color');
update any varRef usages (e.g., item-subtitle-color, item-icon-dot-bg-color,
item-icon-dot-border-color) to reference the token-based variables to avoid
remaining hardcoded values.
🧹 Nitpick comments (1)
components/steps/style/status.ts (1)
112-114: 🧹 移除空的样式规则此处的 CSS 规则块为空且仅包含一个注释，建议移除以保持代码整洁。如果是为未来扩展预留的，建议添加说明注释或在需要时再添加。
♻️ 建议的清理方案
// Active // >>> icon - [`${itemCls}-active ${itemCls}-icon`]: { - // - }, - // >>> text [`${itemCls}-active ${itemCls}-content`]: {
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
components/steps/__tests__/__snapshots__/demo-extend.test.ts.snapis excluded by!**/*.snapcomponents/steps/__tests__/__snapshots__/demo.test.ts.snapis excluded by!**/*.snapcomponents/steps/__tests__/__snapshots__/index.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (2)
components/steps/PanelArrow.tsxcomponents/steps/style/status.ts
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Always use TypeScript with strict type checking
Never useanytype - define precise types instead
Use interfaces (not type aliases) for object structures
Export all public interface types
Prefer union types over enums, useas constfor constants
Use early returns to improve readability
Support tree shaking
Follow import order: React → dependencies → antd components → custom components → types → styles
Prefer antd built-in components over external dependencies
Pass all ESLint and TypeScript checks
No console errors or warnings
**/*.{ts,tsx}: Use TypeScript and React to develop, with function-based components and hooks instead of class components
Use early returns to improve code readability
Component names should use PascalCase
Property names should use camelCase
Use React.memo, useMemo, and useCallback appropriately to optimize performance
All components and functions must provide accurate type definitions; avoid usinganytype and use interfaces instead of type aliases for object structures
Component props should use interface definition with naming conventionComponentNameProps; define separate interfaces for component state likeComponentNameState
UseReact.ForwardRefRenderFunctionfor component ref types and explicitly define all callback function parameters and return values
Use generics appropriately to enhance type flexibility; use union types andas constinstead ofenum; rely on TypeScript's type inference and minimize type assertions
Internationalization: obtain locale configuration viauseLocalehook fromcomponents/locale/index.tsx; ensure new locale configurations have corresponding type definitions
Files:
components/steps/PanelArrow.tsxcomponents/steps/style/status.ts
components/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/*.tsx: Component props interfaces should be namedComponentNameProps
Component ref types should useReact.ForwardRefRenderFunction
Use functional components with hooks exclusively (no class components)
Apply performance optimizations with React.memo, useMemo, useCallback appropriately
Support server-side rendering
Components must support ref forwarding with structure including nativeElement, focus, and other methods
Use PascalCase for component names
Use camelCase for props with specific patterns:default+PropNamefor defaults,forceRenderfor force rendering,openinstead ofvisiblefor panel state,show+PropNamefor display toggles,PropName+ablefor capabilities,dataSourcefor data source,disabledfor disabled state,extrafor additional content,iconfor icons,triggerfor triggers,classNamefor CSS classes
Useon+EventNamepattern for event handlers (e.g.,onClick,onChange)
Useon+SubComponentName+EventNamepattern for sub-component events
Use complete names, never abbreviations in prop naming
Optimize for minimal re-renders
UseuseLocalehook fromcomponents/locale/index.tsx
Support accessibility (WCAG 2.1 AA)
Files:
components/steps/PanelArrow.tsx
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
Files:
components/steps/PanelArrow.tsxcomponents/steps/style/status.ts
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/steps/PanelArrow.tsxcomponents/steps/style/status.ts
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/steps/PanelArrow.tsxcomponents/steps/style/status.ts
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/*.tsx: Use @ant-design/cssinjs as the styling solution; place component styles instyle/directory with filenames followinggen[ComponentName]Stylenaming convention
Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties likemargin-inline-startinstead of directional properties
Use CSS transitions for simple animations and @rc-component/motion for complex animations; respect prefers-reduced-motion user preference
Follow WCAG 2.1 AA accessibility standards: ensure clear focus states, sufficient color contrast, avoid color-only information conveyance, support 200% page zoom, and avoid flickering animations
Files:
components/steps/PanelArrow.tsx
components/**/style/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/style/*.ts: Use@ant-design/cssinjsfor all styling
Generate styles with functions namedgen[ComponentName]Style
Use design tokens from the Ant Design token system
Support both light and dark themes
Use CSS logical properties for RTL support (e.g.,margin-inline-startinstead ofmargin-left)
Respectprefers-reduced-motionfor animations
Files:
components/steps/style/status.ts
🧠 Learnings (19)
📓 Common learnings
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use ant-design/cssinjs as the styling solution; place component styles in `style/` directory with filenames following `gen[ComponentName]Style` naming convention
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use `ant-design/cssinjs` for all styling
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Generate styles with functions named `gen[ComponentName]Style`
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.{ts,tsx} : Never hardcode colors, sizes, or spacing values
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token system
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS transitions for simple animations and rc-component/motion for complex animations; respect prefers-reduced-motion user preference
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties like `margin-inline-start` instead of directional properties
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Support both light and dark themes
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to demo/*.tsx : Import order for demo code: React → dependencies → component library → custom components → types → styles; use function components and Hooks; 2-space indentation and camelCase naming
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Use camelCase for props with specific patterns: `default` + `PropName` for defaults, `forceRender` for force rendering, `open` instead of `visible` for panel state, `show` + `PropName` for display toggles, `PropName` + `able` for capabilities, `dataSource` for data source, `disabled` for disabled state, `extra` for additional content, `icon` for icons, `trigger` for triggers, `className` for CSS classes
Applied to files:
components/steps/PanelArrow.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Component ref types should use `React.ForwardRefRenderFunction`
Applied to files:
components/steps/PanelArrow.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.{ts,tsx} : Use `React.ForwardRefRenderFunction` for component ref types and explicitly define all callback function parameters and return values
Applied to files:
components/steps/PanelArrow.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Use functional components with hooks exclusively (no class components)
Applied to files:
components/steps/PanelArrow.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript and React to develop, with function-based components and hooks instead of class components
Applied to files:
components/steps/PanelArrow.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Optimize for minimal re-renders
Applied to files:
components/steps/PanelArrow.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to demo/*.tsx : Import order for demo code: React → dependencies → component library → custom components → types → styles; use function components and Hooks; 2-space indentation and camelCase naming
Applied to files:
components/steps/PanelArrow.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Generate styles with functions named `gen[ComponentName]Style`
Applied to files:
components/steps/style/status.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use `ant-design/cssinjs` for all styling
Applied to files:
components/steps/style/status.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Applied to files:
components/steps/style/status.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use ant-design/cssinjs as the styling solution; place component styles in `style/` directory with filenames following `gen[ComponentName]Style` naming convention
Applied to files:
components/steps/style/status.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token system
Applied to files:
components/steps/style/status.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use CSS logical properties for RTL support (e.g., `margin-inline-start` instead of `margin-left`)
Applied to files:
components/steps/style/status.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.{ts,tsx} : Never hardcode colors, sizes, or spacing values
Applied to files:
components/steps/style/status.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Support both light and dark themes
Applied to files:
components/steps/style/status.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Respect `prefers-reduced-motion` for animations
Applied to files:
components/steps/style/status.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS transitions for simple animations and rc-component/motion for complex animations; respect prefers-reduced-motion user preference
Applied to files:
components/steps/style/status.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Follow Ant Design design specification and adhere to the design token system throughout the project
Applied to files:
components/steps/style/status.ts
🧬 Code graph analysis (1)
components/steps/style/status.ts (1)
components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (10)
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: build
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: build preview
- GitHub Check: Cloudflare Pages: ant-design-next
🔇 Additional comments (3)
components/steps/PanelArrow.tsx (1)
7-22: 重构合理，代码改动符合项目规范。将组件从直接导出的函数声明改为使用
React.FC类型的常量声明，这是一个纯粹的风格统一性重构。改动保持了组件的原有功能，类型定义准确，并且符合项目的代码规范：
- TypeScript 类型定义清晰
- 使用函数式组件
- Props 接口命名遵循
ComponentNameProps约定- SVG 包含
<title>元素以支持无障碍访问这种模式与项目其他组件的重构保持一致。
components/steps/style/status.ts (2)
5-5: ✅ genCssVar 集成正确成功引入
genCssVar工具并正确调用以生成 CSS 变量名称和引用函数，重构方向符合项目规范。Also applies to: 31-31, 36-36
89-327: ✅ CSS 变量引用模式正确整体重构正确地使用了
varName()声明变量和varRef()引用变量的模式，实现了主题作用域的 CSS 变量系统。所有状态样式（wait、process、finish、error）以及变体样式（filled、outlined）都正确地覆盖了基础变量。新增的 token 属性（
colorErrorHover、colorErrorBgFilledHover、colorFillTertiary、colorErrorBg、colorPrimaryBgHover、colorPrimaryBg、lineType）均得到了合理使用。
Bundle ReportChanges will increase total bundle size by 8.14MB (210.83%) ⬆️
Affected Assets, Files, and Routes:view changes for bundle: antd.min-array-pushAssets Changed:
Files in
Files in
|
This comment has been minimized.
This comment has been minimized.
There was a problem hiding this comment.
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)
components/steps/style/progress.ts (1)
79-113: 选择器名称存在拼写错误，导致样式无法应用选择器
${componentCls}-with-progress11是一个拼写错误。组件实际应用的类名是${prefixCls}-with-progress（不含"11"），因此这个选择器下的所有样式都无法被应用，成为死代码。应将第 106 行的选择器修正为：
&${componentCls}-with-progress
🧹 Nitpick comments (3)
components/steps/index.tsx (1)
187-188: TODO 注释待处理：CSS 变量前缀需要统一所有样式文件中都有相同的 TODO 注释：
// TODO: change '_steps_' to 'steps'。建议在此 PR 或后续 PR 中统一处理此重命名，以避免技术债务积累。当前使用
_steps_会生成类似--ant-_steps_-items-offset的变量名，而最终期望是--ant-steps-items-offset。components/steps/style/status.ts (2)
45-61: 硬编码颜色值作为默认占位符此处使用
'#000'和'#fff'作为 CSS 变量的默认值。虽然这些值会被后续状态特定样式（wait、process、finish、error）覆盖，但根据编码规范，应避免硬编码颜色值。建议考虑使用设计令牌作为默认值，例如
colorText和colorTextLightSolid，以保持一致性并支持主题切换。♻️ 建议的修改
// Normal // >>> line - [varName('item-solid-line-color')]: '#000', + [varName('item-solid-line-color')]: colorText, // >>> text - [varName('item-title-color')]: '#000', - [varName('item-content-color')]: '#000', + [varName('item-title-color')]: colorText, + [varName('item-content-color')]: colorText, [varName('item-subtitle-color')]: varRef('item-content-color'), // >>> icon - [varName('item-icon-custom-color')]: '#000', - [varName('item-icon-bg-color')]: '#000', - [varName('item-icon-border-color')]: '#000', - [varName('item-icon-text-color')]: '#fff', + [varName('item-icon-custom-color')]: colorText, + [varName('item-icon-bg-color')]: colorBgContainer, + [varName('item-icon-border-color')]: colorText, + [varName('item-icon-text-color')]: colorTextLightSolid, // >>> dot - [varName('item-icon-dot-color')]: '#000', + [varName('item-icon-dot-color')]: colorText,
112-114: 空的选择器块
${itemCls}-active ${itemCls}-icon选择器内只有注释，没有实际样式规则。如果这是占位符，建议添加注释说明；如果不需要，应移除此空块。// Active // >>> icon - [`${itemCls}-active ${itemCls}-icon`]: { - // - }, + // Active icon styles are handled via CSS variables inheritance
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
components/steps/__tests__/__snapshots__/demo-extend.test.ts.snapis excluded by!**/*.snapcomponents/steps/__tests__/__snapshots__/demo.test.ts.snapis excluded by!**/*.snapcomponents/steps/__tests__/__snapshots__/index.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (18)
components/mentions/style/index.tscomponents/select/style/select-input-multiple.tscomponents/steps/ProgressIcon.tsxcomponents/steps/index.tsxcomponents/steps/style/horizontal.tscomponents/steps/style/icon.tscomponents/steps/style/index.tscomponents/steps/style/inline.tscomponents/steps/style/label-placement.tscomponents/steps/style/nav.tscomponents/steps/style/panel.tscomponents/steps/style/progress-dot.tscomponents/steps/style/progress.tscomponents/steps/style/rtl.tscomponents/steps/style/small.tscomponents/steps/style/status.tscomponents/steps/style/util.tscomponents/steps/style/vertical.ts
✅ Files skipped from review due to trivial changes (1)
- components/mentions/style/index.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- components/steps/style/progress-dot.ts
- components/steps/style/inline.ts
- components/steps/style/index.ts
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Always use TypeScript with strict type checking
Never useanytype - define precise types instead
Use interfaces (not type aliases) for object structures
Export all public interface types
Prefer union types over enums, useas constfor constants
Use early returns to improve readability
Support tree shaking
Follow import order: React → dependencies → antd components → custom components → types → styles
Prefer antd built-in components over external dependencies
Pass all ESLint and TypeScript checks
No console errors or warnings
**/*.{ts,tsx}: Use TypeScript and React to develop, with function-based components and hooks instead of class components
Use early returns to improve code readability
Component names should use PascalCase
Property names should use camelCase
Use React.memo, useMemo, and useCallback appropriately to optimize performance
All components and functions must provide accurate type definitions; avoid usinganytype and use interfaces instead of type aliases for object structures
Component props should use interface definition with naming conventionComponentNameProps; define separate interfaces for component state likeComponentNameState
UseReact.ForwardRefRenderFunctionfor component ref types and explicitly define all callback function parameters and return values
Use generics appropriately to enhance type flexibility; use union types andas constinstead ofenum; rely on TypeScript's type inference and minimize type assertions
Internationalization: obtain locale configuration viauseLocalehook fromcomponents/locale/index.tsx; ensure new locale configurations have corresponding type definitions
Files:
components/steps/ProgressIcon.tsxcomponents/steps/style/icon.tscomponents/select/style/select-input-multiple.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/panel.tscomponents/steps/style/nav.tscomponents/steps/style/util.tscomponents/steps/style/vertical.tscomponents/steps/index.tsxcomponents/steps/style/label-placement.tscomponents/steps/style/progress.tscomponents/steps/style/rtl.tscomponents/steps/style/small.ts
components/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/*.tsx: Component props interfaces should be namedComponentNameProps
Component ref types should useReact.ForwardRefRenderFunction
Use functional components with hooks exclusively (no class components)
Apply performance optimizations with React.memo, useMemo, useCallback appropriately
Support server-side rendering
Components must support ref forwarding with structure including nativeElement, focus, and other methods
Use PascalCase for component names
Use camelCase for props with specific patterns:default+PropNamefor defaults,forceRenderfor force rendering,openinstead ofvisiblefor panel state,show+PropNamefor display toggles,PropName+ablefor capabilities,dataSourcefor data source,disabledfor disabled state,extrafor additional content,iconfor icons,triggerfor triggers,classNamefor CSS classes
Useon+EventNamepattern for event handlers (e.g.,onClick,onChange)
Useon+SubComponentName+EventNamepattern for sub-component events
Use complete names, never abbreviations in prop naming
Optimize for minimal re-renders
UseuseLocalehook fromcomponents/locale/index.tsx
Support accessibility (WCAG 2.1 AA)
Files:
components/steps/ProgressIcon.tsxcomponents/steps/index.tsx
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
Files:
components/steps/ProgressIcon.tsxcomponents/steps/style/icon.tscomponents/select/style/select-input-multiple.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/panel.tscomponents/steps/style/nav.tscomponents/steps/style/util.tscomponents/steps/style/vertical.tscomponents/steps/index.tsxcomponents/steps/style/label-placement.tscomponents/steps/style/progress.tscomponents/steps/style/rtl.tscomponents/steps/style/small.ts
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/steps/ProgressIcon.tsxcomponents/steps/style/icon.tscomponents/select/style/select-input-multiple.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/panel.tscomponents/steps/style/nav.tscomponents/steps/style/util.tscomponents/steps/style/vertical.tscomponents/steps/index.tsxcomponents/steps/style/label-placement.tscomponents/steps/style/progress.tscomponents/steps/style/rtl.tscomponents/steps/style/small.ts
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/steps/ProgressIcon.tsxcomponents/steps/style/icon.tscomponents/select/style/select-input-multiple.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/panel.tscomponents/steps/style/nav.tscomponents/steps/style/util.tscomponents/steps/style/vertical.tscomponents/steps/index.tsxcomponents/steps/style/label-placement.tscomponents/steps/style/progress.tscomponents/steps/style/rtl.tscomponents/steps/style/small.ts
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/*.tsx: Use @ant-design/cssinjs as the styling solution; place component styles instyle/directory with filenames followinggen[ComponentName]Stylenaming convention
Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties likemargin-inline-startinstead of directional properties
Use CSS transitions for simple animations and @rc-component/motion for complex animations; respect prefers-reduced-motion user preference
Follow WCAG 2.1 AA accessibility standards: ensure clear focus states, sufficient color contrast, avoid color-only information conveyance, support 200% page zoom, and avoid flickering animations
Files:
components/steps/ProgressIcon.tsxcomponents/steps/index.tsx
components/**/style/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/style/*.ts: Use@ant-design/cssinjsfor all styling
Generate styles with functions namedgen[ComponentName]Style
Use design tokens from the Ant Design token system
Support both light and dark themes
Use CSS logical properties for RTL support (e.g.,margin-inline-startinstead ofmargin-left)
Respectprefers-reduced-motionfor animations
Files:
components/steps/style/icon.tscomponents/select/style/select-input-multiple.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/panel.tscomponents/steps/style/nav.tscomponents/steps/style/util.tscomponents/steps/style/vertical.tscomponents/steps/style/label-placement.tscomponents/steps/style/progress.tscomponents/steps/style/rtl.tscomponents/steps/style/small.ts
🧠 Learnings (22)
📓 Common learnings
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use `ant-design/cssinjs` for all styling
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use ant-design/cssinjs as the styling solution; place component styles in `style/` directory with filenames following `gen[ComponentName]Style` naming convention
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Generate styles with functions named `gen[ComponentName]Style`
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.{ts,tsx} : Never hardcode colors, sizes, or spacing values
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token system
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS transitions for simple animations and rc-component/motion for complex animations; respect prefers-reduced-motion user preference
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to demo/*.tsx : Import order for demo code: React → dependencies → component library → custom components → types → styles; use function components and Hooks; 2-space indentation and camelCase naming
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Applied to files:
components/steps/ProgressIcon.tsxcomponents/steps/style/icon.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/panel.tscomponents/steps/style/nav.tscomponents/steps/style/util.tscomponents/steps/style/vertical.tscomponents/steps/index.tsxcomponents/steps/style/label-placement.tscomponents/steps/style/progress.tscomponents/steps/style/rtl.tscomponents/steps/style/small.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use `ant-design/cssinjs` for all styling
Applied to files:
components/steps/ProgressIcon.tsxcomponents/steps/style/icon.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/panel.tscomponents/steps/style/nav.tscomponents/steps/style/util.tscomponents/steps/style/vertical.tscomponents/steps/index.tsxcomponents/steps/style/label-placement.tscomponents/steps/style/progress.tscomponents/steps/style/rtl.tscomponents/steps/style/small.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token system
Applied to files:
components/steps/ProgressIcon.tsxcomponents/steps/style/icon.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/panel.tscomponents/steps/style/nav.tscomponents/steps/style/util.tscomponents/steps/style/vertical.tscomponents/steps/index.tsxcomponents/steps/style/label-placement.tscomponents/steps/style/progress.tscomponents/steps/style/rtl.tscomponents/steps/style/small.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.{ts,tsx} : Never hardcode colors, sizes, or spacing values
Applied to files:
components/steps/ProgressIcon.tsxcomponents/steps/style/icon.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/panel.tscomponents/steps/style/nav.tscomponents/steps/style/util.tscomponents/steps/style/vertical.tscomponents/steps/index.tsxcomponents/steps/style/label-placement.tscomponents/steps/style/progress.tscomponents/steps/style/rtl.tscomponents/steps/style/small.ts
📚 Learning: 2025-11-13T02:52:08.942Z
Learnt from: meet-student
Repo: ant-design/ant-design PR: 55697
File: components/drawer/index.tsx:86-88
Timestamp: 2025-11-13T02:52:08.942Z
Learning: In Ant Design components (components/**/*.{ts,tsx}), always use `import useId from 'rc-util/lib/hooks/useId'` instead of `React.useId()` for generating unique IDs, to ensure compatibility with React 16-19. The rc-util hook automatically uses the native implementation in React 18+ and provides a fallback for older versions.
Applied to files:
components/steps/ProgressIcon.tsxcomponents/steps/index.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Generate styles with functions named `gen[ComponentName]Style`
Applied to files:
components/steps/ProgressIcon.tsxcomponents/steps/style/icon.tscomponents/select/style/select-input-multiple.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/panel.tscomponents/steps/style/nav.tscomponents/steps/style/util.tscomponents/steps/style/vertical.tscomponents/steps/index.tsxcomponents/steps/style/label-placement.tscomponents/steps/style/progress.tscomponents/steps/style/rtl.tscomponents/steps/style/small.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS transitions for simple animations and rc-component/motion for complex animations; respect prefers-reduced-motion user preference
Applied to files:
components/steps/ProgressIcon.tsxcomponents/steps/style/status.tscomponents/steps/style/progress.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use ant-design/cssinjs as the styling solution; place component styles in `style/` directory with filenames following `gen[ComponentName]Style` naming convention
Applied to files:
components/steps/ProgressIcon.tsxcomponents/steps/style/icon.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/panel.tscomponents/steps/style/nav.tscomponents/steps/style/util.tscomponents/steps/style/vertical.tscomponents/steps/index.tsxcomponents/steps/style/label-placement.tscomponents/steps/style/progress.tscomponents/steps/style/rtl.tscomponents/steps/style/small.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Support both light and dark themes
Applied to files:
components/steps/ProgressIcon.tsxcomponents/steps/style/icon.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/panel.tscomponents/steps/style/nav.tscomponents/steps/style/util.tscomponents/steps/style/vertical.tscomponents/steps/index.tsxcomponents/steps/style/label-placement.tscomponents/steps/style/progress.tscomponents/steps/style/rtl.tscomponents/steps/style/small.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Use camelCase for props with specific patterns: `default` + `PropName` for defaults, `forceRender` for force rendering, `open` instead of `visible` for panel state, `show` + `PropName` for display toggles, `PropName` + `able` for capabilities, `dataSource` for data source, `disabled` for disabled state, `extra` for additional content, `icon` for icons, `trigger` for triggers, `className` for CSS classes
Applied to files:
components/steps/ProgressIcon.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use CSS logical properties for RTL support (e.g., `margin-inline-start` instead of `margin-left`)
Applied to files:
components/steps/style/icon.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/panel.tscomponents/steps/style/nav.tscomponents/steps/style/util.tscomponents/steps/style/vertical.tscomponents/steps/index.tsxcomponents/steps/style/label-placement.tscomponents/steps/style/progress.tscomponents/steps/style/rtl.tscomponents/steps/style/small.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Respect `prefers-reduced-motion` for animations
Applied to files:
components/steps/style/icon.tscomponents/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/panel.tscomponents/steps/style/nav.tscomponents/steps/style/util.tscomponents/steps/style/vertical.tscomponents/steps/index.tsxcomponents/steps/style/label-placement.tscomponents/steps/style/progress.tscomponents/steps/style/rtl.tscomponents/steps/style/small.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to **/*.{ts,tsx,css} : Maintain cross-browser compatibility
Applied to files:
components/steps/style/icon.tscomponents/select/style/select-input-multiple.tscomponents/steps/style/horizontal.tscomponents/steps/style/util.tscomponents/steps/style/progress.tscomponents/steps/style/small.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Follow Ant Design design specification and adhere to the design token system throughout the project
Applied to files:
components/steps/style/status.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Follow WCAG 2.1 AA accessibility standards: ensure clear focus states, sufficient color contrast, avoid color-only information conveyance, support 200% page zoom, and avoid flickering animations
Applied to files:
components/steps/style/status.tscomponents/steps/style/label-placement.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties like `margin-inline-start` instead of directional properties
Applied to files:
components/steps/style/status.tscomponents/steps/style/horizontal.tscomponents/steps/style/panel.tscomponents/steps/style/util.tscomponents/steps/style/vertical.tscomponents/steps/style/label-placement.tscomponents/steps/style/rtl.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to CHANGELOG.*.md : CHANGELOG format: `Component: 📌emoji Description [#PR](link) [contributor]`; use code backticks for all property names, method names, APIs, and aria/role attributes; maintain space between Chinese/English and numbers/links/usernames
Applied to files:
components/steps/style/status.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Use `useLocale` hook from `components/locale/index.tsx`
Applied to files:
components/steps/index.tsx
📚 Learning: 2025-11-24T10:42:01.303Z
Learnt from: Wxh16144
Repo: ant-design/ant-design PR: 55810
File: .dumi/theme/common/VersionUpgrade/ChangeLog.tsx:69-71
Timestamp: 2025-11-24T10:42:01.303Z
Learning: In Ant Design's `.dumi/theme/` documentation and theme files, browser compatibility considerations are less strict than in the component library itself. Native APIs like ResizeObserver can be used directly without requiring polyfills or wrapper packages that are used in the main components.
Applied to files:
components/steps/index.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Support accessibility (WCAG 2.1 AA)
Applied to files:
components/steps/style/label-placement.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.md : FAQ section headers must prefix anchor IDs with `faq-`; ensure same anchor IDs for corresponding Chinese and English headers to maintain consistency across language switches
Applied to files:
components/steps/style/label-placement.ts
🧬 Code graph analysis (9)
components/steps/style/icon.ts (3)
components/style/index.tsx (1)
genIconStyle(145-152)components/steps/style/index.ts (1)
StepsToken(92-94)components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)
components/steps/style/horizontal.ts (2)
components/steps/style/index.ts (1)
StepsToken(92-94)components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)
components/steps/style/panel.ts (1)
components/steps/style/index.ts (1)
StepsToken(92-94)
components/steps/style/nav.ts (2)
components/steps/style/index.ts (1)
StepsToken(92-94)components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)
components/steps/style/vertical.ts (2)
components/steps/style/index.ts (1)
StepsToken(92-94)components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)
components/steps/index.tsx (1)
components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)
components/steps/style/label-placement.ts (3)
components/steps/style/index.ts (1)
StepsToken(92-94)components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)components/theme/internal.ts (1)
calc(28-28)
components/steps/style/progress.ts (2)
components/steps/style/index.ts (1)
StepsToken(92-94)components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)
components/steps/style/rtl.ts (2)
components/steps/style/index.ts (1)
StepsToken(92-94)components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (17)
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: build
- GitHub Check: test-node
- GitHub Check: lint
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: build preview
- GitHub Check: size
- GitHub Check: build
- GitHub Check: Analyze (javascript)
- GitHub Check: build
- GitHub Check: Cloudflare Pages: ant-design-next
🔇 Additional comments (16)
components/select/style/select-input-multiple.ts (1)
137-138: TODO 注释更新已确认。注释文本的微小更新是合理的。注意到第 138 行仍然使用硬编码的
var(--select-input-width, 0)，与 TODO 描述一致。建议在后续 PR 中将其迁移为varRef('input-width')以保持与文件中其他 CSS 变量的一致性。components/steps/ProgressIcon.tsx (1)
12-20: 组件重构正确，符合 React.FC 模式。使用
React.PropsWithChildren并通过genCssVar生成动态 CSS 变量引用的方式是正确的。代码结构清晰，与其他样式文件中的 genCssVar 用法保持一致。components/steps/style/util.ts (1)
14-49: 重构正确，genCssVar 集成无问题。将函数声明转换为箭头函数导出，并使用
varRef('icon-size')替换硬编码的 CSS 变量引用，与其他样式文件的重构模式保持一致。calc()链式调用与动态变量引用的结合正确无误。components/steps/style/small.ts (1)
21-31: CSS 变量定义正确。正确使用
varName生成 CSS 变量属性名称。此文件定义变量而非引用变量，因此只解构varName是合理的。变量命名（如icon-size、title-font-size等）语义清晰。components/steps/style/rtl.ts (1)
13-41: RTL 样式重构正确。
varRef('item-base-width')正确替换了clipPath计算中的静态 CSS 变量引用。RTL 方向支持保持完整，符合编码规范中关于 CSS 逻辑属性的要求。components/steps/style/horizontal.ts (2)
17-18: 计算型 CSS 变量定义正确。使用
varName定义horizontal-rail-margin变量，其值通过varRef引用其他变量进行calc()计算。这种模式允许样式在运行时动态响应主题变化。
26-26:translate3d替换translateY是合理的优化。使用
translate3d(0, -50%, 0)可以触发 GPU 加速，对动画性能有轻微提升。这是一个良好的实践。components/steps/style/icon.ts (1)
20-44: 图标样式 CSS 变量化实现正确。同时使用
varName定义变量和varRef引用变量，确保图标尺寸（width、height、lineHeight、borderRadius）和边框宽度都能响应主题变化。实现方式与 Ant Design 设计令牌系统的最佳实践一致。components/steps/style/nav.ts (1)
74-79: 导航激活状态样式重构正确。使用
varName定义激活状态变量（如item-content-active-color），并通过varRef引用基础状态变量（如item-content-color）。这种模式确保激活状态样式能够继承并响应主题系统的颜色变化，符合设计令牌的使用规范。components/steps/index.tsx (1)
294-300: LGTM!
rootPrefixCls正确传递给ProgressIcon组件，确保了 CSS 变量命名的一致性。这与 PR 中其他样式文件的 genCssVar 重构模式保持一致。components/steps/style/vertical.ts (1)
7-53: LGTM!垂直布局样式正确地迁移到了 genCssVar 模式：
- 使用设计令牌（
marginXXS、paddingSM、controlHeight）替代硬编码值- 使用 CSS 逻辑属性（
marginInlineStart、insetInlineStart、borderInlineStartWidth）支持 RTLvarRef正确引用动态 CSS 变量进行尺寸和偏移计算components/steps/style/panel.ts (1)
8-76: LGTM!面板样式重构实现良好：
- 正确使用
varName定义 CSS 变量（如panel-padding、panel-bg-color、item-base-height等）- 正确使用
varRef引用已定义的变量- 使用 CSS 逻辑属性支持 RTL（
borderInlineStart、borderStartStartRadius等）- 所有颜色和尺寸值均来自设计令牌系统
components/steps/style/progress.ts (1)
41-76: LGTM!进度图标样式正确使用了 genCssVar 模式：
varName定义 CSS 变量（svg-size、icon-size-ptg-unitless、progress-radius）varRef引用变量进行尺寸和位置计算- 过渡动画使用
motionDurationSlow令牌components/steps/style/label-placement.ts (3)
29-30: varRef 回退值用法正确
varRef('icon-size-active', varRef('icon-size'))正确使用了带回退值的变量引用，确保当icon-size-active未定义时回退到icon-size。这是一个良好的防御性编码实践。
99-104: LGTM!水平方向轨道样式正确设置：
item-wrapper-padding-top初始化为'0px'- 使用
varRef引用title-horizontal-rail-margin进行间距计算- 保持了与其他样式模块的一致性
144-149: LGTM!垂直标题放置时的轨道定位使用了复杂的 calc 表达式与 varRef 结合，正确计算了宽度和内联起始位置。CSS 逻辑属性
insetInlineStart确保了 RTL 支持。
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #56562 +/- ##
===========================================
Coverage 100.00% 100.00%
===========================================
Files 808 805 -3
Lines 18387 14903 -3484
Branches 5280 3919 -1361
===========================================
- Hits 18387 14903 -3484 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Fix all issues with AI agents
In @components/timeline/Timeline.tsx:
- Around line 129-138: genCssVar is being called with rootPrefixCls in
Timeline.tsx while the style files derive the prefix from token.antCls ('.ant'),
causing inconsistent parameter sources even though both produce the same final
CSS variable; update Timeline.tsx to derive the prefix the same way the styles
do (use the same token/source used in timeline/style/index.ts) and call
genCssVar with that unified prefix instead of rootPrefixCls (refer to the
genCssVar and rootPrefixCls identifiers and align them with token.antCls usage);
additionally, address the TODOs that use the '_steps_' prefix by renaming those
occurrences to 'steps' across timeline/style/index.ts, useItems.tsx and Steps
(search for the '_steps_' literal and replace with 'steps') so all components
use the same prefix convention.
- Around line 250-258: The current truthy check (if (titleSpan && mergedMode !==
'alternate')) skips valid numeric 0; change it to an explicit null/undefined
check (if (titleSpan !== undefined && titleSpan !== null && mergedMode !==
'alternate')) so titleSpan = 0 is handled. When assigning CSS custom properties
on stepStyle using stepStyle[varName(...)] = ..., tighten the typing by
asserting stepStyle as React.CSSProperties & Record<string, any> or using a type
assertion on the index (e.g., (stepStyle as any)[varName(...)] = ...) to satisfy
TypeScript while preserving strict types for other properties; keep references
to stepStyle, titleSpan, mergedMode, and varName in your edits.
In @components/timeline/useItems.tsx:
- Around line 21-25: The current parseItems uses React.ReactElement<any> which
violates the "never use any" rule and lets non-element children slip through;
update parseItems to first check children with React.isValidElement to filter
only React elements, then map those elements' props casting to
Partial<TimelineItemType> (e.g., ({ ...element.props } as
Partial<TimelineItemType>)) before normalizing to TimelineItemType, and ensure
the Array.isArray(items) branch stays unchanged; reference parseItems, children,
items, toArray, TimelineItemType and use React.isValidElement for the safer
narrowing and proper typing.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
components/config-provider/__tests__/__snapshots__/components.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (3)
components/steps/style/inline.tscomponents/timeline/Timeline.tsxcomponents/timeline/useItems.tsx
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Always use TypeScript with strict type checking
Never useanytype - define precise types instead
Use interfaces (not type aliases) for object structures
Export all public interface types
Prefer union types over enums, useas constfor constants
Use early returns to improve readability
Support tree shaking
Follow import order: React → dependencies → antd components → custom components → types → styles
Prefer antd built-in components over external dependencies
Pass all ESLint and TypeScript checks
No console errors or warnings
**/*.{ts,tsx}: Use TypeScript and React to develop, with function-based components and hooks instead of class components
Use early returns to improve code readability
Component names should use PascalCase
Property names should use camelCase
Use React.memo, useMemo, and useCallback appropriately to optimize performance
All components and functions must provide accurate type definitions; avoid usinganytype and use interfaces instead of type aliases for object structures
Component props should use interface definition with naming conventionComponentNameProps; define separate interfaces for component state likeComponentNameState
UseReact.ForwardRefRenderFunctionfor component ref types and explicitly define all callback function parameters and return values
Use generics appropriately to enhance type flexibility; use union types andas constinstead ofenum; rely on TypeScript's type inference and minimize type assertions
Internationalization: obtain locale configuration viauseLocalehook fromcomponents/locale/index.tsx; ensure new locale configurations have corresponding type definitions
Files:
components/steps/style/inline.tscomponents/timeline/useItems.tsxcomponents/timeline/Timeline.tsx
components/**/style/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/style/*.ts: Use@ant-design/cssinjsfor all styling
Generate styles with functions namedgen[ComponentName]Style
Use design tokens from the Ant Design token system
Support both light and dark themes
Use CSS logical properties for RTL support (e.g.,margin-inline-startinstead ofmargin-left)
Respectprefers-reduced-motionfor animations
Files:
components/steps/style/inline.ts
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
Files:
components/steps/style/inline.tscomponents/timeline/useItems.tsxcomponents/timeline/Timeline.tsx
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/steps/style/inline.tscomponents/timeline/useItems.tsxcomponents/timeline/Timeline.tsx
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/steps/style/inline.tscomponents/timeline/useItems.tsxcomponents/timeline/Timeline.tsx
components/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/*.tsx: Component props interfaces should be namedComponentNameProps
Component ref types should useReact.ForwardRefRenderFunction
Use functional components with hooks exclusively (no class components)
Apply performance optimizations with React.memo, useMemo, useCallback appropriately
Support server-side rendering
Components must support ref forwarding with structure including nativeElement, focus, and other methods
Use PascalCase for component names
Use camelCase for props with specific patterns:default+PropNamefor defaults,forceRenderfor force rendering,openinstead ofvisiblefor panel state,show+PropNamefor display toggles,PropName+ablefor capabilities,dataSourcefor data source,disabledfor disabled state,extrafor additional content,iconfor icons,triggerfor triggers,classNamefor CSS classes
Useon+EventNamepattern for event handlers (e.g.,onClick,onChange)
Useon+SubComponentName+EventNamepattern for sub-component events
Use complete names, never abbreviations in prop naming
Optimize for minimal re-renders
UseuseLocalehook fromcomponents/locale/index.tsx
Support accessibility (WCAG 2.1 AA)
Files:
components/timeline/useItems.tsxcomponents/timeline/Timeline.tsx
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/*.tsx: Use @ant-design/cssinjs as the styling solution; place component styles instyle/directory with filenames followinggen[ComponentName]Stylenaming convention
Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties likemargin-inline-startinstead of directional properties
Use CSS transitions for simple animations and @rc-component/motion for complex animations; respect prefers-reduced-motion user preference
Follow WCAG 2.1 AA accessibility standards: ensure clear focus states, sufficient color contrast, avoid color-only information conveyance, support 200% page zoom, and avoid flickering animations
Files:
components/timeline/useItems.tsxcomponents/timeline/Timeline.tsx
🧠 Learnings (19)
📓 Common learnings
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use `ant-design/cssinjs` for all styling
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use ant-design/cssinjs as the styling solution; place component styles in `style/` directory with filenames following `gen[ComponentName]Style` naming convention
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS transitions for simple animations and rc-component/motion for complex animations; respect prefers-reduced-motion user preference
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.{ts,tsx} : Never hardcode colors, sizes, or spacing values
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Generate styles with functions named `gen[ComponentName]Style`
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token system
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties like `margin-inline-start` instead of directional properties
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use CSS logical properties for RTL support (e.g., `margin-inline-start` instead of `margin-left`)
Learnt from: meet-student
Repo: ant-design/ant-design PR: 55697
File: components/drawer/index.tsx:86-88
Timestamp: 2025-11-13T02:52:08.942Z
Learning: In Ant Design components (components/**/*.{ts,tsx}), always use `import useId from 'rc-util/lib/hooks/useId'` instead of `React.useId()` for generating unique IDs, to ensure compatibility with React 16-19. The rc-util hook automatically uses the native implementation in React 18+ and provides a fallback for older versions.
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Generate styles with functions named `gen[ComponentName]Style`
Applied to files:
components/steps/style/inline.tscomponents/timeline/useItems.tsxcomponents/timeline/Timeline.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use `ant-design/cssinjs` for all styling
Applied to files:
components/steps/style/inline.tscomponents/timeline/Timeline.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use CSS logical properties for RTL support (e.g., `margin-inline-start` instead of `margin-left`)
Applied to files:
components/steps/style/inline.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use ant-design/cssinjs as the styling solution; place component styles in `style/` directory with filenames following `gen[ComponentName]Style` naming convention
Applied to files:
components/steps/style/inline.tscomponents/timeline/Timeline.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.{ts,tsx} : Never hardcode colors, sizes, or spacing values
Applied to files:
components/steps/style/inline.tscomponents/timeline/Timeline.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Applied to files:
components/steps/style/inline.tscomponents/timeline/useItems.tsxcomponents/timeline/Timeline.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token system
Applied to files:
components/steps/style/inline.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Support both light and dark themes
Applied to files:
components/steps/style/inline.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Respect `prefers-reduced-motion` for animations
Applied to files:
components/steps/style/inline.ts
📚 Learning: 2025-11-13T02:52:08.942Z
Learnt from: meet-student
Repo: ant-design/ant-design PR: 55697
File: components/drawer/index.tsx:86-88
Timestamp: 2025-11-13T02:52:08.942Z
Learning: In Ant Design components (components/**/*.{ts,tsx}), always use `import useId from 'rc-util/lib/hooks/useId'` instead of `React.useId()` for generating unique IDs, to ensure compatibility with React 16-19. The rc-util hook automatically uses the native implementation in React 18+ and provides a fallback for older versions.
Applied to files:
components/timeline/useItems.tsxcomponents/timeline/Timeline.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Apply performance optimizations with React.memo, useMemo, useCallback appropriately
Applied to files:
components/timeline/useItems.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Use `useLocale` hook from `components/locale/index.tsx`
Applied to files:
components/timeline/useItems.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.{ts,tsx} : Use React.memo, useMemo, and useCallback appropriately to optimize performance
Applied to files:
components/timeline/useItems.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to demo/*.tsx : Import order for demo code: React → dependencies → component library → custom components → types → styles; use function components and Hooks; 2-space indentation and camelCase naming
Applied to files:
components/timeline/useItems.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Use functional components with hooks exclusively (no class components)
Applied to files:
components/timeline/useItems.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Optimize for minimal re-renders
Applied to files:
components/timeline/useItems.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript and React to develop, with function-based components and hooks instead of class components
Applied to files:
components/timeline/useItems.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.{ts,tsx} : Use generics appropriately to enhance type flexibility; use union types and `as const` instead of `enum`; rely on TypeScript's type inference and minimize type assertions
Applied to files:
components/timeline/useItems.tsx
🧬 Code graph analysis (2)
components/steps/style/inline.ts (3)
components/steps/style/index.ts (1)
StepsToken(92-94)components/theme/internal.ts (1)
calc(28-28)components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)
components/timeline/Timeline.tsx (1)
components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (17)
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: test-node
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: build
- GitHub Check: build preview
- GitHub Check: lint
- GitHub Check: size
- GitHub Check: build
- GitHub Check: Analyze (javascript)
- GitHub Check: build
- GitHub Check: Cloudflare Pages: ant-design-next
🔇 Additional comments (2)
components/steps/style/inline.ts (2)
5-13: LGTM！成功迁移到 genCssVar 模式。代码正确地引入并使用了
genCssVar工具函数来动态生成 CSS 变量名称和引用函数，符合本次重构的目标。第 13 行的 TODO 注释清晰地记录了未来的优化方向（将'_steps_'改为'steps'），这是有意为之的技术债务标记。基于 retrieved learnings，此实现正确使用了
@ant-design/cssinjs作为样式解决方案，并遵循了组件样式的命名约定。
17-45: CSS 变量定义和引用的重构实现正确。所有之前硬编码的 CSS 变量（如
--steps-items-offset）都已成功迁移为通过varName()动态生成的变量名，并使用varRef()进行引用。这种模式提供了更好的主题作用域隔离和类型安全性。特别值得注意的是：
- 变量定义使用
varName('property-name')（如 Line 17）- 变量引用使用
varRef('property-name')（如 Line 24）- 继续使用设计令牌（
token.fontSizeSM、token.colorTextSecondary等），未引入硬编码值基于 coding guidelines，此实现正确使用了 Ant Design 令牌系统的设计令牌，避免了硬编码颜色、尺寸或间距值。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
components/timeline/Timeline.tsx (1)
251-259: titleSpan 的条件逻辑可简化。当前逻辑对
number类型额外检查!Number.isNaN(titleSpan)，但isNonNullable已经排除了null和undefined。如果用户传入NaN（一个合法的 number 值），当前行为是将其视为字符串类型处理，这可能不是预期行为。建议明确处理
NaN的情况，或在文档中说明titleSpan不支持NaN值。♻️ 可选的简化建议
if (isNonNullable(titleSpan) && mergedMode !== 'alternate') { - if (typeof titleSpan === 'number' && !Number.isNaN(titleSpan)) { + if (typeof titleSpan === 'number') { + // NaN 值会被忽略，CSS 会使用默认值 stepStyle[varName('head-span')] = titleSpan; } else { stepStyle[varName('head-span-ptg')] = titleSpan; } }components/timeline/useItems.tsx (2)
9-21: TODO 注释需要跟进处理。Line 20 的 TODO 注释
// TODO: change '_steps_' to 'steps'表明这是临时实现。_steps_带下划线的命名不符合常规 CSS 变量命名约定，会生成类似--ant-_steps_-item-icon-dot-color的变量名。建议在后续 PR 中解决此技术债务，或者提供保留当前命名的原因说明。
是否需要我创建一个 issue 来跟踪这个 TODO 项？
23-27: 避免使用any类型。
React.ReactElement<any>中的any类型违反了编码规范。建议使用更精确的类型定义。♻️ 建议的类型修复
const parseItems = React.useMemo<TimelineItemType[]>(() => { return Array.isArray(items) ? items - : toArray(children).map((ele: React.ReactElement<any>) => ({ ...ele.props })); + : toArray(children).map((ele: React.ReactElement<TimelineItemType>) => ({ ...ele.props })); }, [items, children]);根据编码规范，应避免使用
any类型，改用精确的类型定义。
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snapis excluded by!**/*.snapcomponents/timeline/__tests__/__snapshots__/demo.test.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (2)
components/timeline/Timeline.tsxcomponents/timeline/useItems.tsx
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Always use TypeScript with strict type checking
Never useanytype - define precise types instead
Use interfaces (not type aliases) for object structures
Export all public interface types
Prefer union types over enums, useas constfor constants
Use early returns to improve readability
Support tree shaking
Follow import order: React → dependencies → antd components → custom components → types → styles
Prefer antd built-in components over external dependencies
Pass all ESLint and TypeScript checks
No console errors or warnings
**/*.{ts,tsx}: Use TypeScript and React to develop, with function-based components and hooks instead of class components
Use early returns to improve code readability
Component names should use PascalCase
Property names should use camelCase
Use React.memo, useMemo, and useCallback appropriately to optimize performance
All components and functions must provide accurate type definitions; avoid usinganytype and use interfaces instead of type aliases for object structures
Component props should use interface definition with naming conventionComponentNameProps; define separate interfaces for component state likeComponentNameState
UseReact.ForwardRefRenderFunctionfor component ref types and explicitly define all callback function parameters and return values
Use generics appropriately to enhance type flexibility; use union types andas constinstead ofenum; rely on TypeScript's type inference and minimize type assertions
Internationalization: obtain locale configuration viauseLocalehook fromcomponents/locale/index.tsx; ensure new locale configurations have corresponding type definitions
Files:
components/timeline/Timeline.tsxcomponents/timeline/useItems.tsx
components/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/*.tsx: Component props interfaces should be namedComponentNameProps
Component ref types should useReact.ForwardRefRenderFunction
Use functional components with hooks exclusively (no class components)
Apply performance optimizations with React.memo, useMemo, useCallback appropriately
Support server-side rendering
Components must support ref forwarding with structure including nativeElement, focus, and other methods
Use PascalCase for component names
Use camelCase for props with specific patterns:default+PropNamefor defaults,forceRenderfor force rendering,openinstead ofvisiblefor panel state,show+PropNamefor display toggles,PropName+ablefor capabilities,dataSourcefor data source,disabledfor disabled state,extrafor additional content,iconfor icons,triggerfor triggers,classNamefor CSS classes
Useon+EventNamepattern for event handlers (e.g.,onClick,onChange)
Useon+SubComponentName+EventNamepattern for sub-component events
Use complete names, never abbreviations in prop naming
Optimize for minimal re-renders
UseuseLocalehook fromcomponents/locale/index.tsx
Support accessibility (WCAG 2.1 AA)
Files:
components/timeline/Timeline.tsxcomponents/timeline/useItems.tsx
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
Files:
components/timeline/Timeline.tsxcomponents/timeline/useItems.tsx
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/timeline/Timeline.tsxcomponents/timeline/useItems.tsx
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/timeline/Timeline.tsxcomponents/timeline/useItems.tsx
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/*.tsx: Use @ant-design/cssinjs as the styling solution; place component styles instyle/directory with filenames followinggen[ComponentName]Stylenaming convention
Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties likemargin-inline-startinstead of directional properties
Use CSS transitions for simple animations and @rc-component/motion for complex animations; respect prefers-reduced-motion user preference
Follow WCAG 2.1 AA accessibility standards: ensure clear focus states, sufficient color contrast, avoid color-only information conveyance, support 200% page zoom, and avoid flickering animations
Files:
components/timeline/Timeline.tsxcomponents/timeline/useItems.tsx
🧠 Learnings (24)
📓 Common learnings
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use ant-design/cssinjs as the styling solution; place component styles in `style/` directory with filenames following `gen[ComponentName]Style` naming convention
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use `ant-design/cssinjs` for all styling
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS transitions for simple animations and rc-component/motion for complex animations; respect prefers-reduced-motion user preference
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Generate styles with functions named `gen[ComponentName]Style`
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.{ts,tsx} : Never hardcode colors, sizes, or spacing values
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to demo/*.tsx : Import order for demo code: React → dependencies → component library → custom components → types → styles; use function components and Hooks; 2-space indentation and camelCase naming
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties like `margin-inline-start` instead of directional properties
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript and React to develop, with function-based components and hooks instead of class components
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use CSS logical properties for RTL support (e.g., `margin-inline-start` instead of `margin-left`)
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Applied to files:
components/timeline/Timeline.tsxcomponents/timeline/useItems.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.{ts,tsx} : Never hardcode colors, sizes, or spacing values
Applied to files:
components/timeline/Timeline.tsxcomponents/timeline/useItems.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to demo/*.tsx : Import order for demo code: React → dependencies → component library → custom components → types → styles; use function components and Hooks; 2-space indentation and camelCase naming
Applied to files:
components/timeline/Timeline.tsxcomponents/timeline/useItems.tsx
📚 Learning: 2025-11-13T02:52:08.942Z
Learnt from: meet-student
Repo: ant-design/ant-design PR: 55697
File: components/drawer/index.tsx:86-88
Timestamp: 2025-11-13T02:52:08.942Z
Learning: In Ant Design components (components/**/*.{ts,tsx}), always use `import useId from 'rc-util/lib/hooks/useId'` instead of `React.useId()` for generating unique IDs, to ensure compatibility with React 16-19. The rc-util hook automatically uses the native implementation in React 18+ and provides a fallback for older versions.
Applied to files:
components/timeline/Timeline.tsxcomponents/timeline/useItems.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use ant-design/cssinjs as the styling solution; place component styles in `style/` directory with filenames following `gen[ComponentName]Style` naming convention
Applied to files:
components/timeline/Timeline.tsxcomponents/timeline/useItems.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token system
Applied to files:
components/timeline/Timeline.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Generate styles with functions named `gen[ComponentName]Style`
Applied to files:
components/timeline/Timeline.tsxcomponents/timeline/useItems.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use `ant-design/cssinjs` for all styling
Applied to files:
components/timeline/Timeline.tsxcomponents/timeline/useItems.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties like `margin-inline-start` instead of directional properties
Applied to files:
components/timeline/Timeline.tsxcomponents/timeline/useItems.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to **/*.{ts,tsx,css} : Maintain cross-browser compatibility
Applied to files:
components/timeline/Timeline.tsxcomponents/timeline/useItems.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Follow WCAG 2.1 AA accessibility standards: ensure clear focus states, sufficient color contrast, avoid color-only information conveyance, support 200% page zoom, and avoid flickering animations
Applied to files:
components/timeline/Timeline.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use CSS logical properties for RTL support (e.g., `margin-inline-start` instead of `margin-left`)
Applied to files:
components/timeline/Timeline.tsxcomponents/timeline/useItems.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Use `useLocale` hook from `components/locale/index.tsx`
Applied to files:
components/timeline/Timeline.tsxcomponents/timeline/useItems.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Use functional components with hooks exclusively (no class components)
Applied to files:
components/timeline/Timeline.tsxcomponents/timeline/useItems.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript and React to develop, with function-based components and hooks instead of class components
Applied to files:
components/timeline/Timeline.tsxcomponents/timeline/useItems.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.{ts,tsx} : Internationalization: obtain locale configuration via `useLocale` hook from `components/locale/index.tsx`; ensure new locale configurations have corresponding type definitions
Applied to files:
components/timeline/Timeline.tsxcomponents/timeline/useItems.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Apply performance optimizations with React.memo, useMemo, useCallback appropriately
Applied to files:
components/timeline/useItems.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to **/*.{ts,tsx} : Never use `any` type - define precise types instead
Applied to files:
components/timeline/useItems.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.{ts,tsx} : Use generics appropriately to enhance type flexibility; use union types and `as const` instead of `enum`; rely on TypeScript's type inference and minimize type assertions
Applied to files:
components/timeline/useItems.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.{ts,tsx} : All components and functions must provide accurate type definitions; avoid using `any` type and use interfaces instead of type aliases for object structures
Applied to files:
components/timeline/useItems.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.{ts,tsx} : Use React.memo, useMemo, and useCallback appropriately to optimize performance
Applied to files:
components/timeline/useItems.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.{ts,tsx} : Use `React.ForwardRefRenderFunction` for component ref types and explicitly define all callback function parameters and return values
Applied to files:
components/timeline/useItems.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Component ref types should use `React.ForwardRefRenderFunction`
Applied to files:
components/timeline/useItems.tsx
🧬 Code graph analysis (1)
components/timeline/useItems.tsx (3)
components/timeline/Timeline.tsx (3)
TimelineMode(26-26)TimelineItemType(30-57)TimelineProps(62-86)components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)components/form/util.ts (1)
toArray(13-18)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (17)
- GitHub Check: build preview
- GitHub Check: build
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: test-node
- GitHub Check: build
- GitHub Check: lint
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: size
- GitHub Check: Analyze (javascript)
- GitHub Check: build
- GitHub Check: Cloudflare Pages: ant-design-next
🔇 Additional comments (5)
components/timeline/Timeline.tsx (3)
7-16: 导入变更符合重构目标。新增的
isNonNullable和genCssVar导入与 PR 目标一致，用于支持动态 CSS 变量生成。导入顺序正确：依赖项 → antd 组件 → 主题工具 → 样式。
130-138: genCssVar 使用正确。
getPrefixCls()无参数调用返回根前缀（如'ant'），然后传递给genCssVar生成组件特定的 CSS 变量名生成器。这与genStyleUtils.ts中的实现一致，将生成类似--ant-timeline-head-span的变量名。
171-179: useItems 签名变更需同步更新。
useItems现在接受rootPrefixCls作为第一个参数，与useItems.tsx中的签名变更一致。参数传递顺序正确。components/timeline/useItems.tsx (2)
51-60: 动态 CSS 变量使用正确。
[varName('item-icon-dot-color')]正确替换了硬编码的 CSS 变量字符串，符合 PR 的重构目标。这将生成基于主题的动态变量名。
96-99: useMemo 依赖数组正确更新。
varName被正确添加到依赖数组中。由于varName是由genCssVar(rootPrefixCls, '_steps_')生成的，当rootPrefixCls改变时（虽然实际中很少发生），记忆化值会正确重新计算。
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @components/timeline/style/horizontal.ts:
- Around line 9-13: The TODO indicates an incomplete refactor: genCssVar(antCls,
'_steps_') (the array destructuring [, stepsVarRef]) in horizontal.ts uses the
legacy '_steps_' key; either complete the refactor by renaming all occurrences
of '_steps_' → 'steps' across the repo (including this file's use at
horizontal.ts, useItems.tsx, index.ts and all steps component style files) and
update all calls to genCssVar(antCls, 'steps') so references (stepsVarRef)
remain consistent, or remove the TODO and replace it with a clear comment
explaining why the '_steps_' prefix must be kept; update horizontal.ts
accordingly and ensure tests/build still pass.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
components/steps/style/horizontal.tscomponents/steps/style/label-placement.tscomponents/steps/style/progress-dot.tscomponents/timeline/demo/title-span.tsxcomponents/timeline/style/horizontal.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- components/steps/style/progress-dot.ts
- components/steps/style/horizontal.ts
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Always use TypeScript with strict type checking
Never useanytype - define precise types instead
Use interfaces (not type aliases) for object structures
Export all public interface types
Prefer union types over enums, useas constfor constants
Use early returns to improve readability
Support tree shaking
Follow import order: React → dependencies → antd components → custom components → types → styles
Prefer antd built-in components over external dependencies
Pass all ESLint and TypeScript checks
No console errors or warnings
**/*.{ts,tsx}: Use TypeScript and React to develop, with function-based components and hooks instead of class components
Use early returns to improve code readability
Component names should use PascalCase
Property names should use camelCase
Use React.memo, useMemo, and useCallback appropriately to optimize performance
All components and functions must provide accurate type definitions; avoid usinganytype and use interfaces instead of type aliases for object structures
Component props should use interface definition with naming conventionComponentNameProps; define separate interfaces for component state likeComponentNameState
UseReact.ForwardRefRenderFunctionfor component ref types and explicitly define all callback function parameters and return values
Use generics appropriately to enhance type flexibility; use union types andas constinstead ofenum; rely on TypeScript's type inference and minimize type assertions
Internationalization: obtain locale configuration viauseLocalehook fromcomponents/locale/index.tsx; ensure new locale configurations have corresponding type definitions
Files:
components/steps/style/label-placement.tscomponents/timeline/demo/title-span.tsxcomponents/timeline/style/horizontal.ts
components/**/style/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/style/*.ts: Use@ant-design/cssinjsfor all styling
Generate styles with functions namedgen[ComponentName]Style
Use design tokens from the Ant Design token system
Support both light and dark themes
Use CSS logical properties for RTL support (e.g.,margin-inline-startinstead ofmargin-left)
Respectprefers-reduced-motionfor animations
Files:
components/steps/style/label-placement.tscomponents/timeline/style/horizontal.ts
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
Files:
components/steps/style/label-placement.tscomponents/timeline/demo/title-span.tsxcomponents/timeline/style/horizontal.ts
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/steps/style/label-placement.tscomponents/timeline/demo/title-span.tsxcomponents/timeline/style/horizontal.ts
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/steps/style/label-placement.tscomponents/timeline/demo/title-span.tsxcomponents/timeline/style/horizontal.ts
components/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/*.tsx: Component props interfaces should be namedComponentNameProps
Component ref types should useReact.ForwardRefRenderFunction
Use functional components with hooks exclusively (no class components)
Apply performance optimizations with React.memo, useMemo, useCallback appropriately
Support server-side rendering
Components must support ref forwarding with structure including nativeElement, focus, and other methods
Use PascalCase for component names
Use camelCase for props with specific patterns:default+PropNamefor defaults,forceRenderfor force rendering,openinstead ofvisiblefor panel state,show+PropNamefor display toggles,PropName+ablefor capabilities,dataSourcefor data source,disabledfor disabled state,extrafor additional content,iconfor icons,triggerfor triggers,classNamefor CSS classes
Useon+EventNamepattern for event handlers (e.g.,onClick,onChange)
Useon+SubComponentName+EventNamepattern for sub-component events
Use complete names, never abbreviations in prop naming
Optimize for minimal re-renders
UseuseLocalehook fromcomponents/locale/index.tsx
Support accessibility (WCAG 2.1 AA)
Files:
components/timeline/demo/title-span.tsx
components/*/demo/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/*/demo/*.tsx: Keep demo code concise and copy-pasteable
Focus each demo on a single feature
Use kebab-case for demo filenames:basic.tsx,custom-filter.tsx
Files:
components/timeline/demo/title-span.tsx
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/*.tsx: Use @ant-design/cssinjs as the styling solution; place component styles instyle/directory with filenames followinggen[ComponentName]Stylenaming convention
Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties likemargin-inline-startinstead of directional properties
Use CSS transitions for simple animations and @rc-component/motion for complex animations; respect prefers-reduced-motion user preference
Follow WCAG 2.1 AA accessibility standards: ensure clear focus states, sufficient color contrast, avoid color-only information conveyance, support 200% page zoom, and avoid flickering animations
Files:
components/timeline/demo/title-span.tsx
🧠 Learnings (24)
📓 Common learnings
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use ant-design/cssinjs as the styling solution; place component styles in `style/` directory with filenames following `gen[ComponentName]Style` naming convention
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use `ant-design/cssinjs` for all styling
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Generate styles with functions named `gen[ComponentName]Style`
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.{ts,tsx} : Never hardcode colors, sizes, or spacing values
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS transitions for simple animations and rc-component/motion for complex animations; respect prefers-reduced-motion user preference
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to demo/*.tsx : Import order for demo code: React → dependencies → component library → custom components → types → styles; use function components and Hooks; 2-space indentation and camelCase naming
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties like `margin-inline-start` instead of directional properties
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript and React to develop, with function-based components and hooks instead of class components
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token system
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token system
Applied to files:
components/steps/style/label-placement.tscomponents/timeline/style/horizontal.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Applied to files:
components/steps/style/label-placement.tscomponents/timeline/style/horizontal.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use CSS logical properties for RTL support (e.g., `margin-inline-start` instead of `margin-left`)
Applied to files:
components/steps/style/label-placement.tscomponents/timeline/style/horizontal.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Generate styles with functions named `gen[ComponentName]Style`
Applied to files:
components/steps/style/label-placement.tscomponents/timeline/style/horizontal.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.{ts,tsx} : Never hardcode colors, sizes, or spacing values
Applied to files:
components/steps/style/label-placement.tscomponents/timeline/style/horizontal.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use `ant-design/cssinjs` for all styling
Applied to files:
components/steps/style/label-placement.tscomponents/timeline/style/horizontal.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use ant-design/cssinjs as the styling solution; place component styles in `style/` directory with filenames following `gen[ComponentName]Style` naming convention
Applied to files:
components/steps/style/label-placement.tscomponents/timeline/style/horizontal.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Support both light and dark themes
Applied to files:
components/steps/style/label-placement.tscomponents/timeline/style/horizontal.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties like `margin-inline-start` instead of directional properties
Applied to files:
components/steps/style/label-placement.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Respect `prefers-reduced-motion` for animations
Applied to files:
components/steps/style/label-placement.tscomponents/timeline/style/horizontal.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Support accessibility (WCAG 2.1 AA)
Applied to files:
components/steps/style/label-placement.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Follow WCAG 2.1 AA accessibility standards: ensure clear focus states, sufficient color contrast, avoid color-only information conveyance, support 200% page zoom, and avoid flickering animations
Applied to files:
components/steps/style/label-placement.tscomponents/timeline/style/horizontal.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.md : FAQ section headers must prefix anchor IDs with `faq-`; ensure same anchor IDs for corresponding Chinese and English headers to maintain consistency across language switches
Applied to files:
components/steps/style/label-placement.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to demo/*.tsx : Import order for demo code: React → dependencies → component library → custom components → types → styles; use function components and Hooks; 2-space indentation and camelCase naming
Applied to files:
components/timeline/demo/title-span.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/*/demo/*.tsx : Keep demo code concise and copy-pasteable
Applied to files:
components/timeline/demo/title-span.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/*/demo/*.tsx : Use kebab-case for demo filenames: `basic.tsx`, `custom-filter.tsx`
Applied to files:
components/timeline/demo/title-span.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/*/demo/*.tsx : Focus each demo on a single feature
Applied to files:
components/timeline/demo/title-span.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to demo/*.tsx : Demo code should be concise and simple; avoid redundancy so users can copy and use directly; each demo should focus on one feature; provide both Chinese and English explanations
Applied to files:
components/timeline/demo/title-span.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript and React to develop, with function-based components and hooks instead of class components
Applied to files:
components/timeline/demo/title-span.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to **/*.{ts,tsx} : Prefer antd built-in components over external dependencies
Applied to files:
components/timeline/demo/title-span.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to **/*.{ts,tsx} : Follow import order: React → dependencies → antd components → custom components → types → styles
Applied to files:
components/timeline/demo/title-span.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to **/*.{ts,tsx,css} : Maintain cross-browser compatibility
Applied to files:
components/timeline/style/horizontal.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to CHANGELOG.*.md : CHANGELOG format: `Component: 📌emoji Description [#PR](link) [contributor]`; use code backticks for all property names, method names, APIs, and aria/role attributes; maintain space between Chinese/English and numbers/links/usernames
Applied to files:
components/timeline/style/horizontal.ts
🧬 Code graph analysis (3)
components/steps/style/label-placement.ts (1)
components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)
components/timeline/demo/title-span.tsx (1)
components/timeline/Timeline.tsx (1)
TimelineProps(62-86)
components/timeline/style/horizontal.ts (2)
components/timeline/style/index.ts (1)
TimelineToken(42-46)components/theme/util/genStyleUtils.ts (1)
genCssVar(48-60)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (16)
- GitHub Check: Analyze (javascript)
- GitHub Check: build preview
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: build
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: lint
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: build
- GitHub Check: size
- GitHub Check: Cloudflare Pages: ant-design-next
- GitHub Check: build
🔇 Additional comments (10)
components/timeline/demo/title-span.tsx (4)
1-3: 导入顺序正确，类型导入合理。导入顺序符合规范（React → antd 组件 → 类型），新增的
TimelineProps类型导入用于类型化 items 数组，这是良好的实践。
5-10: items 数组定义清晰，类型安全。使用
TimelineProps['items']进行类型标注是正确的做法。数据结构有效展示了 titleSpan 功能，包括有标题和无标题的项目组合。
12-29: 示例代码简洁清晰，功能聚焦。组件使用
React.FC类型，符合规范。示例有效展示了 titleSpan 的三种使用场景：像素值、百分比值和数字值，同时演示了与mode="end"的组合使用。代码结构清晰，易于复制使用。
31-31: 默认导出符合规范。components/steps/style/label-placement.ts (4)
5-5: 导入语句正确。新增的
genCssVar导入符合重构目标，用于生成动态 CSS 变量。
9-19: Token 解构扩展合理。新增的
antCls和calc字段分别用于生成 CSS 变量和样式计算，符合重构需求。
29-147: CSS 变量引用迁移正确。从硬编码的 CSS 变量迁移到
varName和varRef的实现符合预期：
- 变量命名使用 kebab-case 格式
varRef正确处理回退值- 保持了 RTL 支持（使用
marginInlineStart、insetInlineStart等逻辑属性）- 数学计算正确使用
calc与varRef结合根据项目的 CSS-in-JS 最佳实践。
23-23:_steps_命名的一致性已验证为系统性的有意设计。该 TODO 注释在 Steps 组件的所有 16 个文件中都保持一致（包括
components/steps/下的 14 个样式文件和主组件文件），同时 Timeline 组件中的相关引用也遵循相同的模式。这表明该临时命名是经过深思熟虑的系统性改动，而非个别疏漏。其他组件（如tooltip、splitter）使用标准命名约定（不带下划线前缀），仅_steps_采用此临时方案，并由统一的 TODO 注释标记待后续处理。components/timeline/style/horizontal.ts (2)
6-6:genCssVar引入 OK，符合本次“变量生成”重构目标。
16-19: Timeline 自身变量（content-height/alternate-content-offset）从硬编码迁移到timelineVarName/Ref：方向正确。
alternate-content-offset先落地再复用到 placement 的top/bottom，减少重复计算与后续改动风险。Also applies to: 76-91
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
components/timeline/style/horizontal.ts (1)
11-12: 关于 TODO 注释：_steps_命名约定Line 11 的 TODO 注释指出
_steps_应该改为steps，而 Line 12 的timeline已经使用了正确的命名格式。这个不一致可能是为了向后兼容或与 Steps 组件共享样式。如果需要，我可以帮助创建一个 issue 来跟踪这个重命名任务，或者生成一个修复方案来统一命名约定。
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/timeline/style/horizontal.ts
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Always use TypeScript with strict type checking
Never useanytype - define precise types instead
Use interfaces (not type aliases) for object structures
Export all public interface types
Prefer union types over enums, useas constfor constants
Use early returns to improve readability
Support tree shaking
Follow import order: React → dependencies → antd components → custom components → types → styles
Prefer antd built-in components over external dependencies
Pass all ESLint and TypeScript checks
No console errors or warnings
**/*.{ts,tsx}: Use TypeScript and React to develop, with function-based components and hooks instead of class components
Use early returns to improve code readability
Component names should use PascalCase
Property names should use camelCase
Use React.memo, useMemo, and useCallback appropriately to optimize performance
All components and functions must provide accurate type definitions; avoid usinganytype and use interfaces instead of type aliases for object structures
Component props should use interface definition with naming conventionComponentNameProps; define separate interfaces for component state likeComponentNameState
UseReact.ForwardRefRenderFunctionfor component ref types and explicitly define all callback function parameters and return values
Use generics appropriately to enhance type flexibility; use union types andas constinstead ofenum; rely on TypeScript's type inference and minimize type assertions
Internationalization: obtain locale configuration viauseLocalehook fromcomponents/locale/index.tsx; ensure new locale configurations have corresponding type definitions
Files:
components/timeline/style/horizontal.ts
components/**/style/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/style/*.ts: Use@ant-design/cssinjsfor all styling
Generate styles with functions namedgen[ComponentName]Style
Use design tokens from the Ant Design token system
Support both light and dark themes
Use CSS logical properties for RTL support (e.g.,margin-inline-startinstead ofmargin-left)
Respectprefers-reduced-motionfor animations
Files:
components/timeline/style/horizontal.ts
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
Files:
components/timeline/style/horizontal.ts
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/timeline/style/horizontal.ts
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/timeline/style/horizontal.ts
🧠 Learnings (13)
📓 Common learnings
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use ant-design/cssinjs as the styling solution; place component styles in `style/` directory with filenames following `gen[ComponentName]Style` naming convention
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use `ant-design/cssinjs` for all styling
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Generate styles with functions named `gen[ComponentName]Style`
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.{ts,tsx} : Never hardcode colors, sizes, or spacing values
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS transitions for simple animations and rc-component/motion for complex animations; respect prefers-reduced-motion user preference
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to demo/*.tsx : Import order for demo code: React → dependencies → component library → custom components → types → styles; use function components and Hooks; 2-space indentation and camelCase naming
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties like `margin-inline-start` instead of directional properties
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Generate styles with functions named `gen[ComponentName]Style`
Applied to files:
components/timeline/style/horizontal.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Applied to files:
components/timeline/style/horizontal.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.{ts,tsx} : Never hardcode colors, sizes, or spacing values
Applied to files:
components/timeline/style/horizontal.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use CSS logical properties for RTL support (e.g., `margin-inline-start` instead of `margin-left`)
Applied to files:
components/timeline/style/horizontal.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token system
Applied to files:
components/timeline/style/horizontal.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use `ant-design/cssinjs` for all styling
Applied to files:
components/timeline/style/horizontal.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Respect `prefers-reduced-motion` for animations
Applied to files:
components/timeline/style/horizontal.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Support both light and dark themes
Applied to files:
components/timeline/style/horizontal.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to **/*.{ts,tsx,css} : Maintain cross-browser compatibility
Applied to files:
components/timeline/style/horizontal.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Use ant-design/cssinjs as the styling solution; place component styles in `style/` directory with filenames following `gen[ComponentName]Style` naming convention
Applied to files:
components/timeline/style/horizontal.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.tsx : Follow WCAG 2.1 AA accessibility standards: ensure clear focus states, sufficient color contrast, avoid color-only information conveyance, support 200% page zoom, and avoid flickering animations
Applied to files:
components/timeline/style/horizontal.ts
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to CHANGELOG.*.md : CHANGELOG format: `Component: 📌emoji Description [#PR](link) [contributor]`; use code backticks for all property names, method names, APIs, and aria/role attributes; maintain space between Chinese/English and numbers/links/usernames
Applied to files:
components/timeline/style/horizontal.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (18)
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: test lib/es module (lib, 1/2)
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: lint
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: test-node
- GitHub Check: build
- GitHub Check: build preview
- GitHub Check: build
- GitHub Check: size
- GitHub Check: Analyze (javascript)
- GitHub Check: build
- GitHub Check: Cloudflare Pages: ant-design-next
🔇 Additional comments (3)
components/timeline/style/horizontal.ts (3)
77-92: LGTM！位置样式重构正确使用
timelineVarRef('alternate-content-offset')替代硬编码的 CSS 变量引用，保持了对称的布局逻辑，符合 genCssVar 的设计模式。
109-113: 使用生成的 CSS 变量引用 ✓
stepsVarRef('horizontal-rail-margin')的使用与整体重构模式一致，确保了与 Steps 组件样式的协调。
32-34: 所有 CSS 变量已正确定义和注入经验证，
title-vertical-row-gap在第 18 行已通过stepsVarName()定义，icon-size-max在 Steps 组件样式中定义。这些变量在第 33-34 行通过stepsVarRef()正确引用，无需修改。
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
💡 Background and Solution
📝 Change Log