fix(core): fix new CSS vars for height name mismatch and add customiz…

…ation section to demo (#149)
taiga-family · Jan 26, 2021 · aa7c961 · aa7c961
1 parent 68b9759
commit aa7c961
Show file tree

Hide file tree

Showing 109 changed files with 492 additions and 418 deletions.
diff --git a/projects/addon-charts/components/bar-chart/bar-chart.style.less b/projects/addon-charts/components/bar-chart/bar-chart.style.less
@@ -32,7 +32,7 @@
 }
 
 .set {
-    border-radius: var(--tui-radius);
+    border-radius: var(--tui-radius-m);
     pointer-events: none;
     outline: none;
 

diff --git a/projects/addon-charts/components/bar/bar.style.less b/projects/addon-charts/components/bar/bar.style.less
@@ -2,8 +2,8 @@
     display: flex;
     min-width: 2px;
     flex-direction: column-reverse;
-    border-top-left-radius: var(--tui-radius-xl);
-    border-top-right-radius: var(--tui-radius-xl);
+    border-top-left-radius: var(--tui-radius-l);
+    border-top-right-radius: var(--tui-radius-l);
     overflow: hidden;
 
     &:not([data-tui-background]) {

diff --git a/projects/addon-commerce/components/card/card.style.less b/projects/addon-commerce/components/card/card.style.less
@@ -34,7 +34,7 @@
     .fullsize();
     backface-visibility: hidden;
     background: inherit;
-    border-radius: var(--tui-radius);
+    border-radius: var(--tui-radius-m);
 }
 
 .box {

diff --git a/projects/addon-commerce/components/input-CVC/input-CVC.style.less b/projects/addon-commerce/components/input-CVC/input-CVC.style.less
@@ -1,7 +1,7 @@
 :host {
     display: block;
     max-width: 176px;
-    border-radius: var(--tui-radius);
+    border-radius: var(--tui-radius-m);
 }
 
 .input {

diff --git a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less
@@ -11,9 +11,9 @@
 
 :host {
     display: block;
-    height: var(--tui-height-xl);
+    height: var(--tui-height-l);
     width: @width-full;
-    border-radius: var(--tui-radius);
+    border-radius: var(--tui-radius-m);
     overflow: hidden;
 
     &._mobile {

diff --git a/projects/addon-commerce/components/input-card/input-card.style.less b/projects/addon-commerce/components/input-card/input-card.style.less
@@ -2,7 +2,7 @@
 
 :host {
     display: block;
-    border-radius: var(--tui-radius);
+    border-radius: var(--tui-radius-m);
 }
 
 .input {

diff --git a/projects/addon-commerce/components/input-expire/input-expire.style.less b/projects/addon-commerce/components/input-expire/input-expire.style.less
@@ -3,7 +3,7 @@
 :host {
     display: block;
     max-width: 176px;
-    border-radius: var(--tui-radius);
+    border-radius: var(--tui-radius-m);
 }
 
 .input {

diff --git a/projects/addon-doc/src/components/copy/copy.component.ts b/projects/addon-doc/src/components/copy/copy.component.ts
@@ -1,8 +1,8 @@
-import {ChangeDetectionStrategy, Component, HostBinding, Inject} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
 import {TuiDestroyService, tuiPure} from '@taiga-ui/cdk';
 import {TUI_COPY_TEXTS} from '@taiga-ui/kit';
 import {Observable, Subject, timer} from 'rxjs';
-import {mapTo, startWith, switchMapTo, takeUntil} from 'rxjs/operators';
+import {mapTo, startWith, switchMapTo} from 'rxjs/operators';
 
 const COPIED_TIMEOUT = 1500;
 
@@ -17,19 +17,9 @@ const COPIED_TIMEOUT = 1500;
 export class TuiDocCopyComponent {
     private readonly copy$ = new Subject();
 
-    @HostBinding('attr.title')
-    title = '';
-
-    copiedMessage = '';
-
     constructor(
-        @Inject(TuiDestroyService) destroy$: Observable<void>,
-        @Inject(TUI_COPY_TEXTS) texts$: Observable<[string, string]>,
-    ) {
-        texts$.pipe(takeUntil(destroy$)).subscribe(texts => {
-            [this.title, this.copiedMessage] = texts;
-        });
-    }
+        @Inject(TUI_COPY_TEXTS) readonly texts$: Observable<[string, string]>,
+    ) {}
 
     @tuiPure
     get copied$(): Observable<boolean> {

diff --git a/projects/addon-doc/src/components/copy/copy.style.less b/projects/addon-doc/src/components/copy/copy.style.less
@@ -2,7 +2,8 @@
 
 :host {
     position: relative;
-    display: block;
+    display: inline-block;
+    vertical-align: middle;
 }
 
 .copy {
@@ -17,6 +18,10 @@
     }
 }
 
+.initial:empty:before {
+    content: attr(data-text);
+}
+
 .content {
     .transition(transform);
     display: flex;

diff --git a/projects/addon-doc/src/components/copy/copy.template.html b/projects/addon-doc/src/components/copy/copy.template.html
@@ -1,15 +1,17 @@
 <button
+    *ngIf="texts$ | async as texts"
     tuiButton
     type="button"
     class="copy"
     appearance=""
     size="s"
+    [title]="texts[0]"
     (click)="onClick()"
 >
     <span class="content" [class.content_moved]="copied$ | async">
-        <span class="initial">
+        <span class="initial" [attr.data-text]="texts[0]">
             <ng-content></ng-content>
         </span>
-        {{copiedMessage}}
+        {{texts[1]}}
     </span>
 </button>
diff --git a/projects/addon-doc/src/components/demo/demo.style.less b/projects/addon-doc/src/components/demo/demo.style.less
@@ -29,7 +29,7 @@
     .shadow(2);
     display: flex;
     border: 1px solid var(--tui-base-03);
-    border-radius: var(--tui-radius);
+    border-radius: var(--tui-radius-m);
     max-width: 100%;
     min-height: 96px;
     width: 100%;

diff --git a/projects/addon-doc/src/components/example/example.component.ts b/projects/addon-doc/src/components/example/example.component.ts
@@ -1,3 +1,4 @@
+import {Clipboard} from '@angular/cdk/clipboard';
 import {
     Attribute,
     ChangeDetectionStrategy,
@@ -11,7 +12,6 @@ import {TuiNotification, TuiNotificationsService} from '@taiga-ui/core';
 import {TUI_COPY_TEXTS} from '@taiga-ui/kit';
 import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
-import {ClipboardCopyService} from '../../services/clipboard-copy.service';
 import {TUI_DOC_EXAMPLE_TEXTS} from '../../tokens/i18n';
 
 // Ambient type cannot be used without dynamic https://github.com/angular/angular/issues/23395
@@ -41,8 +41,7 @@ export class TuiDocExampleComponent {
     constructor(
         @Attribute('id')
         readonly id: string | null,
-        @Inject(ClipboardCopyService)
-        private readonly clipboardCopyService: ClipboardCopyService,
+        @Inject(Clipboard) private readonly clipboard: Clipboard,
         @Inject(TuiNotificationsService)
         private readonly notifications: TuiNotificationsService,
         @Inject(WINDOW) private readonly windowRef: Window,
@@ -81,17 +80,12 @@ export class TuiDocExampleComponent {
                 : this.windowRef.location.href;
         const url = `${currentUrl}#${this.id}`;
 
-        this.clipboardCopyService.copyToClipboard(url);
-
+        this.clipboard.copy(url);
         this.notifications
             .show(this.texts[1], {
                 label: this.texts[2],
                 status: TuiNotification.Success,
             })
             .subscribe();
     }
-
-    copyCodeExample() {
-        this.clipboardCopyService.copyToClipboard(this.code);
-    }
 }
diff --git a/projects/addon-doc/src/components/example/example.module.ts b/projects/addon-doc/src/components/example/example.module.ts
@@ -1,3 +1,4 @@
+import {ClipboardModule} from '@angular/cdk/clipboard';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {TuiButtonModule} from '@taiga-ui/core';
@@ -9,6 +10,7 @@ import {TuiDocExampleComponent} from './example.component';
 @NgModule({
     imports: [
         CommonModule,
+        ClipboardModule,
         TuiTabsModule,
         TuiButtonModule,
         TuiDocCopyModule,

diff --git a/projects/addon-doc/src/components/example/example.style.less b/projects/addon-doc/src/components/example/example.style.less
@@ -37,7 +37,7 @@
     position: relative;
     margin-top: 24px;
     border: 1px solid var(--tui-base-03);
-    border-radius: var(--tui-radius);
+    border-radius: var(--tui-radius-m);
     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
 
     @media @mobile {

diff --git a/projects/addon-doc/src/components/example/example.template.html b/projects/addon-doc/src/components/example/example.template.html
@@ -28,9 +28,10 @@ <h4 *ngIf="description" class="description">{{description}}</h4>
             <ng-content></ng-content>
         </div>
         <ng-template #codeTab>
-            <tui-doc-copy class="copy-code" (click)="copyCodeExample()">
-                {{copy$ | async}}
-            </tui-doc-copy>
+            <tui-doc-copy
+                class="copy-code"
+                [cdkCopyToClipboard]="code"
+            ></tui-doc-copy>
             <tui-doc-code [code]="code"></tui-doc-code>
         </ng-template>
     </ng-container>

diff --git a/projects/addon-doc/src/components/navigation/navigation.module.ts b/projects/addon-doc/src/components/navigation/navigation.module.ts
@@ -10,6 +10,7 @@ import {
     TuiExpandModule,
     TuiHostedDropdownModule,
     TuiLinkModule,
+    TuiModeModule,
     TuiPrimitiveTextfieldModule,
     TuiScrollbarModule,
     TuiSvgModule,
@@ -28,6 +29,7 @@ import {TuiDocNavigationComponent} from './navigation.component';
         TuiTextfieldControllerModule,
         TuiActiveZoneModule,
         TuiLetModule,
+        TuiModeModule,
         TuiLinkModule,
         TuiExpandModule,
         TuiHostedDropdownModule,

diff --git a/projects/addon-doc/src/components/navigation/navigation.style.less b/projects/addon-doc/src/components/navigation/navigation.style.less
@@ -47,7 +47,6 @@
     .text-body-m();
     margin-left: 8px;
     line-height: 44px;
-    color: var(--tui-text-02);
 
     &_small {
         margin-left: 16px;
@@ -62,4 +61,19 @@
         margin-left: 0;
         line-height: 44px;
     }
+
+    &_active {
+        color: var(--tui-text-01);
+    }
+}
+
+.chevron {
+    .transition(transform);
+    width: 16px;
+    height: 16px;
+    margin: -4px 4px 0 -3px;
+
+    &_active {
+        transform: rotate(90deg);
+    }
 }
diff --git a/projects/addon-doc/src/components/navigation/navigation.template.html b/projects/addon-doc/src/components/navigation/navigation.template.html
@@ -39,7 +39,11 @@
 
 <nav class="navigation">
     <tui-scrollbar class="scrollbar">
-        <tui-accordion [closeOthers]="false" [rounded]="false">
+        <tui-accordion
+            tuiMode="onLight"
+            [closeOthers]="false"
+            [rounded]="false"
+        >
             <tui-accordion-item
                 *ngFor="let label of labels; index as index"
                 size="s"
@@ -57,7 +61,7 @@
                                 *ngIf="!item.subPages; else subPages"
                                 tuiLink
                                 class="sublink"
-                                routerLinkActive
+                                routerLinkActive="sublink_active"
                                 [routerLink]="item.route"
                                 (click)="toggleMenu()"
                             >
@@ -76,17 +80,23 @@
                                         class="sublink sublink_subsection"
                                         (click)="onGroupClick(index)"
                                     >
+                                        <tui-svg
+                                            src="tuiIconChevronRight"
+                                            class="chevron"
+                                            [class.chevron_active]="!!openGroupsArr[index]"
+                                        ></tui-svg>
                                         {{item.title}}
                                     </button>
                                     <tui-expand
+                                        class="tui-space_left-1"
                                         [expanded]="!!openGroupsArr[index]"
                                     >
                                         <div class="section section_bordered">
                                             <a
                                                 *ngFor="let subPage of item.subPages"
                                                 tuiLink
                                                 class="sublink sublink_small"
-                                                routerLinkActive
+                                                routerLinkActive="sublink_active"
                                                 [routerLink]="subPage.route"
                                                 (click)="toggleMenu()"
                                             >

diff --git a/projects/addon-doc/src/public-api.ts b/projects/addon-doc/src/public-api.ts
@@ -32,9 +32,6 @@ export * from './interfaces/source-code-path-options';
 /* Languages */
 export * from './languages/russian';
 
-/* Services */
-export * from './services/clipboard-copy.service';
-
 /* Tokens */
 export * from './tokens/default-tabs';
 export * from './tokens/i18n';

diff --git a/projects/addon-doc/src/services/clipboard-copy.service.ts b/projects/addon-doc/src/services/clipboard-copy.service.ts
diff --git a/projects/addon-editor/components/edit-link/edit-link.style.less b/projects/addon-editor/components/edit-link/edit-link.style.less
@@ -2,14 +2,14 @@
 
 :host {
     display: flex;
-    height: var(--tui-height-xl);
+    height: var(--tui-height-l);
     align-items: center;
     padding-right: 12px;
 }
 
 .label {
     .text-body-s();
-    height: var(--tui-height-xl);
+    height: var(--tui-height-l);
     box-sizing: border-box;
     padding: 7px 16px;
     min-width: 200px;

diff --git a/projects/addon-editor/components/editor/editor.style.less b/projects/addon-editor/components/editor/editor.style.less
@@ -8,7 +8,7 @@
 
 .outline {
     .fullsize();
-    border-radius: var(--tui-radius);
+    border-radius: var(--tui-radius-m);
     pointer-events: none;
 }