fix(abc:tag-select): fix style misalignment (#1467)

ng-alain · Apr 1, 2022 · a16921e · a16921e
1 parent 1016faf
commit a16921e
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 19 deletions.
diff --git a/packages/abc/tag-select/demo/simple.md b/packages/abc/tag-select/demo/simple.md
@@ -8,18 +8,29 @@ title: 基础样例
 ```ts
 import { Component } from '@angular/core';
 
+interface TagSelectDemoItem {
+  id: number;
+  text: string;
+  value: boolean;
+}
+
 @Component({
   selector: 'app-demo',
   template: `
     <tag-select>
-      <nz-tag *ngFor="let i of categories; let idx = index" nzMode="checkable" [(nzChecked)]="i.value" (nzCheckedChange)="change($event)">
+      <nz-tag
+        *ngFor="let i of categories; let idx = index"
+        nzMode="checkable"
+        [(nzChecked)]="i.value"
+        (nzCheckedChange)="change(i)"
+      >
         {{ i.text }}
       </nz-tag>
     </tag-select>
-  `,
+  `
 })
 export class DemoComponent {
-  categories = [
+  categories: TagSelectDemoItem[] = [
     { id: 0, text: '全部', value: false },
     { id: 1, text: '类目一', value: false },
     { id: 2, text: '类目二', value: false },
@@ -35,11 +46,15 @@ export class DemoComponent {
     { id: 12, text: '类目十二', value: false },
     { id: 13, text: '类目十三', value: false },
     { id: 14, text: '类目十四', value: false },
-    { id: 15, text: '类目十五', value: false },
+    { id: 15, text: '类目十五', value: false }
   ];
 
-  change(status: boolean): void {
-    this.categories.forEach(i => (i.value = status));
+  change(item: TagSelectDemoItem): void {
+    if (item.id === 0) {
+      this.categories.forEach(i => (i.value = item.value));
+      return;
+    }
+    this.categories.find(w => w.id === 0)!.value = false;
   }
 }
 ```
diff --git a/packages/abc/tag-select/style/index.less b/packages/abc/tag-select/style/index.less
@@ -1,10 +1,12 @@
 @import '../../../theme/theme-default.less';
 @tag-select-prefix: ~'.tag-select';
+@tag-select-height: @tag-line-height + 2px; // 2px is top & bottom border width
 
 @{tag-select-prefix} {
   position: relative;
   display: block;
-  max-height: 24px;
+  max-height: @tag-select-height + @tag-select-margin;
+  margin-top: -@tag-select-margin;
   margin-left: -8px;
   overflow: hidden;
   line-height: @line-height-base;
@@ -20,18 +22,23 @@
     padding-right: 50px;
   }
   .@{ant-prefix}-tag {
-    margin-right: 24px;
-    padding: 0 8px;
+    margin-top: @tag-select-margin;
+    margin-right: @tag-select-item-margin-right;
   }
 
   &__trigger {
     position: absolute;
     top: 0;
     right: 0;
+    display: flex;
+    align-items: center;
+    margin-right: 0 !important;
+    color: @primary-color;
 
-    &-icon {
-      margin-left: 8px;
-      font-size: 12px;
+    > .anticon {
+      margin-left: 2px;
+      font-size: 8px;
+      transition: transform .24s;
     }
   }
 }

diff --git a/packages/abc/tag-select/tag-select.component.html b/packages/abc/tag-select/tag-select.component.html
@@ -1,5 +1,5 @@
 <ng-content></ng-content>
-<a *ngIf="expandable" class="tag-select__trigger" (click)="trigger()">
-  {{ expand ? locale.collapse : locale.expand
-  }}<i nz-icon [nzType]="expand ? 'up' : 'down'" class="tag-select__trigger-icon"></i>
+<a *ngIf="expandable" class="ant-tag ant-tag-checkable tag-select__trigger" (click)="trigger()">
+  {{ expand ? locale.collapse : locale.expand }}
+  <i nz-icon nzType="down" [style.transform]="expand ? 'rotate(-180deg)' : null"></i>
 </a>
diff --git a/packages/abc/tag-select/tag-select.spec.ts b/packages/abc/tag-select/tag-select.spec.ts
@@ -38,22 +38,22 @@ describe('abc: tag-select', () => {
     spyOn(context, 'change');
     const triEl = dl.query(By.css('.tag-select__trigger')).nativeElement as HTMLElement;
     expect(context.change).not.toHaveBeenCalled();
-    expect(triEl.innerHTML).toContain('展开');
+    expect(triEl.innerHTML.trim()).toContain('展开');
     // expect(triEl.querySelector('.anticon-up')).toBeNull();
     // expect(triEl.querySelector('.anticon-down')).not.toBeNull();
     triEl.click();
     fixture.detectChanges();
-    expect(triEl.innerHTML).toContain('收起');
+    expect(triEl.innerHTML.trim()).toContain('收起');
     // expect(triEl.querySelector('.anticon-up')).not.toBeNull();
     // expect(triEl.querySelector('.anticon-down')).toBeNull();
     expect(context.change).toHaveBeenCalled();
   });
   it('#i18n', () => {
     const triEl = dl.query(By.css('.tag-select__trigger')).nativeElement as HTMLElement;
-    expect(triEl.innerText).toContain(zh_CN.tagSelect.expand);
+    expect(triEl.innerText.trim()).toContain(zh_CN.tagSelect.expand);
     TestBed.inject<DelonLocaleService>(DelonLocaleService).setLocale(en_US);
     fixture.detectChanges();
-    expect(triEl.innerText).toBe(en_US.tagSelect.expand);
+    expect(triEl.innerText.trim()).toBe(en_US.tagSelect.expand);
   });
 });
 

diff --git a/packages/abc/theme-compact.less b/packages/abc/theme-compact.less
@@ -8,3 +8,8 @@
 @footer-toolbar-padding: 0 16px;
 
 @reuse-tab-height: 44px;
+
+// tag-select
+// --
+@tag-select-margin: 8px;
+@tag-select-item-margin-right: 12px;
diff --git a/packages/abc/theme-default.less b/packages/abc/theme-default.less
@@ -97,3 +97,8 @@
 @onboarding-light-ant-color: rgb(255, 255, 255);
 @onboarding-changing-ant: all 0.3s ease-out;
 @onboarding-zindex: 99999;
+
+// tag-select
+// --
+@tag-select-margin: 16px;
+@tag-select-item-margin-right: 24px;