Skip to content

feat(module:select,tree-select,cascader): support prefix and suffix icon - #9328

Merged
Laffery merged 7 commits into
NG-ZORRO:masterfrom
Laffery:feat/prefix-suffix
Aug 22, 2025
Merged

Laffery merged 7 commits into
NG-ZORRO:masterfrom
Laffery:feat/prefix-suffix

Conversation

@Laffery

@Laffery Laffery commented Aug 15, 2025 •

Copy link
Copy Markdown
Collaborator

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

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

What is the current behavior?

Issue Number: close #6344 #9327

What is the new behavior?

nz-select

  • Rewrite DOM structure of nz-select-top-control component to align with Ant Design. As a result there are lots of styles being changed
  • support nzPrefix
image

nz-tree-select

  • support nzPrefix and nzSuffixIcon
image

nz-cascader

  • support nzPrefix
image

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

@Laffery Laffery changed the title feat((module:select,tree-select,cascader): support prefix and suffix icon feat(module:select,tree-select,cascader): support prefix and suffix icon Aug 15, 2025
@codecov

codecov Bot commented Aug 15, 2025 •

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 92.00000% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 92.12%. Comparing base (b0a4287) to head (91a3eb9).
⚠️ Report is 9 commits behind head on master.

Files with missing lines Patch % Lines
components/select/select-search.component.ts 92.30% 1 Missing ⚠️
components/select/select-top-control.component.ts 75.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##           master    #9328      +/-   ##
==========================================
- Coverage   92.12%   92.12%   -0.01%     
==========================================
  Files         561      561              
  Lines       19631    19632       +1     
  Branches     3107     2997     -110     
==========================================
  Hits        18086    18086              
- Misses       1206     1207       +1     
  Partials      339      339              

☔ View full report in Codecov by Sentry.
📢 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.

Comment thread components/select/select.component.ts
@Laffery
Laffery marked this pull request as ready for review August 15, 2025 07:40
@Nicoss54

Copy link
Copy Markdown
Collaborator

@Laffery i’m on it :)

@Nicoss54 Nicoss54 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Some question, but not big change to do. I thinks it's just a nice to have

Comment thread components/select/select-top-control.component.ts
Comment thread components/tree-select/tree-select.component.ts Outdated
Comment thread components/tree-select/tree-select.component.ts Outdated
return this.expandedKeys;
}

@Input() nzPrefix: TemplateRef<NzSafeAny> | string | null = null;

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

question: cause it's a new feature why not using input based signal ?

@Laffery Laffery Aug 19, 2025 •

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

There is something wrong with input() in SSR I cannot figure out.

The code is:

@if (nzPrefix(); as prefix) {
    <div class="ant-select-prefix">
      <ng-container *nzStringTemplateOutlet="prefix">{{ prefix }}</ng-container>
    </div>
}

[input signal: undefined] appears in the first render

Image

So I just keep using @Input here

Comment thread components/cascader/cascader.component.ts
Comment thread components/cascader/cascader.component.ts
@Laffery

Laffery commented Aug 19, 2025

Copy link
Copy Markdown
Collaborator Author

Some question, but not big change to do. I thinks it's just a nice to have

I've updated as your suggestions :)

@HyperLife1119 HyperLife1119 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

LGTM

@HyperLife1119 HyperLife1119 added this to the v20.2 milestone Aug 19, 2025

@Nicoss54 Nicoss54 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

LGTM

@Laffery
Laffery merged commit 527ffb6 into NG-ZORRO:master Aug 22, 2025
Laffery added a commit to Laffery/ng-zorro-antd that referenced this pull request Nov 11, 2025
Laffery added a commit to Laffery/ng-zorro-antd that referenced this pull request Nov 12, 2025
HyperLife1119 added a commit that referenced this pull request Nov 13, 2025
* test(module:tree-select): add missing inputs

* test(module:tooltip): fix arrow bgColor case involved in #9360

* test(module:select): fix select-arrow visibility error involved in #9328

* test(module:cascader): fix missing signal value invocation

* test(module:cascader): fix missing NzInputGroupDirective query

* test(module:cascader): fix pipe not provided

* test(module:mention): missing Directionality.valueSignal

* test(module:autocomplete): deprecated input group

* chore: update test script

* ci: fix pipelines config

* ci: correct junit output dir

* test(module:affix): revert fromEventOutsideAngular

* test(module:dropdown): re-organize test cases

---------

Co-authored-by: HyperLife1119 <hyperlife1119@qq.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

When nz-tree-select componet is [nzMultiple]="true", the arrow is not displayed

3 participants