feat(module:divider): support nzSize (#9346)

Author: Nicoss54

components/divider/demo/size.md

@@ -0,0 +1,14 @@
+---
+order: 5
+title:
+  zh-CN: 分割线大小
+  en-US: Size
+---
+
+## zh-CN
+
+通过 `nzSize` 设置分割线的大小。
+
+## en-US
+
+Divider support `nzSize` to set the size of Divider.

components/divider/demo/size.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+
+import { NzDividerModule } from 'ng-zorro-antd/divider';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+
+@Component({
+  selector: 'nz-demo-divider-size',
+  imports: [NzDividerModule, NzIconModule],
+  template: `
+    <div>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae
+        sunt a te dicta? Refert tamen, quo modo.
+      </p>
+      <nz-divider nzSize="small" />
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae
+        sunt a te dicta? Refert tamen, quo modo.
+      </p>
+      <nz-divider nzSize="middle" />
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae
+        sunt a te dicta? Refert tamen, quo modo.
+      </p>
+      <nz-divider nzSize="large" />
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae
+        sunt a te dicta? Refert tamen, quo modo.
+      </p>
+    </div>
+  `
+})
+export class NzDemoDividerSizeComponent {}

components/divider/divider.component.ts

@@ -13,6 +13,7 @@ import {
 } from '@angular/core';
 
 import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
+import type { NzSizeLMSType } from 'ng-zorro-antd/core/types';
 
 @Component({
   selector: 'nz-divider',
@@ -36,7 +37,9 @@ import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
     '[class.ant-divider-with-text-right]': `nzText && nzOrientation === 'right'`,
     '[class.ant-divider-with-text-center]': `nzText && nzOrientation === 'center'`,
     '[class.ant-divider-dashed]': `nzDashed || nzVariant === 'dashed'`,
-    '[class.ant-divider-dotted]': `nzVariant === 'dotted'`
+    '[class.ant-divider-dotted]': `nzVariant === 'dotted'`,
+    '[class.ant-divider-sm]': `nzSize === 'small'`,
+    '[class.ant-divider-md]': `nzSize === 'middle'`
   },
   imports: [NzOutletModule]
 })
@@ -45,6 +48,7 @@ export class NzDividerComponent {
   @Input() nzType: 'horizontal' | 'vertical' = 'horizontal';
   @Input() nzOrientation: 'left' | 'right' | 'center' = 'center';
   @Input() nzVariant: 'dashed' | 'dotted' | 'solid' = 'solid';
+  @Input() nzSize: NzSizeLMSType | undefined;
   @Input({ transform: booleanAttribute }) nzDashed = false;
   @Input({ transform: booleanAttribute }) nzPlain = false;
 }

components/divider/divider.spec.ts

@@ -90,6 +90,52 @@ describe('divider', () => {
       expect(context.comp.nzVariant).toEqual('solid');
     });
   });
+
+  describe('#nzPlain', () => {
+    for (const value of [true, false]) {
+      it(`[${value}]`, () => {
+        context.comp.nzPlain = value;
+        fixture.detectChanges();
+        expect(dl.query(By.css('.ant-divider-plain')) != null).toBe(value);
+      });
+    }
+  });
+
+  describe('#nzSize', () => {
+    it('should not have size class by default', () => {
+      fixture.detectChanges();
+      const el = dl.query(By.css('.ant-divider'))!.nativeElement as HTMLElement;
+      expect(el.classList.contains('ant-divider-sm')).toBe(false);
+      expect(el.classList.contains('ant-divider-md')).toBe(false);
+      expect(el.classList.contains('ant-divider-lg')).toBe(false);
+    });
+
+    (['small', 'middle', 'large'] as const).forEach(size => {
+      it(`with ${size}`, () => {
+        context.comp.nzSize = size;
+        fixture.detectChanges();
+        const el = dl.query(By.css('.ant-divider'))!.nativeElement as HTMLElement;
+        expect(el.classList.contains('ant-divider-sm')).toBe(size === 'small');
+        expect(el.classList.contains('ant-divider-md')).toBe(size === 'middle');
+        // Large size does not have a specific class; ensure no lg class is added
+        expect(el.classList.contains('ant-divider-lg')).toBe(false);
+      });
+    });
+  });
+
+  describe('#with text class', () => {
+    it('should have ant-divider-with-text when nzText set', () => {
+      context.nzText = 'text';
+      fixture.detectChanges();
+      expect(dl.query(By.css('.ant-divider-with-text')) != null).toBe(true);
+    });
+
+    it('should not have ant-divider-with-text when nzText removed', () => {
+      context.nzText = undefined;
+      fixture.detectChanges();
+      expect(dl.query(By.css('.ant-divider-with-text')) == null).toBe(true);
+    });
+  });
 });
 
 @Component({

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

@@ -23,3 +23,4 @@ description: A divider line separates different content.
 | `[nzPlain]`       | Divider text show as plain style        | `boolean`                         | `false`        |
 | `[nzOrientation]` | inner text orientation                  | `'center' \| 'left' \| 'right'`   | `'center'`     |
 | `[nzVariant]`     | Whether line is dashed, dotted or solid | `'dashed' \| 'dotted' \| 'solid'` | `'solid'`      |
+| `[nzSize]`        | Divider size                            | `'small' \| 'middle' \| 'large'`  | -              |

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

@@ -24,3 +24,4 @@ description: 区隔内容的分割线。
 | `[nzPlain]`       | 文字是否显示为普通正文样式 | `boolean`                         | `false`        |
 | `[nzOrientation]` | 中间文字方向               | `'center' \| 'left' \| 'right'`   | `'center'`     |
 | `[nzVariant]`     | 分割线是虚线、点线还是实线 | `'dashed' \| 'dotted' \| 'solid'` | `'solid'`      |
+| `[nzSize]`        | 分割线大小                 | `'small' \| 'middle' \| 'large'`  | -              |

components/divider/style/patch.less

@@ -1,3 +1,5 @@
+@import '../../style/themes/index';
+
 .@{divider-prefix-cls} {
   &-dotted {
     background: none;
@@ -16,4 +18,12 @@
   &-vertical&-dotted {
     border-width: 0 0 0 @border-width-base;
   }
+
+  &-sm {
+    margin-block: @margin-xs;
+  }
+
+  &-md {
+    margin-block: @margin-md;
+  }
 }