From aa7c9617ed42b767a118e2c145e2ba6bc4cb54d8 Mon Sep 17 00:00:00 2001 From: Alex Inkin Date: Tue, 26 Jan 2021 16:14:30 +0300 Subject: [PATCH] fix(core): fix new CSS vars for height name mismatch and add customization section to demo (#149) --- .../components/bar-chart/bar-chart.style.less | 2 +- .../components/bar/bar.style.less | 4 +- .../components/card/card.style.less | 2 +- .../components/input-CVC/input-CVC.style.less | 2 +- .../input-card-grouped.style.less | 4 +- .../input-card/input-card.style.less | 2 +- .../input-expire/input-expire.style.less | 2 +- .../src/components/copy/copy.component.ts | 18 +-- .../src/components/copy/copy.style.less | 7 +- .../src/components/copy/copy.template.html | 6 +- .../src/components/demo/demo.style.less | 2 +- .../components/example/example.component.ts | 12 +- .../src/components/example/example.module.ts | 2 + .../src/components/example/example.style.less | 2 +- .../components/example/example.template.html | 7 +- .../navigation/navigation.module.ts | 2 + .../navigation/navigation.style.less | 16 +- .../navigation/navigation.template.html | 16 +- projects/addon-doc/src/public-api.ts | 3 - .../src/services/clipboard-copy.service.ts | 43 ------ .../components/edit-link/edit-link.style.less | 4 +- .../components/editor/editor.style.less | 2 +- .../input-color/input-color.style.less | 4 +- .../components/palette/palette.style.less | 2 +- .../components/toolbar/toolbar.component.ts | 4 +- .../constants/default-editor-styles.ts | 2 +- .../addon-editor/styles/editor-socket.css | 2 +- .../core/components/button/button.style.less | 14 +- .../dropdown-box/dropdown-box.style.less | 2 +- .../hints-host/hint-box/hint-box.style.less | 4 +- .../notification/notification.style.less | 2 +- .../primitive-checkbox.style.less | 4 +- .../primitive-textfield.component.ts | 13 +- .../table-mode/table-mode.directive.ts | 8 + .../notification-alert.style.less | 2 +- projects/core/styles/markup/tui-group.less | 60 ++++---- projects/core/styles/markup/tui-island.less | 4 +- projects/core/styles/markup/tui-table.less | 2 +- projects/core/styles/mixins/picker.less | 14 +- projects/core/styles/mixins/text.less | 4 +- projects/core/styles/mixins/textfield.less | 16 +- projects/core/styles/theme/variables.less | 28 ++-- projects/core/tokens/checkbox-appearance.ts | 2 +- projects/core/tokens/index.ts | 1 + projects/core/tokens/textfield-appearance.ts | 9 ++ projects/demo/src/modules/app/app.routes.ts | 13 +- .../modules/app/landing/landing.style.less | 2 +- projects/demo/src/modules/app/pages.ts | 18 ++- .../components/island/examples/3/index.less | 2 +- .../components/link/examples/3/index.less | 2 +- .../components/tag/examples/3/index.less | 1 + .../i18n/i18n.component.ts | 0 .../i18n/i18n.module.ts | 0 .../i18n/i18n.style.less | 0 .../i18n/i18n.template.html | 0 .../variables/examples/1/index.html | 8 + .../variables/examples/1/index.less | 11 ++ .../variables/examples/1/index.ts | 15 ++ .../variables/variables.component.ts | 35 +++++ .../variables/variables.module.ts | 32 ++++ .../variables/variables.style.less | 0 .../variables/variables.template.html | 29 ++++ .../modules/markup/colors/colors.module.ts | 2 + .../markup/colors/table/table.component.ts | 7 - .../markup/colors/table/table.style.less | 2 +- .../markup/colors/table/table.template.html | 4 +- .../modules/markup/icons/icons.component.ts | 46 +++--- .../modules/markup/icons/icons.template.html | 1 + .../modules/markup/shadows/shadows.style.less | 2 +- .../markup/spaces/examples/1/index.style.less | 2 +- .../markup/spaces/examples/2/index.style.less | 2 +- .../markup/typography/typography.component.ts | 14 +- .../markup/typography/typography.module.ts | 4 +- .../typography/typography.template.html | 142 +++++++----------- .../themes/bootstrap/bootstrap.style.less | 2 +- .../themes/material/material.style.less | 2 +- .../abstract/slider/slider.common.style.less | 6 +- .../accordion-item/accordion-item.style.less | 6 +- .../kit/components/action/action.style.less | 2 +- .../kit/components/avatar/avatar.style.less | 8 +- .../breadcrumbs/breadcrumbs.style.less | 2 +- .../checkbox-block/checkbox-block.style.less | 6 +- .../components/combo-box/combo-box.style.less | 2 +- .../input-copy/input-copy.style.less | 2 +- .../input-count/input-count.style.less | 12 +- .../input-date-range.style.less | 2 +- .../input-date-time.style.less | 2 +- .../input-date/input-date.style.less | 2 +- .../input-file/file/file.style.less | 4 +- .../input-file/input-file.style.less | 4 +- .../input-inline/input-inline.component.ts | 4 +- .../input-month-range.style.less | 2 +- .../input-month/input-month.style.less | 2 +- .../input-number/input-number.style.less | 2 +- .../input-password/input-password.style.less | 2 +- .../input-phone/input-phone.style.less | 2 +- .../input-range/input-range.style.less | 10 +- .../input-slider/input-slider.style.less | 8 +- .../input-tag/input-tag.component.ts | 11 +- .../components/input-tag/input-tag.style.less | 12 +- .../input-time/input-time.style.less | 2 +- .../kit/components/input/input.style.less | 2 +- .../radio-block/radio-block.style.less | 6 +- .../kit/components/select/select.style.less | 2 +- .../tabs-with-more/tabs-with-more.style.less | 2 +- .../kit/components/tabs/tabs/tabs.style.less | 2 +- projects/kit/components/tag/tag.style.less | 3 +- .../text-area/text-area.component.ts | 11 +- .../components/text-area/text-area.style.less | 2 +- 109 files changed, 492 insertions(+), 418 deletions(-) delete mode 100644 projects/addon-doc/src/services/clipboard-copy.service.ts create mode 100644 projects/core/tokens/textfield-appearance.ts rename projects/demo/src/modules/{info => customization}/i18n/i18n.component.ts (100%) rename projects/demo/src/modules/{info => customization}/i18n/i18n.module.ts (100%) rename projects/demo/src/modules/{info => customization}/i18n/i18n.style.less (100%) rename projects/demo/src/modules/{info => customization}/i18n/i18n.template.html (100%) create mode 100644 projects/demo/src/modules/customization/variables/examples/1/index.html create mode 100644 projects/demo/src/modules/customization/variables/examples/1/index.less create mode 100644 projects/demo/src/modules/customization/variables/examples/1/index.ts create mode 100644 projects/demo/src/modules/customization/variables/variables.component.ts create mode 100644 projects/demo/src/modules/customization/variables/variables.module.ts create mode 100644 projects/demo/src/modules/customization/variables/variables.style.less create mode 100644 projects/demo/src/modules/customization/variables/variables.template.html diff --git a/projects/addon-charts/components/bar-chart/bar-chart.style.less b/projects/addon-charts/components/bar-chart/bar-chart.style.less index fa6dda79e0be..65d361cdd940 100644 --- 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 index db07719eac46..dbb408d18aa1 100644 --- 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 index f289f232bdb9..c298293c996b 100644 --- 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 index 96755b4355e7..7d6835f88f32 100644 --- 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 index cb571c9ee61d..169e4b28244b 100644 --- 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 index 49a7d6ca9d26..f1bf80022a7a 100644 --- 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 index f928ebb8ecb2..37d11cc29933 100644 --- 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 index c6c6d3ee84fe..b215388accc1 100644 --- 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, - @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 { diff --git a/projects/addon-doc/src/components/copy/copy.style.less b/projects/addon-doc/src/components/copy/copy.style.less index ad7b925ec719..4b13d4473461 100644 --- 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 index a3876b6500c9..6a3a1af137d6 100644 --- a/projects/addon-doc/src/components/copy/copy.template.html +++ b/projects/addon-doc/src/components/copy/copy.template.html @@ -1,15 +1,17 @@ diff --git a/projects/addon-doc/src/components/demo/demo.style.less b/projects/addon-doc/src/components/demo/demo.style.less index 36fa86d11a9b..19ea3fa964b0 100644 --- 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 index 70471ece5bd5..c61f83f314bc 100644 --- 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,8 +80,7 @@ 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], @@ -90,8 +88,4 @@ export class TuiDocExampleComponent { }) .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 index b0d0e609a812..0e5379117843 100644 --- 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 index afa9212526ea..8609f7dbbf3e 100644 --- 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 index 987efa148083..32673ef57460 100644 --- a/projects/addon-doc/src/components/example/example.template.html +++ b/projects/addon-doc/src/components/example/example.template.html @@ -28,9 +28,10 @@

{{description}}

- - {{copy$ | async}} - + diff --git a/projects/addon-doc/src/components/navigation/navigation.module.ts b/projects/addon-doc/src/components/navigation/navigation.module.ts index 563edb637606..4414443d0999 100644 --- 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 index 2c7112f62754..7cd4a1dcf9bd 100644 --- 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 index d138478fda67..18c39d87f031 100644 --- a/projects/addon-doc/src/components/navigation/navigation.template.html +++ b/projects/addon-doc/src/components/navigation/navigation.template.html @@ -39,7 +39,11 @@