fix(module:steps): keep description below line when nzTitle is not set by claytonlin1110 · Pull Request #9681 · NG-ZORRO/ng-zorro-antd

claytonlin1110 · 2026-02-03T15:11:36Z

Problem

With no nzTitle and only nzDescription, the description was shown where the title normally is and could overlap the horizontal step line.

Solution

Component: Add ant-steps-item-title-placeholder when there is no title/subtitle but there is description; give it min-height so the title row keeps space and the line stays in place. Render the title block only when nzTitle or nzSubtitle is set so description is never rendered in the title slot.
Docs: Describe optional nzTitle and that description-only steps render below the line.
Demo: Add “Description only” example (en-US / zh-CN) showing steps without nzTitle.

Fixes: #9676

gemini-code-assist · 2026-02-03T15:12:04Z

Summary of Changes

Hello @claytonlin1110, I'm Gemini Code Assist¹! 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 addresses a visual bug in the nz-steps component where a step's description could incorrectly overlap the horizontal step line if no title was provided. The changes ensure that the layout remains consistent by reserving space for the title row and conditionally rendering the title content, thereby preventing visual glitches and improving the component's robustness for various configurations. New documentation and a demo have been added to illustrate this behavior.

Highlights

UI Fix for Steps Component: Resolved an issue where nzDescription would overlap the horizontal step line in the nz-steps component when nzTitle was not provided.
Layout Preservation: Introduced a placeholder class (ant-steps-item-title-placeholder) with a minimum height to ensure the title row reserves space, keeping the description correctly positioned below the horizontal line.
Conditional Title Rendering: Modified the nz-step component to only render the title block if nzTitle or nzSubtitle is explicitly set, preventing descriptions from appearing in the title slot.
Documentation and Demo Updates: Updated both English and Chinese documentation for nzTitle to clarify its optional nature and the rendering behavior of descriptions. A new demo (Description only) was added to showcase steps without titles.

Changelog

components/steps/demo/description-only.md
- Added a new markdown file for the 'Description only' steps demo, providing usage instructions and explanations in both English and Chinese.
components/steps/demo/description-only.ts
- Introduced a new Angular component (NzDemoStepsDescriptionOnlyComponent) to demonstrate steps with only descriptions, showcasing the fix.
components/steps/doc/index.en-US.md
- Updated the documentation for nzTitle to explicitly state that it is optional and that descriptions will render below the horizontal line when nzTitle is omitted.
components/steps/doc/index.zh-CN.md
- Updated the Chinese documentation for nzTitle with similar clarifications regarding its optional nature and description rendering.
components/steps/step.component.ts
- Applied the ant-steps-item-title-placeholder class to the title div when nzTitle and nzSubtitle are absent but nzDescription is present.
- Wrapped the title and subtitle rendering logic within an @if block, ensuring they are only displayed if nzTitle or nzSubtitle has a value.
components/steps/style/index.less
- Added a new CSS rule for .ant-steps-item-title-placeholder to set a min-height equal to @steps-title-line-height, reserving vertical space for the title row.

Activity

No human activity (comments, reviews) has been recorded on this pull request yet.

Using Gemini Code Assist

The 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 /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.

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.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request fixes an issue where a step with only a description could lead to layout problems. The solution correctly reserves space for the title row when it's not present. The changes across the component, styles, and documentation are well-aligned with the goal. I've provided one suggestion on step.component.ts to improve the logic for detecting when to apply the placeholder, making it more robust by distinguishing between an empty title and a non-existent one.

codecov · 2026-02-03T15:19:16Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 90.10%. Comparing base (785ca6f) to head (e10ea0f).
⚠️ Report is 118 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #9681   +/-   ##
=======================================
  Coverage   90.09%   90.10%           
=======================================
  Files         574      574           
  Lines       23707    23672   -35     
  Branches     4816     4815    -1     
=======================================
- Hits        21360    21329   -31     
+ Misses       1523     1520    -3     
+ Partials      824      823    -1

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

claytonlin1110 · 2026-02-04T14:17:35Z

@Laffery Would you please review?

HyperLife1119 · 2026-02-06T02:03:37Z

Fixing this issue requires synchronizing antd6 styles with the DOM structure.

claytonlin1110 · 2026-02-06T02:06:55Z

Fixing this issue requires synchronizing antd6 styles with the DOM structure.

Like this one?
#9678 (comment)

HyperLife1119 · 2026-02-06T02:12:00Z

Yes, but this time we need to synchronize the styles and DOM structure of Ant Design v6, not v5. This is because this issue still exists in v5.

claytonlin1110 · 2026-02-06T02:57:52Z

@HyperLife1119
Ant v6 styles & DOM structure implemented. Please review

HyperLife1119 · 2026-02-06T03:16:33Z

Missing ant-steps-item-section layer :)

claytonlin1110 · 2026-02-06T03:42:36Z

@HyperLife1119 Fixed. Please review

HyperLife1119 · 2026-02-06T07:10:28Z

We also need to ensure that lint passes.

claytonlin1110 · 2026-02-06T15:32:33Z

@HyperLife1119 I think synchronize the styles and DOM structure of antd requires too much changes and could be a really big update. In this PR, can we just implement the issue purpose feature only and make a new issue for the syncrhonizing ?

HyperLife1119 · 2026-02-06T15:36:42Z

I believe that synchronizing styles and DOM structure is the primary priority; synchronizing these changes just incidentally fixed other issues.

WDYT? @Laffery

claytonlin1110 · 2026-02-08T11:25:27Z

@HyperLife1119 Okay I have implemented synchronizing antd6 styles and DOM structure. Please review.

Laffery · 2026-02-09T01:53:51Z

I believe that synchronizing styles and DOM structure is the primary priority; synchronizing these changes just incidentally fixed other issues.

WDYT? @Laffery

it makes sense, agree with you

claytonlin1110 · 2026-02-09T07:40:51Z

@HyperLife1119 Had a chance to review this update?

claytonlin1110 · 2026-02-09T10:43:58Z

@HyperLife1119 Removed after pseudo element

claytonlin1110 · 2026-02-10T06:29:58Z

@HyperLife1119 Please review

claytonlin1110 · 2026-02-11T09:48:09Z

@HyperLife1119 Had a chance to review this?

HyperLife1119 · 2026-02-11T09:59:58Z

Yes, I will review this during my free time at work. Please wait patiently.

claytonlin1110 · 2026-02-18T17:06:49Z

@HyperLife1119 Did you have a chance to review this?

HyperLife1119 · 2026-02-18T17:12:52Z

Yes, we will review this, but our team is currently on vacation, and the style synchronization work in this PR is quite complex. We will check it later, please be patient :) @claytonlin1110

claytonlin1110 · 2026-03-02T06:13:33Z

@HyperLife1119 Did you have a good holiday? Feel free to review when you are back. Thanks.

HyperLife1119 · 2026-03-03T10:42:24Z

Please be patient, I will let you know when there are any updates :)

claytonlin1110 · 2026-03-12T00:13:39Z

@HyperLife1119 @Laffery Still not available for a review?

claytonlin1110 · 2026-03-20T05:58:29Z

@HyperLife1119 Sorry for pinging, but this PR has been passed quite a long time, Is it possible for you to review asap ? or assign any other reviewer? THanks.

HyperLife1119 · 2026-03-25T18:01:08Z

After evaluation, it was determined that since NG-ZORRO's base styles are still based on Ant Design 4, directly aligning with Ant Design 6 without fully synchronizing with Ant Design 5 styles presents significant technical challenges.

Compared to v5, Ant Design 6 has undergone a fundamental restructuring of the DOM structure for many components, resulting in a substantial increase in the maintenance costs of style synchronization. Currently, some implementations in this PR still deviate from the v6 specification. To ensure the consistency and stability of the component library's styles, we cannot merge this PR at this time. Thank you again for your active contributions and exploration.

claytonlin1110 · 2026-03-26T04:02:57Z

Thanks for the review.
if so, can I update this PR to fix the original issue only?
I can remove the synchronizing antd6 styles part from this PR.

HyperLife1119 · 2026-03-27T01:32:50Z

We do not accept style changes that are inconsistent with Ant Design at this time :)

claytonlin1110 · 2026-03-27T02:37:29Z

@HyperLife1119 But you know, this is a kind of bug which is described in #9676 and it should be fixed

claytonlin1110 · 2026-03-30T07:14:57Z

@HyperLife1119 ?

fix(module:steps): keep description below line when nzTitle is not set

e994d2f

claytonlin1110 requested a review from hsuanxyz as a code owner February 3, 2026 15:11

gemini-code-assist Bot reviewed Feb 3, 2026

View reviewed changes

Comment thread components/steps/step.component.ts Outdated

HyperLife1119 added Component: Steps PR: unreviewed labels Feb 6, 2026

HyperLife1119 added 🤚 Blocked and removed 🤚 Blocked labels Feb 6, 2026

fix(module:steps): synchronize antd6 styles with dom structure

c017d0d

HyperLife1119 reviewed Feb 6, 2026

View reviewed changes

Comment thread components/steps/style/index.less

claytonlin1110 added 2 commits February 5, 2026 21:39

fix: ant-steps-item-section layer

c9017a7

fix: wrapper style

6f0f079

claytonlin1110 requested a review from HyperLife1119 February 6, 2026 04:49

HyperLife1119 reviewed Feb 6, 2026

View reviewed changes

Comment thread components/steps/step.component.ts Outdated

HyperLife1119 reviewed Feb 6, 2026

View reviewed changes

Comment thread components/steps/step.component.ts Outdated

HyperLife1119 added the PR: reviewed-changes-requested label Feb 6, 2026

This comment was marked as outdated.

Sign in to view

claytonlin1110 added 2 commits February 8, 2026 05:01

fix: antdv6 styles and dom structure

3d52708

fix: lint

aa55464

claytonlin1110 requested a review from HyperLife1119 February 8, 2026 11:18

HyperLife1119 requested changes Feb 9, 2026

View reviewed changes

Comment thread components/steps/doc/index.en-US.md Outdated

Comment thread components/steps/style/index.less Outdated

Comment thread components/steps/style/index.less Outdated

claytonlin1110 added 3 commits February 9, 2026 02:17

fix: revert doc

aed3da4

chore: style

721ad4f

fix: remove rail after pseudo element

e10ea0f

claytonlin1110 requested a review from HyperLife1119 February 9, 2026 10:43

HyperLife1119 added 🤚 Blocked By ant-design and removed PR: reviewed-changes-requested labels Mar 25, 2026

Uh oh!

Conversation

claytonlin1110 commented Feb 3, 2026

Problem

Solution

Uh oh!

gemini-code-assist Bot commented Feb 3, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

codecov Bot commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

claytonlin1110 commented Feb 4, 2026

Uh oh!

HyperLife1119 commented Feb 6, 2026

Uh oh!

claytonlin1110 commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

HyperLife1119 commented Feb 6, 2026

Uh oh!

claytonlin1110 commented Feb 6, 2026

Uh oh!

HyperLife1119 commented Feb 6, 2026

Uh oh!

Uh oh!

claytonlin1110 commented Feb 6, 2026

Uh oh!

Uh oh!

Uh oh!

HyperLife1119 commented Feb 6, 2026

Uh oh!

claytonlin1110 commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

HyperLife1119 commented Feb 6, 2026

Uh oh!

This comment was marked as outdated.

claytonlin1110 commented Feb 8, 2026

Uh oh!

Laffery commented Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

claytonlin1110 commented Feb 9, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

claytonlin1110 commented Feb 9, 2026

Uh oh!

claytonlin1110 commented Feb 10, 2026

Uh oh!

claytonlin1110 commented Feb 11, 2026

Uh oh!

HyperLife1119 commented Feb 11, 2026

Uh oh!

claytonlin1110 commented Feb 18, 2026

Uh oh!

HyperLife1119 commented Feb 18, 2026

Uh oh!

claytonlin1110 commented Mar 2, 2026

Uh oh!

HyperLife1119 commented Mar 3, 2026

Uh oh!

claytonlin1110 commented Mar 12, 2026

Uh oh!

claytonlin1110 commented Mar 20, 2026

Uh oh!

HyperLife1119 commented Mar 25, 2026

Uh oh!

claytonlin1110 commented Mar 26, 2026

Uh oh!

codecov Bot commented Feb 3, 2026 •

edited

Loading

claytonlin1110 commented Feb 6, 2026 •

edited

Loading

claytonlin1110 commented Feb 6, 2026 •

edited

Loading

Laffery commented Feb 9, 2026 •

edited

Loading