feat(module:cascader,date-picker,input-number,input,select,time-picker,tree-select): support nzVariant (#9131)

Author: WwwHhhYran

components/cascader/cascader.component.ts

@@ -64,7 +64,8 @@ import {
   NzSafeAny,
   NzSizeLDSType,
   NzStatus,
-  NzValidateStatus
+  NzValidateStatus,
+  NzVariant
 } from 'ng-zorro-antd/core/types';
 import { fromEventOutsideAngular, getStatusClassNames, isNotNil, toArray } from 'ng-zorro-antd/core/util';
 import { NzEmptyModule } from 'ng-zorro-antd/empty';
@@ -268,6 +269,9 @@ const defaultDisplayRender = (labels: string[]): string => labels.join(' / ');
     '[class.ant-select-show-arrow]': 'nzShowArrow',
     '[class.ant-select-show-search]': '!!nzShowSearch',
     '[class.ant-select-disabled]': 'nzDisabled',
+    '[class.ant-select-borderless]': `nzVariant === 'borderless'`,
+    '[class.ant-select-filled]': `nzVariant === 'filled'`,
+    '[class.ant-select-underlined]': `nzVariant === 'underlined'`,
     '[class.ant-select-open]': 'menuVisible',
     '[class.ant-select-focused]': 'isFocused',
     '[class.ant-select-multiple]': 'nzMultiple',
@@ -335,6 +339,7 @@ export class NzCascaderComponent
   @Input() nzValueProperty: string = 'value';
   @Input() nzLabelProperty: string = 'label';
   @Input() nzLabelRender: TemplateRef<typeof this.labelRenderContext> | null = null;
+  @Input() @WithConfig() nzVariant: NzVariant = 'outlined';
   @Input() nzNotFoundContent?: string | TemplateRef<void>;
   @Input() @WithConfig() nzSize: NzCascaderSize = 'default';
   @Input() @WithConfig() nzBackdrop = false;

components/cascader/cascader.spec.ts

@@ -36,7 +36,7 @@ import {
   dispatchKeyboardEvent,
   dispatchMouseEvent
 } from 'ng-zorro-antd/core/testing';
-import { NzSafeAny, NzStatus } from 'ng-zorro-antd/core/types';
+import { NzSafeAny, NzStatus, NzVariant } from 'ng-zorro-antd/core/types';
 import { NzFormModule } from 'ng-zorro-antd/form';
 import { provideNzIconsTesting } from 'ng-zorro-antd/icon/testing';
 import { NzSelectItemComponent } from 'ng-zorro-antd/select';
@@ -227,6 +227,30 @@ describe('cascader', () => {
       expect(cascader.nativeElement.querySelector('.ant-select-clear')).toBeNull();
     });
 
+    describe('should variant works', () => {
+      it('filled', () => {
+        fixture.detectChanges();
+        expect(cascader.nativeElement.classList).not.toContain('ant-select-filled');
+        testComponent.nzVariant = 'filled';
+        fixture.detectChanges();
+        expect(cascader.nativeElement.classList).toContain('ant-select-filled');
+      });
+      it('borderless', () => {
+        fixture.detectChanges();
+        expect(cascader.nativeElement.classList).not.toContain('ant-select-borderless');
+        testComponent.nzVariant = 'borderless';
+        fixture.detectChanges();
+        expect(cascader.nativeElement.classList).toContain('ant-select-borderless');
+      });
+      it('underlined', () => {
+        fixture.detectChanges();
+        expect(cascader.nativeElement.classList).not.toContain('ant-select-underlined');
+        testComponent.nzVariant = 'underlined';
+        fixture.detectChanges();
+        expect(cascader.nativeElement.classList).toContain('ant-select-underlined');
+      });
+    });
+
     it('should open work', () => {
       fixture.detectChanges();
       expect(cascader.nativeElement.classList).not.toContain('ant-select-open');
@@ -2408,6 +2432,7 @@ const options5: NzSafeAny[] = [];
       [nzValueProperty]="nzValueProperty"
       [nzBackdrop]="nzBackdrop"
       [nzPlacement]="nzPlacement"
+      [nzVariant]="nzVariant"
       (ngModelChange)="onValueChanges($event)"
       (nzVisibleChange)="onVisibleChange($event)"
       (nzClear)="onClear()"
@@ -2451,6 +2476,7 @@ export class NzDemoCascaderDefaultComponent {
   nzExpandIcon = 'right';
   nzBackdrop = false;
   nzPlacement: NzCascaderPlacement = 'bottomLeft';
+  nzVariant: NzVariant = 'outlined';
 
   onVisibleChange = jasmine.createSpy<(visible: boolean) => void>('open change');
   onValueChanges = jasmine.createSpy('value change');

components/cascader/demo/variant.md

@@ -0,0 +1,14 @@
+---
+order: 21
+title:
+  zh-CN: 形态变体
+  en-US: Variants
+---
+
+## zh-CN
+
+Cascader 形态变体，可选 `outlined` `filled` `borderless` `underlined` 四种形态。
+
+## en-US
+
+Variants of Cascader, there are four variants: `outlined` `filled` `borderless` and `underlined`.

components/cascader/demo/variant.ts

@@ -0,0 +1,62 @@
+import { Component } from '@angular/core';
+
+import { NzCascaderModule, NzCascaderOption } from 'ng-zorro-antd/cascader';
+import { NzSpaceModule } from 'ng-zorro-antd/space';
+
+const options: NzCascaderOption[] = [
+  {
+    value: 'zhejiang',
+    label: 'Zhejiang',
+    children: [
+      {
+        value: 'hangzhou',
+        label: 'Hangzhou',
+        children: [
+          {
+            value: 'xihu',
+            label: 'West Lake',
+            isLeaf: true
+          }
+        ]
+      },
+      {
+        value: 'ningbo',
+        label: 'Ningbo',
+        isLeaf: true
+      }
+    ]
+  },
+  {
+    value: 'jiangsu',
+    label: 'Jiangsu',
+    children: [
+      {
+        value: 'nanjing',
+        label: 'Nanjing',
+        children: [
+          {
+            value: 'zhonghuamen',
+            label: 'Zhong Hua Men',
+            isLeaf: true
+          }
+        ]
+      }
+    ]
+  }
+];
+
+@Component({
+  selector: 'nz-demo-cascader-variant',
+  imports: [NzCascaderModule, NzSpaceModule],
+  template: `
+    <nz-space nzDirection="vertical" style="width: 100%">
+      <nz-cascader *nzSpaceItem [nzOptions]="options" nzVariant="outlined" />
+      <nz-cascader *nzSpaceItem [nzOptions]="options" nzVariant="filled" />
+      <nz-cascader *nzSpaceItem [nzOptions]="options" nzVariant="borderless" />
+      <nz-cascader *nzSpaceItem [nzOptions]="options" nzVariant="underlined" />
+    </nz-space>
+  `
+})
+export class NzDemoCascaderVariantComponent {
+  protected readonly options = options;
+}

components/cascader/doc/index.en-US.md

@@ -54,6 +54,7 @@ description: Cascade selection box.
 | `[nzStatus]`          | set validation status                                                                                                                  | `'error' \| 'warning'`                                                | -                 |
 | `[nzSuffixIcon]`      | custom suffix icon                                                                                                                     | `string\|TemplateRef<void>`                                           | -                 |
 | `[nzValueProperty]`   | value property name of options                                                                                                         | `string`                                                              | `'value'`         |
+| `[nzVariant]`         | Variants of Cascader                                                                                                                   | `'outlined' \| 'borderless' \| 'filled' \| 'underlined'`              | `outlined`        | ✅             |
 | `(ngModelChange)`     | emit on values change                                                                                                                  | `EventEmitter<any[]>`                                                 | -                 |
 | `(nzClear)`           | emit on clear values                                                                                                                   | `EventEmitter<void>`                                                  | -                 |
 | `(nzVisibleChange)`   | emit on popup menu visible or hide                                                                                                     | `EventEmitter<boolean>`                                               | -                 |

components/cascader/doc/index.zh-CN.md

@@ -55,6 +55,7 @@ description: 级联选择框。
 | `[nzStatus]`          | 设置校验状态                                                  | `'error' \| 'warning'`                                                | -              |
 | `[nzSuffixIcon]`      | 自定义的选择框后缀图标                                             | `string \| TemplateRef<void>`                                         | -              |
 | `[nzValueProperty]`   | 选项的实际值的属性名                                              | `string`                                                              | `'value'`      |
+| `[nzVariant]`         | 形态变体                                                    | `'outlined' \| 'borderless' \| 'filled' \| 'underlined'`              | `outlined`     | ✅      |
 | `(ngModelChange)`     | 值发生变化时触发                                                | `EventEmitter<any[]>`                                                 | -              |
 | `(nzClear)`           | 清除值时触发                                                  | `EventEmitter<void>`                                                  | -              |
 | `(nzVisibleChange)`   | 菜单浮层的显示/隐藏                                              | `EventEmitter<boolean>`                                               | -              |

components/core/types/public-api.ts

@@ -17,3 +17,4 @@ export * from './convert-input';
 export * from './input-observable';
 export * from './type';
 export * from './status';
+export * from './variant';

components/core/types/variant.ts

@@ -0,0 +1,6 @@
+/**
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+export type NzVariant = 'outlined' | 'filled' | 'borderless' | 'underlined';

components/core/util/public-api.ts

@@ -23,3 +23,4 @@ export * from './can-use-dom';
 export * from './dynamic-css';
 export * from './status-util';
 export * from './from-event-outside-angular';
+export * from './variant-utils';

components/core/util/variant-utils.ts

@@ -0,0 +1,14 @@
+/**
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { NgClassInterface, NzVariant } from 'ng-zorro-antd/core/types';
+
+export function getVariantClassNames(prefixCls: string, variant?: NzVariant, borderless?: boolean): NgClassInterface {
+  return {
+    [`${prefixCls}-borderless`]: variant === 'borderless' || (variant === 'outlined' && borderless),
+    [`${prefixCls}-filled`]: variant === 'filled',
+    [`${prefixCls}-underlined`]: variant === 'underlined'
+  };
+}