From 1961b9a05ca6454d75c692fb1684dd85bb56de86 Mon Sep 17 00:00:00 2001 From: Alex Inkin Date: Thu, 3 Dec 2020 16:06:15 +0300 Subject: [PATCH] feat(kit): refactor `Badge` and `BadgedContent` to use colors directly (#46) --- .../constants/default-color-handler.ts | 2 +- .../addon-charts/constants/default-colors.ts | 1 + .../core/directives/color/color.module.ts | 1 + projects/core/enums/base-color.ts | 1 + projects/core/enums/index.ts | 1 - projects/core/enums/support-color.ts | 1 + projects/core/enums/text-color.ts | 5 - projects/core/styles/markup/tui-list.less | 2 +- .../accordion/examples/2/index.less | 2 +- .../components/badge/badge.component.ts | 91 +----- .../modules/components/badge/badge.module.ts | 7 +- .../components/badge/badge.template.html | 26 +- .../components/badge/examples/1/index.html | 156 ++------- .../components/badge/examples/1/index.less | 10 + .../components/badge/examples/4/index.html | 7 +- .../components/badge/examples/4/index.less | 8 + .../components/badge/examples/4/index.ts | 1 + .../badge/examples/import/insert-template.txt | 6 +- .../badged-content.component.ts | 68 +--- .../badged-content/badged-content.module.ts | 24 +- .../badged-content.template.html | 39 +-- .../badged-content/examples/1/index.html | 46 +-- .../badged-content/examples/1/index.ts | 7 +- .../badged-content/examples/2/index.html | 22 +- .../badged-content/examples/2/index.less | 6 +- .../badged-content/examples/2/index.ts | 34 +- .../badged-content/examples/3/index.html | 53 ++- .../badged-content/examples/3/index.ts | 9 +- .../examples/import/insert-template.txt | 8 +- .../components/island/examples/1/index.less | 2 +- .../components/island/examples/2/index.less | 2 +- .../components/island/island.style.less | 2 +- .../components/select/examples/2/index.less | 2 +- .../modules/components/tag/tag.component.ts | 3 + .../skeleton/examples/1/index.style.less | 2 +- projects/demo/src/styles.less | 2 +- .../abstract/slider/slider.common.style.less | 2 +- .../kit/components/badge/badge.component.ts | 58 ++-- projects/kit/components/badge/badge.module.ts | 3 +- .../kit/components/badge/badge.style.less | 302 ++++++++---------- .../kit/components/badge/badge.template.html | 7 - .../badge/test/badge.component.spec.ts | 71 +--- .../badged-content.component.ts | 41 +-- .../badged-content/badged-content.module.ts | 11 +- .../badged-content/badged-content.style.less | 3 +- .../badged-content.template.html | 16 +- .../kit/components/radio/radio.style.less | 4 +- projects/kit/components/tag/tag.component.ts | 3 +- projects/kit/components/tag/tag.style.less | 136 +++++--- .../kit/components/toggle/toggle.style.less | 2 +- projects/kit/enums/status.ts | 11 +- 51 files changed, 498 insertions(+), 831 deletions(-) delete mode 100644 projects/core/enums/text-color.ts create mode 100644 projects/demo/src/modules/components/badge/examples/4/index.less delete mode 100644 projects/kit/components/badge/badge.template.html diff --git a/projects/addon-charts/constants/default-color-handler.ts b/projects/addon-charts/constants/default-color-handler.ts index 923b27b24aff..a3ff2dcb9c8a 100644 --- a/projects/addon-charts/constants/default-color-handler.ts +++ b/projects/addon-charts/constants/default-color-handler.ts @@ -1,5 +1,5 @@ import {TuiColorHandler} from '@taiga-ui/addon-charts/types'; - import {DEFAULT_COLORS} from './default-colors'; +// TODO: Consider removing export const TUI_DEFAULT_COLOR_HANDLER: TuiColorHandler = index => DEFAULT_COLORS[index]; diff --git a/projects/addon-charts/constants/default-colors.ts b/projects/addon-charts/constants/default-colors.ts index 21ea08a8fc8c..609977c31fdc 100644 --- a/projects/addon-charts/constants/default-colors.ts +++ b/projects/addon-charts/constants/default-colors.ts @@ -1,5 +1,6 @@ import {TuiBaseColor, TuiColor, TuiSupportColor} from '@taiga-ui/core'; +// TODO: Consider removing export const DEFAULT_COLORS: ReadonlyArray = [ TuiBaseColor.Primary, TuiSupportColor.Havelock, diff --git a/projects/core/directives/color/color.module.ts b/projects/core/directives/color/color.module.ts index 7f86c76fb57e..587074c47471 100644 --- a/projects/core/directives/color/color.module.ts +++ b/projects/core/directives/color/color.module.ts @@ -1,6 +1,7 @@ import {NgModule} from '@angular/core'; import {TuiColorDirective} from './color.directive'; +// TODO: Consider removing @NgModule({ declarations: [TuiColorDirective], exports: [TuiColorDirective], diff --git a/projects/core/enums/base-color.ts b/projects/core/enums/base-color.ts index 74fd7002aefc..217e42911586 100644 --- a/projects/core/enums/base-color.ts +++ b/projects/core/enums/base-color.ts @@ -1,3 +1,4 @@ +// TODO: Consider removing export const enum TuiBaseColor { Primary = 'primary', Secondary = 'secondary', diff --git a/projects/core/enums/index.ts b/projects/core/enums/index.ts index 043316bbad97..c91e480897db 100644 --- a/projects/core/enums/index.ts +++ b/projects/core/enums/index.ts @@ -12,4 +12,3 @@ export * from './notification'; export * from './orientation'; export * from './range-state'; export * from './support-color'; -export * from './text-color'; diff --git a/projects/core/enums/support-color.ts b/projects/core/enums/support-color.ts index 77eb3c3c36a5..715ac786d7bf 100644 --- a/projects/core/enums/support-color.ts +++ b/projects/core/enums/support-color.ts @@ -1,3 +1,4 @@ +// TODO: Consider removing export const enum TuiSupportColor { Mustard = 'support-01', Texas = 'support-02', diff --git a/projects/core/enums/text-color.ts b/projects/core/enums/text-color.ts deleted file mode 100644 index 512caed6d629..000000000000 --- a/projects/core/enums/text-color.ts +++ /dev/null @@ -1,5 +0,0 @@ -// TODO: Deprecated for being racist, remove after badges are refactored -export const enum TuiTextColor { - White = 'white', - Black = 'black', -} diff --git a/projects/core/styles/markup/tui-list.less b/projects/core/styles/markup/tui-list.less index d4b74622e4be..a75db32e4527 100644 --- a/projects/core/styles/markup/tui-list.less +++ b/projects/core/styles/markup/tui-list.less @@ -47,7 +47,7 @@ top: 8px; width: 8px; height: 8px; - border-radius: 50%; + border-radius: 100%; background-color: var(--tui-primary); .tui-list_large > & { diff --git a/projects/demo/src/modules/components/accordion/examples/2/index.less b/projects/demo/src/modules/components/accordion/examples/2/index.less index 6a009ce74435..941257d469e8 100644 --- a/projects/demo/src/modules/components/accordion/examples/2/index.less +++ b/projects/demo/src/modules/components/accordion/examples/2/index.less @@ -32,7 +32,7 @@ flex-shrink: 0; margin: 0 24px; background: var(--tui-secondary-active); - border-radius: 50%; + border-radius: 100%; width: 48px; height: 48px; color: var(--tui-text-03); diff --git a/projects/demo/src/modules/components/badge/badge.component.ts b/projects/demo/src/modules/components/badge/badge.component.ts index dd2fed7f613f..dd91787ae2c7 100644 --- a/projects/demo/src/modules/components/badge/badge.component.ts +++ b/projects/demo/src/modules/components/badge/badge.component.ts @@ -10,19 +10,14 @@ import {default as example3Less} from '!!raw-loader!./examples/3/index.less'; import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts'; import {default as example4Html} from '!!raw-loader!./examples/4/index.html'; +import {default as example4Less} from '!!raw-loader!./examples/4/index.less'; import {default as example4Ts} from '!!raw-loader!./examples/4/index.ts'; import {default as exampleImportModule} from '!!raw-loader!./examples/import/import-module.txt'; import {default as exampleInsertTemplate} from '!!raw-loader!./examples/import/insert-template.txt'; import {Component} from '@angular/core'; -import { - TuiNotification, - TuiSizeL, - TuiSizeS, - TuiSupportColor, - TuiTextColor, -} from '@taiga-ui/core'; +import {TuiSizeL, TuiSizeS} from '@taiga-ui/core'; import {TuiStatus} from '@taiga-ui/kit'; import {changeDetection} from '../../../change-detection-strategy'; import {FrontEndExample} from '../../interfaces/front-end-example'; @@ -56,78 +51,19 @@ export class ExampleTuiBadgeComponent { readonly example4: FrontEndExample = { TypeScript: example4Ts, HTML: example4Html, + LESS: example4Less, }; - readonly statusVariants: ReadonlyArray = [ - TuiStatus.Normal, - TuiStatus.Error, - TuiStatus.Success, - TuiStatus.Light, - TuiStatus.Gray, + readonly statusVariants: ReadonlyArray = [ + TuiStatus.Default, TuiStatus.Primary, - TuiStatus.Secondary, - TuiStatus.TransparentDark, - TuiStatus.TransparentLight, - TuiStatus.White, - TuiStatus.Highlight, - TuiSupportColor.Mustard, - TuiSupportColor.Texas, - TuiSupportColor.Tan, - TuiSupportColor.Salmon, - TuiSupportColor.Sienna, - TuiSupportColor.Bittersweet, - TuiSupportColor.Pinkie, - TuiSupportColor.Charm, - TuiSupportColor.Amethist, - TuiSupportColor.Helio, - TuiSupportColor.Lilac, - TuiSupportColor.Malibu, - TuiSupportColor.Havelock, - TuiSupportColor.Picton, - TuiSupportColor.Mint, - TuiSupportColor.Fountain, - TuiSupportColor.Puertorico, - TuiSupportColor.Bay, - TuiSupportColor.Forest, - TuiSupportColor.York, - TuiSupportColor.Feijoa, - TuiStatus.Inherit, - ]; - - status: TuiStatus | TuiSupportColor = this.statusVariants[0]; - - readonly notificationVariants: ReadonlyArray< - TuiNotification | TuiSupportColor | null - > = [ - null, - TuiNotification.Info, - TuiNotification.Warning, - TuiNotification.Error, - TuiNotification.Success, - TuiSupportColor.Mustard, - TuiSupportColor.Texas, - TuiSupportColor.Tan, - TuiSupportColor.Salmon, - TuiSupportColor.Sienna, - TuiSupportColor.Bittersweet, - TuiSupportColor.Pinkie, - TuiSupportColor.Charm, - TuiSupportColor.Amethist, - TuiSupportColor.Helio, - TuiSupportColor.Lilac, - TuiSupportColor.Malibu, - TuiSupportColor.Havelock, - TuiSupportColor.Picton, - TuiSupportColor.Mint, - TuiSupportColor.Fountain, - TuiSupportColor.Puertorico, - TuiSupportColor.Bay, - TuiSupportColor.Forest, - TuiSupportColor.York, - TuiSupportColor.Feijoa, + TuiStatus.Success, + TuiStatus.Error, + TuiStatus.Warning, + TuiStatus.Custom, ]; - notification: TuiNotification | TuiSupportColor | null = null; + status = this.statusVariants[0]; values: {[key: string]: string | number} = { Taiga: 'Taiga', @@ -140,13 +76,6 @@ export class ExampleTuiBadgeComponent { size: TuiSizeS | TuiSizeL = this.sizeVariants[1]; - readonly textColorVariants: ReadonlyArray = [ - TuiTextColor.Black, - TuiTextColor.White, - ]; - - textColor: TuiTextColor | null = null; - valueVariants: ReadonlyArray = Object.keys(this.values); value: string | number = 'Taiga'; diff --git a/projects/demo/src/modules/components/badge/badge.module.ts b/projects/demo/src/modules/components/badge/badge.module.ts index 8641fb1022d5..e0cc883f4cf0 100644 --- a/projects/demo/src/modules/components/badge/badge.module.ts +++ b/projects/demo/src/modules/components/badge/badge.module.ts @@ -1,8 +1,9 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {RouterModule} from '@angular/router'; import {generateRoutes, TUI_DOC_PAGE_MODULES} from '@taiga-ui/addon-doc'; +import {TuiRepeatTimesModule} from '@taiga-ui/cdk'; +import {TuiModeModule} from '@taiga-ui/core'; import {TuiBadgeModule} from '@taiga-ui/kit'; import {ExampleTuiBadgeComponent} from './badge.component'; import {TuiBadgeExample1} from './examples/1'; @@ -13,9 +14,9 @@ import {TuiBadgeExample4} from './examples/4'; @NgModule({ imports: [ TuiBadgeModule, + TuiModeModule, + TuiRepeatTimesModule, CommonModule, - FormsModule, - ReactiveFormsModule, ...TUI_DOC_PAGE_MODULES, RouterModule.forChild(generateRoutes(ExampleTuiBadgeComponent)), ], diff --git a/projects/demo/src/modules/components/badge/badge.template.html b/projects/demo/src/modules/components/badge/badge.template.html index 52f2626553ed..2cb574440415 100644 --- a/projects/demo/src/modules/components/badge/badge.template.html +++ b/projects/demo/src/modules/components/badge/badge.template.html @@ -44,10 +44,8 @@ @@ -58,16 +56,7 @@ documentationPropertyMode="input" [(documentationPropertyValue)]="hoverable" > - Позволяет включить эффект наведения на бэдж (hover). - - - Показывать нотификацию выбранного цвета + Позволяет включить изменение цвета при наведении - Статус меняет цвет бейджа. - - - Цвет текста + Статус меняет цвет бейджа Значение. Числовые значения, превыщающие 99, заменяются - на «99+». + на «99+» diff --git a/projects/demo/src/modules/components/badge/examples/1/index.html b/projects/demo/src/modules/components/badge/examples/1/index.html index b7ec53e02c2f..7c48f1d9ea09 100644 --- a/projects/demo/src/modules/components/badge/examples/1/index.html +++ b/projects/demo/src/modules/components/badge/examples/1/index.html @@ -1,132 +1,28 @@ -
- Основные цвета - - - - - - - - -
- -
-
- -
-
- -
+

Основные цвета

+ + + + + +
+
-
- Вспомогательные цвета - - - - - - - - - - - - - - - - - - - - - +
+
+

Вспомогательные цвета через CSS и status="custom"

+ diff --git a/projects/demo/src/modules/components/badge/examples/1/index.less b/projects/demo/src/modules/components/badge/examples/1/index.less index 7d3dee1a4715..e1ab4849f38a 100644 --- a/projects/demo/src/modules/components/badge/examples/1/index.less +++ b/projects/demo/src/modules/components/badge/examples/1/index.less @@ -11,3 +11,13 @@ background: #e5e7ea; } } + +@iterations: 20; + +.loop (@i) when (@i > 0) { + .support-@{i} { + background-color: ~'var(--tui-support-@{i}, var(--tui-support-0@{i}))'; + } + .loop(@i - 1); +} +.loop (@iterations); diff --git a/projects/demo/src/modules/components/badge/examples/4/index.html b/projects/demo/src/modules/components/badge/examples/4/index.html index 0d076359e25e..5d538829b25b 100644 --- a/projects/demo/src/modules/components/badge/examples/4/index.html +++ b/projects/demo/src/modules/components/badge/examples/4/index.html @@ -1,6 +1 @@ - + diff --git a/projects/demo/src/modules/components/badge/examples/4/index.less b/projects/demo/src/modules/components/badge/examples/4/index.less new file mode 100644 index 000000000000..b98ef0a08463 --- /dev/null +++ b/projects/demo/src/modules/components/badge/examples/4/index.less @@ -0,0 +1,8 @@ +.custom { + background: var(--tui-support-01); + + &:before { + content: ''; + color: var(--tui-support-02); + } +} diff --git a/projects/demo/src/modules/components/badge/examples/4/index.ts b/projects/demo/src/modules/components/badge/examples/4/index.ts index def9dda941e1..f74b4c46bb4b 100644 --- a/projects/demo/src/modules/components/badge/examples/4/index.ts +++ b/projects/demo/src/modules/components/badge/examples/4/index.ts @@ -5,6 +5,7 @@ import {encapsulation} from '../../../../../view-encapsulation'; @Component({ selector: 'tui-badge-example-4', templateUrl: './index.html', + styleUrls: ['./index.less'], changeDetection, encapsulation, }) diff --git a/projects/demo/src/modules/components/badge/examples/import/insert-template.txt b/projects/demo/src/modules/components/badge/examples/import/insert-template.txt index d4a3a9fd4428..d0600b94b182 100644 --- a/projects/demo/src/modules/components/badge/examples/import/insert-template.txt +++ b/projects/demo/src/modules/components/badge/examples/import/insert-template.txt @@ -1,8 +1,6 @@ - + - + diff --git a/projects/demo/src/modules/components/badged-content/badged-content.component.ts b/projects/demo/src/modules/components/badged-content/badged-content.component.ts index 88817e81769f..1a6e01dbe4fa 100644 --- a/projects/demo/src/modules/components/badged-content/badged-content.component.ts +++ b/projects/demo/src/modules/components/badged-content/badged-content.component.ts @@ -11,8 +11,7 @@ import {default as exampleImportModule} from '!!raw-loader!./examples/import/imp import {default as exampleInsertTemplate} from '!!raw-loader!./examples/import/insert-template.txt'; import {Component} from '@angular/core'; -import {TuiNotification, TuiSizeXS, TuiSizeXXL, TuiSupportColor} from '@taiga-ui/core'; -import {TuiStatus} from '@taiga-ui/kit'; +import {TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core'; import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; import {changeDetection} from '../../../change-detection-strategy'; import {FrontEndExample} from '../../interfaces/front-end-example'; @@ -41,54 +40,9 @@ export class ExampleTuiBadgedContentComponent { HTML: example3Html, }; - imageUrl = 'https://ng-web-apis.github.io/dist/assets/images/web-api.svg'; - - borderColor = '#fff'; - - statusVariants: ReadonlyArray< - TuiStatus | TuiSupportColor | TuiNotification | null - > = [ - null, - TuiStatus.Normal, - TuiStatus.Error, - TuiStatus.Success, - TuiStatus.Light, - TuiStatus.Gray, - TuiStatus.Primary, - TuiStatus.Secondary, - TuiStatus.White, - TuiStatus.Highlight, - TuiStatus.Inherit, - TuiNotification.Info, - TuiNotification.Warning, - TuiSupportColor.Mustard, - TuiSupportColor.Texas, - TuiSupportColor.Tan, - TuiSupportColor.Salmon, - TuiSupportColor.Sienna, - TuiSupportColor.Bittersweet, - TuiSupportColor.Pinkie, - TuiSupportColor.Charm, - TuiSupportColor.Amethist, - TuiSupportColor.Helio, - TuiSupportColor.Lilac, - TuiSupportColor.Malibu, - TuiSupportColor.Havelock, - TuiSupportColor.Picton, - TuiSupportColor.Mint, - TuiSupportColor.Fountain, - TuiSupportColor.Puertorico, - TuiSupportColor.Bay, - TuiSupportColor.Forest, - TuiSupportColor.York, - TuiSupportColor.Feijoa, - ]; - - text = 'daenerys targaryen'; - rounded = false; - sizeVariants: ReadonlyArray = [ + readonly sizeVariants: ReadonlyArray = [ 'xs', 's', 'm', @@ -99,13 +53,21 @@ export class ExampleTuiBadgedContentComponent { size = this.sizeVariants[2]; - statusTop: TuiStatus | TuiNotification | TuiSupportColor | null = null; + colorTop = ''; - statusBottom: TuiStatus | TuiNotification | TuiSupportColor | null = null; + colorBottom = ''; - contentTop: PolymorpheusContent | null = null; + contentTop: PolymorpheusContent = ''; - contentBottom: PolymorpheusContent | null = null; + contentBottom: PolymorpheusContent = ''; - contentVariants = [1, 5, 155, 'tuiIconCheck', 'Шаблон', 'tuiIconCheckCircleLarge']; + readonly contentVariants = [ + '', + 1, + 5, + 155, + 'tuiIconCheck', + 'Шаблон', + 'tuiIconCheckCircleLarge', + ]; } diff --git a/projects/demo/src/modules/components/badged-content/badged-content.module.ts b/projects/demo/src/modules/components/badged-content/badged-content.module.ts index 96bdba0ba3e4..6f05f2b7176c 100644 --- a/projects/demo/src/modules/components/badged-content/badged-content.module.ts +++ b/projects/demo/src/modules/components/badged-content/badged-content.module.ts @@ -1,17 +1,10 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {FormsModule, ReactiveFormsModule} from '@angular/forms'; +import {FormsModule} from '@angular/forms'; import {RouterModule} from '@angular/router'; import {generateRoutes, TUI_DOC_PAGE_MODULES} from '@taiga-ui/addon-doc'; -import {TuiButtonModule, TuiSvgModule} from '@taiga-ui/core'; -import { - TuiAvatarModule, - TuiBadgedContentModule, - TuiInputModule, - TuiMarkerIconModule, - TuiRadioListModule, -} from '@taiga-ui/kit'; -import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus'; +import {TuiButtonModule} from '@taiga-ui/core'; +import {TuiAvatarModule, TuiBadgedContentModule, TuiInputModule} from '@taiga-ui/kit'; import {ExampleTuiBadgedContentComponent} from './badged-content.component'; import {TuiBadgedContentExample1} from './examples/1'; import {TuiBadgedContentExample2} from './examples/2'; @@ -19,18 +12,13 @@ import {TuiBadgedContentExample3} from './examples/3'; @NgModule({ imports: [ + CommonModule, + FormsModule, TuiAvatarModule, - TuiMarkerIconModule, TuiBadgedContentModule, - ...TUI_DOC_PAGE_MODULES, - CommonModule, TuiInputModule, - PolymorpheusModule, TuiButtonModule, - TuiRadioListModule, - TuiSvgModule, - FormsModule, - ReactiveFormsModule, + ...TUI_DOC_PAGE_MODULES, RouterModule.forChild(generateRoutes(ExampleTuiBadgedContentComponent)), ], declarations: [ diff --git a/projects/demo/src/modules/components/badged-content/badged-content.template.html b/projects/demo/src/modules/components/badged-content/badged-content.template.html index c2083e17bff4..3d9f3097d96c 100644 --- a/projects/demo/src/modules/components/badged-content/badged-content.template.html +++ b/projects/demo/src/modules/components/badged-content/badged-content.template.html @@ -33,45 +33,34 @@ - + - - Цвет обводки вокруг бейджа. Выставите null и - используйте CSS color - @@ -83,7 +72,7 @@ @@ -93,21 +82,19 @@ кроме 'xs'. Цвет содержимого в правом нижнем углу. При отсутствии содержимого, показывается кружок соответствующего цвета. Цвет содержимого в правом верхнем углу. При отсутствии содержимого, показывается кружок соответствующего цвета. diff --git a/projects/demo/src/modules/components/badged-content/examples/1/index.html b/projects/demo/src/modules/components/badged-content/examples/1/index.html index f3f620aaca03..057635d896ac 100644 --- a/projects/demo/src/modules/components/badged-content/examples/1/index.html +++ b/projects/demo/src/modules/components/badged-content/examples/1/index.html @@ -1,56 +1,56 @@
- + - + - +
- + - + - +
diff --git a/projects/demo/src/modules/components/badged-content/examples/1/index.ts b/projects/demo/src/modules/components/badged-content/examples/1/index.ts index b5b70152b20c..3c22b2c04013 100644 --- a/projects/demo/src/modules/components/badged-content/examples/1/index.ts +++ b/projects/demo/src/modules/components/badged-content/examples/1/index.ts @@ -8,9 +8,4 @@ import {encapsulation} from '../../../../../view-encapsulation'; changeDetection, encapsulation, }) -export class TuiBadgedContentExample1 { - badgeStatus = 'success'; - notification = 'error'; - rounded = true; - size = 'l'; -} +export class TuiBadgedContentExample1 {} diff --git a/projects/demo/src/modules/components/badged-content/examples/2/index.html b/projects/demo/src/modules/components/badged-content/examples/2/index.html index 3ac81ca58cea..af518de6308a 100644 --- a/projects/demo/src/modules/components/badged-content/examples/2/index.html +++ b/projects/demo/src/modules/components/badged-content/examples/2/index.html @@ -1,32 +1,26 @@ -
- -
- - Введите текст - -
- -
+ + Введите текст +
- -
... ничего не произойдет
+ +
... ничего не произойдет
diff --git a/projects/demo/src/modules/components/badged-content/examples/2/index.less b/projects/demo/src/modules/components/badged-content/examples/2/index.less index 143a16b922b0..c4e9d21a635b 100644 --- a/projects/demo/src/modules/components/badged-content/examples/2/index.less +++ b/projects/demo/src/modules/components/badged-content/examples/2/index.less @@ -1,9 +1,9 @@ .input { - min-width: 320px; + width: 320px; } -.custom-template { +.template { background: var(--tui-primary); - color: var(--tui-base-09); + color: var(--tui-primary-text); padding: 0 6px; } diff --git a/projects/demo/src/modules/components/badged-content/examples/2/index.ts b/projects/demo/src/modules/components/badged-content/examples/2/index.ts index 7ac50b58b0bf..e6d97fc3b5c4 100644 --- a/projects/demo/src/modules/components/badged-content/examples/2/index.ts +++ b/projects/demo/src/modules/components/badged-content/examples/2/index.ts @@ -1,8 +1,4 @@ import {Component} from '@angular/core'; -import {FormControl, FormGroup} from '@angular/forms'; -import {TuiNotification, TuiSupportColor} from '@taiga-ui/core'; -import {TuiStatus} from '@taiga-ui/kit'; -import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; import {changeDetection} from '../../../../../change-detection-strategy'; import {encapsulation} from '../../../../../view-encapsulation'; @@ -14,31 +10,23 @@ import {encapsulation} from '../../../../../view-encapsulation'; encapsulation, }) export class TuiBadgedContentExample2 { - testForm = new FormGroup({ - testValue: new FormControl(''), - }); + value = ''; - badgeValueCount = 0; - - buttonStatusTop: TuiNotification | TuiStatus | TuiSupportColor | null = null; - - contentTop: PolymorpheusContent | null = null; + contentTop = 0; get badgeValue(): number { - return this.testForm.value.testValue.length; + return this.value.length; } - onClick() { - this.badgeValueCount++; - - this.contentTop = this.badgeValueCount; + get color(): string { + return this.contentTop === 50 ? 'tuiIconCheck' : 'var(--tui-error-fill)'; + } - if (this.badgeValueCount > 0) { - this.buttonStatusTop = TuiStatus.Error; - } + get contentBottom(): string { + return this.contentTop === 50 ? '' : ''; + } - if (this.badgeValueCount === 50) { - this.contentTop = 'tuiIconCheck'; - } + onClick() { + this.contentTop++; } } diff --git a/projects/demo/src/modules/components/badged-content/examples/3/index.html b/projects/demo/src/modules/components/badged-content/examples/3/index.html index 21ff755e2d9b..c8bbfae84fea 100644 --- a/projects/demo/src/modules/components/badged-content/examples/3/index.html +++ b/projects/demo/src/modules/components/badged-content/examples/3/index.html @@ -2,63 +2,62 @@ - + - + - +
- + - + - +
diff --git a/projects/demo/src/modules/components/badged-content/examples/3/index.ts b/projects/demo/src/modules/components/badged-content/examples/3/index.ts index 27cc2e003bd4..0db8e16d52eb 100644 --- a/projects/demo/src/modules/components/badged-content/examples/3/index.ts +++ b/projects/demo/src/modules/components/badged-content/examples/3/index.ts @@ -8,11 +8,4 @@ import {encapsulation} from '../../../../../view-encapsulation'; changeDetection, encapsulation, }) -export class TuiBadgedContentExample3 { - avatar = 'https://ng-web-apis.github.io/dist/assets/images/web-api.svg'; - badgeStatus = 'success'; - badgeValue = 64; - notification = 'error'; - rounded = true; - size = 'l'; -} +export class TuiBadgedContentExample3 {} diff --git a/projects/demo/src/modules/components/badged-content/examples/import/insert-template.txt b/projects/demo/src/modules/components/badged-content/examples/import/insert-template.txt index 4dcef1511b7f..d6fedee3fc05 100644 --- a/projects/demo/src/modules/components/badged-content/examples/import/insert-template.txt +++ b/projects/demo/src/modules/components/badged-content/examples/import/insert-template.txt @@ -1,4 +1,6 @@ - - <Оборачиваемый-компонент> + + Оборачиваемый-компонент diff --git a/projects/demo/src/modules/components/island/examples/1/index.less b/projects/demo/src/modules/components/island/examples/1/index.less index d0122fac74b3..5b4377baf092 100644 --- a/projects/demo/src/modules/components/island/examples/1/index.less +++ b/projects/demo/src/modules/components/island/examples/1/index.less @@ -3,7 +3,7 @@ } .some-figure { - border-radius: 50%; + border-radius: 100%; width: 48px; height: 48px; background-color: var(--tui-secondary-active); diff --git a/projects/demo/src/modules/components/island/examples/2/index.less b/projects/demo/src/modules/components/island/examples/2/index.less index d0122fac74b3..5b4377baf092 100644 --- a/projects/demo/src/modules/components/island/examples/2/index.less +++ b/projects/demo/src/modules/components/island/examples/2/index.less @@ -3,7 +3,7 @@ } .some-figure { - border-radius: 50%; + border-radius: 100%; width: 48px; height: 48px; background-color: var(--tui-secondary-active); diff --git a/projects/demo/src/modules/components/island/island.style.less b/projects/demo/src/modules/components/island/island.style.less index 6348b304bbaf..ed582ab2884e 100644 --- a/projects/demo/src/modules/components/island/island.style.less +++ b/projects/demo/src/modules/components/island/island.style.less @@ -3,7 +3,7 @@ } .some-figure { - border-radius: 50%; + border-radius: 100%; width: 64px; height: 64px; background-color: var(--tui-secondary-active); diff --git a/projects/demo/src/modules/components/select/examples/2/index.less b/projects/demo/src/modules/components/select/examples/2/index.less index 90d6d1feb87e..2286ce3b1b1f 100644 --- a/projects/demo/src/modules/components/select/examples/2/index.less +++ b/projects/demo/src/modules/components/select/examples/2/index.less @@ -50,7 +50,7 @@ margin-right: @space * 2; width: 36px; height: 36px; - border-radius: 50%; + border-radius: 100%; background-color: var(--tui-base-01); font-weight: bold; } diff --git a/projects/demo/src/modules/components/tag/tag.component.ts b/projects/demo/src/modules/components/tag/tag.component.ts index e04d684f31ab..a704eeeb6a85 100644 --- a/projects/demo/src/modules/components/tag/tag.component.ts +++ b/projects/demo/src/modules/components/tag/tag.component.ts @@ -67,6 +67,9 @@ export class ExampleTuiTagComponent { readonly statusVariants: ReadonlyArray = [ TuiStatus.Default, TuiStatus.Primary, + TuiStatus.Success, + TuiStatus.Error, + TuiStatus.Warning, TuiStatus.Custom, ]; diff --git a/projects/demo/src/modules/markup/skeleton/examples/1/index.style.less b/projects/demo/src/modules/markup/skeleton/examples/1/index.style.less index 8e0d9b22772c..b5ac74334fd2 100644 --- a/projects/demo/src/modules/markup/skeleton/examples/1/index.style.less +++ b/projects/demo/src/modules/markup/skeleton/examples/1/index.style.less @@ -12,7 +12,7 @@ } .some-figure { - border-radius: 50%; + border-radius: 100%; width: 48px; height: 48px; background-color: var(--tui-secondary-active); diff --git a/projects/demo/src/styles.less b/projects/demo/src/styles.less index 1a037b42fb4b..a5ce441651b6 100644 --- a/projects/demo/src/styles.less +++ b/projects/demo/src/styles.less @@ -145,7 +145,7 @@ markdown { top: 8px; width: 8px; height: 8px; - border-radius: 50%; + border-radius: 100%; background-color: var(--tui-primary); } } diff --git a/projects/kit/abstract/slider/slider.common.style.less b/projects/kit/abstract/slider/slider.common.style.less index 25959402d634..c3d38af62550 100644 --- a/projects/kit/abstract/slider/slider.common.style.less +++ b/projects/kit/abstract/slider/slider.common.style.less @@ -65,7 +65,7 @@ width: 1em; height: 1em; transform: translate(0, -50%); - border-radius: 50%; + border-radius: 100%; background-color: var(--tui-primary); outline: none; cursor: ew-resize; diff --git a/projects/kit/components/badge/badge.component.ts b/projects/kit/components/badge/badge.component.ts index 8f6de1ab4f5e..dc5dc5f10661 100644 --- a/projects/kit/components/badge/badge.component.ts +++ b/projects/kit/components/badge/badge.component.ts @@ -1,21 +1,27 @@ -import {ChangeDetectionStrategy, Component, HostBinding, Input} from '@angular/core'; -import {tuiDefaultProp} from '@taiga-ui/cdk'; import { - TuiBaseColor, - TuiColor, - TuiNotification, + ChangeDetectionStrategy, + Component, + HostBinding, + Inject, + Input, +} from '@angular/core'; +import {tuiDefaultProp, TuiDestroyService} from '@taiga-ui/cdk'; +import { + MODE_PROVIDER, + TUI_MODE, + TuiModeVariants, TuiSizeL, TuiSizeS, - TuiSupportColor, - TuiTextColor, } from '@taiga-ui/core'; import {TuiStatus} from '@taiga-ui/kit/enums'; +import {Observable} from 'rxjs'; @Component({ selector: 'tui-badge', changeDetection: ChangeDetectionStrategy.OnPush, - templateUrl: './badge.template.html', + template: '{{outputValue}}', styleUrls: ['./badge.style.less'], + providers: [TuiDestroyService, MODE_PROVIDER], }) export class TuiBadgeComponent { @Input() @@ -28,23 +34,24 @@ export class TuiBadgeComponent { size: TuiSizeS | TuiSizeL = 'm'; @Input() - @HostBinding('attr.data-tui-background') - @tuiDefaultProp() - status: TuiStatus | TuiSupportColor = TuiStatus.Normal; - - @Input() - @HostBinding('attr.data-tui-host-text-color') - textColor: TuiTextColor | null = null; - - @Input() + @HostBinding('attr.data-tui-host-status') @tuiDefaultProp() - notification: TuiNotification | TuiSupportColor | null = null; + status: TuiStatus = TuiStatus.Default; @Input() @HostBinding('class._hoverable') @tuiDefaultProp() hoverable = false; + @HostBinding('attr.data-tui-host-mode') + mode: TuiModeVariants | null = null; + + constructor(@Inject(TUI_MODE) mode$: Observable) { + mode$.subscribe(mode => { + this.mode = mode; + }); + } + @HostBinding('attr.data-tui-host-padding') get padding(): string { return typeof this.value.valueOf() === 'number' ? 'm' : 'l'; @@ -57,19 +64,4 @@ export class TuiBadgeComponent { return this.value; } } - - get notificationBackground(): TuiColor | null { - switch (this.notification) { - case TuiNotification.Warning: - return TuiBaseColor.Primary; - case TuiNotification.Info: - return null; - case TuiNotification.Error: - return TuiBaseColor.Error; - case TuiNotification.Success: - return TuiBaseColor.Success; - default: - return this.notification; - } - } } diff --git a/projects/kit/components/badge/badge.module.ts b/projects/kit/components/badge/badge.module.ts index 958e97543fea..810a1ae6feb1 100644 --- a/projects/kit/components/badge/badge.module.ts +++ b/projects/kit/components/badge/badge.module.ts @@ -1,10 +1,9 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {TuiColorModule} from '@taiga-ui/core'; import {TuiBadgeComponent} from './badge.component'; @NgModule({ - imports: [CommonModule, TuiColorModule], + imports: [CommonModule], declarations: [TuiBadgeComponent], exports: [TuiBadgeComponent], }) diff --git a/projects/kit/components/badge/badge.style.less b/projects/kit/components/badge/badge.style.less index 5e3488d0c694..1eabe99e2116 100644 --- a/projects/kit/components/badge/badge.style.less +++ b/projects/kit/components/badge/badge.style.less @@ -15,241 +15,213 @@ white-space: nowrap; overflow: hidden; - &:hover, - &:active { - &._hoverable { - &[data-tui-background='inherit'], - &[data-tui-background^='support-'], - &[data-tui-background='success'], - &[data-tui-background='error'] { - &:before { - .fullsize(); - content: ''; - background-color: var(--tui-clear); - } - } + &:after { + .transition(background); + .fullsize(); + content: ''; + box-sizing: border-box; + border-radius: inherit; + pointer-events: none; + } + + &._hoverable:hover, + &._hoverable:active { + &[data-tui-host-status='custom']:after { + background-color: var(--tui-clear); } } - &._hoverable { - cursor: pointer; - } - - &[data-tui-host-padding='m'] { - padding: 0 @padding - 4px; + &[data-tui-host-status='primary'] { + background-color: var(--tui-primary); + color: var(--tui-primary-text); - &[data-tui-host-size='s'] { - padding: 0 @padding - 6px; + &._hoverable:hover { + background-color: var(--tui-primary-hover); } - &[data-tui-host-size='l'] { - padding: 0 @padding - 2px; + &._hoverable:active { + background-color: var(--tui-primary-active); } } - &[data-tui-host-padding='l'] { - padding: 0 @padding; + &[data-tui-host-status='error'] { + background-color: var(--tui-error-bg); + color: var(--tui-text-01); - &[data-tui-host-size='s'] { - padding: 0 @padding - 2px; + &:before { + content: ''; + color: var(--tui-error-fill); } - } - &[data-tui-host-size='s'] { - .text-body-xs(); - height: @height-extra-extra-small; - line-height: @height-extra-extra-small; - min-width: @height-extra-extra-small; - } + &._hoverable:hover, + &._hoverable:active { + background-color: var(--tui-error-bg-hover); + } - &[data-tui-host-size='m'] { - height: @height-extra-small; - line-height: @height-extra-small; - min-width: @height-extra-small; - } + &[data-tui-host-mode='light'] { + background-color: var(--tui-error-bg-night); + color: var(--tui-text-01-night); - &[data-tui-host-size='l'] { - height: @height-small; - line-height: @height-small; - min-width: @height-small; + &._hoverable:hover, + &._hoverable:active { + background-color: var(--tui-error-bg-night-hover); + } + } } - &[data-tui-background='normal'] { - background-color: var(--tui-base-06); - - &._hoverable { - &:hover { - background-color: var(--tui-base-07); - } + &[data-tui-host-status='success'] { + background-color: var(--tui-success-bg); + color: var(--tui-text-01); - &:active { - background-color: var(--tui-base-08); - } + &:before { + content: ''; + color: var(--tui-success-fill); } - } - &[data-tui-background='light'] { - background-color: var(--tui-secondary); + &._hoverable:hover, + &._hoverable:active { + background-color: var(--tui-success-bg-hover); + } - &._hoverable { - &:hover { - background-color: var(--tui-secondary-hover); - } + &[data-tui-host-mode='light'] { + background-color: var(--tui-success-bg-night); + color: var(--tui-text-01-night); - &:active { - background-color: var(--tui-secondary-active); + &._hoverable:hover, + &._hoverable:active { + background-color: var(--tui-success-bg-night-hover); } } } - &[data-tui-background='gray'] { - background-color: var(--tui-base-03); + &[data-tui-host-status='warning'] { + background-color: var(--tui-warning-bg); + color: var(--tui-text-01); - &._hoverable { - &:hover { - background-color: var(--tui-base-04); - } + &:before { + content: ''; + color: var(--tui-warning-fill); + } + + &._hoverable:hover, + &._hoverable:active { + background-color: var(--tui-warning-bg-hover); + } - &:active { - background-color: var(--tui-base-05); + &[data-tui-host-mode='light'] { + background-color: var(--tui-warning-bg-night); + color: var(--tui-text-01-night); + + &._hoverable:hover, + &._hoverable:active { + background-color: var(--tui-warning-bg-night-hover); } } } - &[data-tui-background='primary'] { - color: var(--tui-primary-text); + &[data-tui-host-status='default'] { + background-color: var(--tui-base-06); - &._hoverable { - &:hover { - background-color: var(--tui-primary-hover); + &:not([data-tui-host-mode]) { + &._hoverable:hover { + background-color: var(--tui-base-07); } - &:active { - background-color: var(--tui-primary-active); + &._hoverable:active { + background-color: var(--tui-base-08); } } - } - &[data-tui-background='secondary'] { - color: var(--tui-accent-text); - background-color: var(--tui-accent); + &[data-tui-host-mode='light'] { + background-color: var(--tui-clear-inverse); - &._hoverable { - &:hover { - background-color: var(--tui-accent-hover); + &._hoverable:hover { + background-color: var(--tui-clear-inverse-hover); + } + + &._hoverable:active { + background-color: var(--tui-clear-inverse-active); } - &:active { - background-color: var(--tui-accent-active); + &:focus:after { + border: 2px solid var(--tui-base-01); } } - } - &[data-tui-background='transparent-dark'] { - background-color: var(--tui-clear); + &[data-tui-host-mode='dark'] { + background-color: var(--tui-clear); + color: var(--tui-text-01); - &._hoverable { - &:hover { + &._hoverable:hover { background-color: var(--tui-clear-hover); } - &:active { + &._hoverable:active { background-color: var(--tui-clear-active); } } } - &[data-tui-background='transparent-light'] { - background-color: var(--tui-clear-inverse); - - &._hoverable { - &:hover { - background-color: var(--tui-clear-inverse-hover); - } - - &:active { - background-color: var(--tui-clear-inverse-active); - } - } + &._hoverable { + cursor: pointer; } - &[data-tui-background='highlight'] { - color: var(--tui-text-01); - background-color: var(--tui-base-01); + &[data-tui-host-padding='m'] { + padding: 0 @padding - 4px; - &:after { - .fullsize(); - content: ''; - box-sizing: border-box; - border-radius: inherit; - border: 2px solid var(--tui-primary); + &[data-tui-host-size='s'] { + padding: 0 @padding - 6px; } - &._hoverable { - &:hover, - &:active { - background-color: var(--tui-base-01); - - &:after { - border-color: var(--tui-primary-hover); - } - } + &[data-tui-host-size='l'] { + padding: 0 @padding - 2px; } } - &[data-tui-background='white'] { - color: var(--tui-text-01); - background-color: var(--tui-base-01); - - &._hoverable { - &:hover, - &:active { - background-color: var(--tui-base-01); - - &:after { - .fullsize(); - content: ''; - box-sizing: border-box; - border-radius: inherit; - border: 1px solid var(--tui-base-04); - } - } + &[data-tui-host-padding='l'] { + padding: 0 @padding; + + &[data-tui-host-size='s'] { + padding: 0 @padding - 2px; } } - &[data-tui-background='light'], - &[data-tui-background='gray'], - &[data-tui-background='transparent-dark'] { - color: var(--tui-text-01); + &[data-tui-host-size='s'] { + .text-body-xs(); + height: @height-extra-extra-small; + line-height: @height-extra-extra-small; + min-width: @height-extra-extra-small; } - &[data-tui-host-text-color='black'] { - color: var(--tui-text-01); + &[data-tui-host-size='m'] { + height: @height-extra-small; + line-height: @height-extra-small; + min-width: @height-extra-small; } - &[data-tui-host-text-color='white'] { - color: var(--tui-base-01); + &[data-tui-host-size='l'] { + height: @height-small; + line-height: @height-small; + min-width: @height-small; } -} - -.notification { - margin: 0 6px 0 -2px; - width: 6px; - height: 6px; - border-radius: 50%; - &:not([data-tui-background]) { - background-color: var(--tui-base-06); - } + &:before { + display: block; + background: currentColor; + margin: 0 6px 0 -2px; + width: 6px; + height: 6px; + border-radius: 100%; - :host[data-tui-host-size='s'] & { - width: 4px; - height: 4px; - } + :host[data-tui-host-size='s'] & { + width: 4px; + height: 4px; + } - :host[data-tui-host-size='l'] & { - margin: 0 8px 0 0; - width: 8px; - height: 8px; + :host[data-tui-host-size='l'] & { + margin: 0 8px 0 0; + width: 8px; + height: 8px; + } } } diff --git a/projects/kit/components/badge/badge.template.html b/projects/kit/components/badge/badge.template.html deleted file mode 100644 index 4f689b27a4be..000000000000 --- a/projects/kit/components/badge/badge.template.html +++ /dev/null @@ -1,7 +0,0 @@ - -{{outputValue}} diff --git a/projects/kit/components/badge/test/badge.component.spec.ts b/projects/kit/components/badge/test/badge.component.spec.ts index f61c632296b7..54a5389db1ba 100644 --- a/projects/kit/components/badge/test/badge.component.spec.ts +++ b/projects/kit/components/badge/test/badge.component.spec.ts @@ -1,7 +1,6 @@ -import {Component, DebugElement, ViewChild} from '@angular/core'; +import {Component, ElementRef, ViewChild} from '@angular/core'; import {ComponentFixture, TestBed} from '@angular/core/testing'; -import {TuiNotification, TuiSizeL, TuiSupportColor} from '@taiga-ui/core'; -import {PageObject} from '@taiga-ui/testing'; +import {TuiSizeL} from '@taiga-ui/core'; import {configureTestSuite} from 'ng-bullet'; import {TuiStatus} from '../../../enums/status'; import {TuiBadgeComponent} from '../badge.component'; @@ -10,49 +9,24 @@ import {TuiBadgeModule} from '../badge.module'; describe('Badge', () => { @Component({ template: ` - + `, }) class TestComponent { @ViewChild(TuiBadgeComponent, {static: true}) component: TuiBadgeComponent; - hoverable = false; - notification: TuiNotification | TuiSupportColor | null = null; + @ViewChild(TuiBadgeComponent, {read: ElementRef, static: true}) + element: ElementRef; + size: TuiSizeL = 'm'; value: number | string; - status: TuiStatus | null = null; + status = TuiStatus.Default; } let fixture: ComponentFixture; let testComponent: TestComponent; let component: TuiBadgeComponent; - let pageObject: PageObject; - const testContext = { - get prefix() { - return 'tui-badge__'; - }, - }; - - function getNotification(): DebugElement | null { - return pageObject.getByAutomationId(`${testContext.prefix}notification`); - } - - function getOutputValue(): HTMLElement { - return pageObject.getByAutomationId(`${testContext.prefix}output-value`)! - .nativeElement; - } - - function getBadge(): DebugElement { - return pageObject.getByAutomationId(`${testContext.prefix}component`)!; - } configureTestSuite(() => { TestBed.configureTestingModule({ @@ -63,7 +37,6 @@ describe('Badge', () => { beforeEach(() => { fixture = TestBed.createComponent(TestComponent); - pageObject = new PageObject(fixture); testComponent = fixture.componentInstance; fixture.detectChanges(); component = testComponent.component; @@ -74,28 +47,28 @@ describe('Badge', () => { testComponent.value = 99; fixture.detectChanges(); - expect(getOutputValue().textContent).toEqual('99'); + expect(testComponent.element.nativeElement.textContent).toEqual('99'); }); it('если принимает трехзначное и более, выводит сокращение 99+', () => { testComponent.value = 999; fixture.detectChanges(); - expect(getOutputValue().textContent).toEqual('99+'); + expect(testComponent.element.nativeElement.textContent).toEqual('99+'); }); it('если принимает строку, выводит её', () => { testComponent.value = 'Текст'; fixture.detectChanges(); - expect(getOutputValue().textContent).toEqual('Текст'); + expect(testComponent.element.nativeElement.textContent).toEqual('Текст'); }); it('если принимает строку, содержащую число, выводит её в неизменном виде', () => { testComponent.value = '125'; fixture.detectChanges(); - expect(getOutputValue().textContent).toEqual('125'); + expect(testComponent.element.nativeElement.textContent).toEqual('125'); }); }); @@ -114,26 +87,4 @@ describe('Badge', () => { expect(component.padding).toBe('l'); }); }); - - describe('hoverable:', () => { - it('если true, ховер работает', () => { - testComponent.hoverable = true; - fixture.detectChanges(); - - expect(getBadge().classes['_hoverable']).toBe(true); - }); - }); - - describe('notification:', () => { - it('если не задано, notification нет', () => { - expect(getNotification()).toBeNull(); - }); - - it('если передан цвет, notification есть', () => { - testComponent.notification = TuiNotification.Info; - fixture.detectChanges(); - - expect(getNotification()).not.toBeNull(); - }); - }); }); diff --git a/projects/kit/components/badged-content/badged-content.component.ts b/projects/kit/components/badged-content/badged-content.component.ts index 3eb19f35ce13..eac6cf54f4a2 100644 --- a/projects/kit/components/badged-content/badged-content.component.ts +++ b/projects/kit/components/badged-content/badged-content.component.ts @@ -1,14 +1,6 @@ import {ChangeDetectionStrategy, Component, HostBinding, Input} from '@angular/core'; import {tuiDefaultProp} from '@taiga-ui/cdk'; -import { - sizeBigger, - TuiNotification, - TuiSizeL, - TuiSizeS, - TuiSizeXS, - TuiSizeXXL, - TuiSupportColor, -} from '@taiga-ui/core'; +import {sizeBigger, TuiSizeL, TuiSizeS, TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core'; import {TuiStatus} from '@taiga-ui/kit/enums'; import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; @@ -28,20 +20,15 @@ const BADGE_SIZE: {[key: string]: TuiSizeS | TuiSizeL} = { styleUrls: ['./badged-content.style.less'], }) export class TuiBadgedContentComponent { - /** @deprecated use CSS color instead, set borderColor to null */ - @Input() - @tuiDefaultProp() - borderColor: string | null = '#fff'; - @Input() @HostBinding('attr.data-tui-host-top') @tuiDefaultProp() - contentTop: PolymorpheusContent | null = null; + contentTop: PolymorpheusContent = ''; @Input() @HostBinding('attr.data-tui-host-bottom') @tuiDefaultProp() - contentBottom: PolymorpheusContent | null = null; + contentBottom: PolymorpheusContent = ''; @Input() @HostBinding('attr.data-tui-host-size') @@ -50,26 +37,26 @@ export class TuiBadgedContentComponent { @Input() @tuiDefaultProp() - statusTop: TuiNotification | TuiStatus | TuiSupportColor | null = null; + colorTop = ''; @Input() @tuiDefaultProp() - statusBottom: TuiNotification | TuiStatus | TuiSupportColor | null = null; + colorBottom = ''; @Input() @HostBinding('class._rounded') @tuiDefaultProp() rounded = false; - get topNotification(): string | null { - return (!this.contentTop && this.statusTop) || + get topNotification(): string { + return (!this.contentTop && this.colorTop) || (this.contentTop && this.contentIsNumber(this.contentTop) && this.badgeHidden) - ? this.statusTop - : null; + ? this.colorTop + : ''; } - get bottomNotification(): string | null { - return !this.contentBottom && this.statusBottom ? this.statusBottom : null; + get bottomNotification(): string { + return !this.contentBottom && this.colorBottom ? this.colorBottom : ''; } get badgeSize(): TuiSizeS | TuiSizeL { @@ -87,7 +74,7 @@ export class TuiBadgedContentComponent { get boxShadow(): string { const borderWidth = this.sizeBig ? 3 : 2; - return `0 0 0 ${borderWidth}px ${this.borderColor}`; + return `0 0 0 ${borderWidth}px`; } contentIsNumber(content: PolymorpheusContent): boolean { @@ -97,4 +84,8 @@ export class TuiBadgedContentComponent { contentIsString(content: PolymorpheusContent): boolean { return typeof content.valueOf() === 'string'; } + + getStatus(color: string): TuiStatus { + return color ? TuiStatus.Custom : TuiStatus.Primary; + } } diff --git a/projects/kit/components/badged-content/badged-content.module.ts b/projects/kit/components/badged-content/badged-content.module.ts index 6eb45ca23dd3..e76c8487d68c 100644 --- a/projects/kit/components/badged-content/badged-content.module.ts +++ b/projects/kit/components/badged-content/badged-content.module.ts @@ -1,19 +1,12 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {TuiColorModule, TuiSvgModule} from '@taiga-ui/core'; +import {TuiSvgModule} from '@taiga-ui/core'; import {TuiBadgeModule} from '@taiga-ui/kit/components/badge'; import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus'; - import {TuiBadgedContentComponent} from './badged-content.component'; @NgModule({ - imports: [ - CommonModule, - TuiColorModule, - PolymorpheusModule, - TuiSvgModule, - TuiBadgeModule, - ], + imports: [CommonModule, PolymorpheusModule, TuiSvgModule, TuiBadgeModule], declarations: [TuiBadgedContentComponent], exports: [TuiBadgedContentComponent], }) diff --git a/projects/kit/components/badged-content/badged-content.style.less b/projects/kit/components/badged-content/badged-content.style.less index 3cd462653390..3a1000465abf 100644 --- a/projects/kit/components/badged-content/badged-content.style.less +++ b/projects/kit/components/badged-content/badged-content.style.less @@ -1,11 +1,12 @@ :host { position: relative; display: inline-block; + color: var(--tui-base-01); } .notification { position: absolute; - border-radius: 50%; + border-radius: 100%; box-shadow: 0 0 0 2px currentColor; &:not([data-tui-background]) { diff --git a/projects/kit/components/badged-content/badged-content.template.html b/projects/kit/components/badged-content/badged-content.template.html index 034d8d06a2b7..92871b3d6b89 100644 --- a/projects/kit/components/badged-content/badged-content.template.html +++ b/projects/kit/components/badged-content/badged-content.template.html @@ -3,35 +3,35 @@
@@ -41,20 +41,20 @@ *ngIf="contentBottom && sizeBig" class="content content_bottom" [style.boxShadow]="boxShadow" - [style.background]="borderColor" [content]="contentBottom" > diff --git a/projects/kit/components/radio/radio.style.less b/projects/kit/components/radio/radio.style.less index ca51f8da7d91..28b19420d89d 100644 --- a/projects/kit/components/radio/radio.style.less +++ b/projects/kit/components/radio/radio.style.less @@ -10,7 +10,7 @@ position: relative; display: block; flex-shrink: 0; - border-radius: 50%; + border-radius: 100%; &[data-tui-host-size='m'] { width: @sizeM; @@ -30,7 +30,7 @@ .mark { position: absolute; background-color: currentColor; - border-radius: 50%; + border-radius: 100%; :host[data-tui-host-size='m'] & { margin: 4px; diff --git a/projects/kit/components/tag/tag.component.ts b/projects/kit/components/tag/tag.component.ts index cb7c6871f653..ef2468907d3c 100644 --- a/projects/kit/components/tag/tag.component.ts +++ b/projects/kit/components/tag/tag.component.ts @@ -109,8 +109,7 @@ export class TuiTagComponent { constructor( @Inject(ElementRef) private readonly elementRef: ElementRef, - @Inject(TUI_MODE) - mode$: Observable, + @Inject(TUI_MODE) mode$: Observable, ) { mode$.subscribe(mode => { this.mode = mode; diff --git a/projects/kit/components/tag/tag.style.less b/projects/kit/components/tag/tag.style.less index 43c6e859a379..20fd76c3b071 100644 --- a/projects/kit/components/tag/tag.style.less +++ b/projects/kit/components/tag/tag.style.less @@ -24,9 +24,9 @@ pointer-events: none; } - &:hover, - &:active { - &._hoverable[data-tui-host-status='custom']:not(._editing):after { + &._hoverable:hover, + &._hoverable:active { + &[data-tui-host-status='custom']:after { background-color: var(--tui-clear); } } @@ -38,74 +38,132 @@ &[data-tui-host-status='primary'] { background-color: var(--tui-primary); color: var(--tui-primary-text); - } - &[data-tui-host-status='default'] { - background-color: var(--tui-base-06); + &._hoverable:hover { + background-color: var(--tui-primary-hover); + } + + &._hoverable:active { + background-color: var(--tui-primary-active); + } } - &[data-tui-host-status='default'][data-tui-host-mode='light'] { - background-color: var(--tui-clear-inverse); + &[data-tui-host-status='error'] { + background-color: var(--tui-error-bg); + color: var(--tui-text-01); - &:hover { - background-color: var(--tui-clear-inverse-hover); + &._hoverable:hover, + &._hoverable:active { + background-color: var(--tui-error-bg-hover); } - &:active { - background-color: var(--tui-clear-inverse-active); - } + &[data-tui-host-mode='light'] { + background-color: var(--tui-error-bg-night); + color: var(--tui-text-01-night); - &:focus:after { - border: 2px solid var(--tui-base-01); + &._hoverable:hover, + &._hoverable:active { + background-color: var(--tui-error-bg-night-hover); + } } } - &[data-tui-host-status='default'][data-tui-host-mode='dark'] { - background-color: var(--tui-clear); + &[data-tui-host-status='success'] { + background-color: var(--tui-success-bg); color: var(--tui-text-01); - &:hover { - background-color: var(--tui-clear-hover); + &._hoverable:hover, + &._hoverable:active { + background-color: var(--tui-success-bg-hover); } - &:active { - background-color: var(--tui-clear-active); + &[data-tui-host-mode='light'] { + background-color: var(--tui-success-bg-night); + color: var(--tui-text-01-night); + + &._hoverable:hover, + &._hoverable:active { + background-color: var(--tui-success-bg-night-hover); + } } } - &._editing { - background: transparent !important; - } + &[data-tui-host-status='warning'] { + background-color: var(--tui-warning-bg); + color: var(--tui-text-01); - &._disabled { - pointer-events: none; - opacity: var(--tui-disabled-opacity); + &._hoverable:hover, + &._hoverable:active { + background-color: var(--tui-warning-bg-hover); + } + + &[data-tui-host-mode='light'] { + background-color: var(--tui-warning-bg-night); + color: var(--tui-text-01-night); + + &._hoverable:hover, + &._hoverable:active { + background-color: var(--tui-warning-bg-night-hover); + } + } } - &._hoverable { - cursor: pointer; + &[data-tui-host-status='default'] { + background-color: var(--tui-base-06); - &[data-tui-host-status='primary'] { - &:hover { - background-color: var(--tui-primary-hover); + &:not([data-tui-host-mode]) { + &._hoverable:hover { + background-color: var(--tui-base-07); } - &:active { - background-color: var(--tui-primary-active); + &._hoverable:active { + background-color: var(--tui-base-08); } } - &[data-tui-host-status='default']:not([data-tui-host-mode]) { - &:hover { - background-color: var(--tui-base-07); + &[data-tui-host-mode='light'] { + background-color: var(--tui-clear-inverse); + + &._hoverable:hover { + background-color: var(--tui-clear-inverse-hover); } - &:active { - background-color: var(--tui-base-08); + &._hoverable:active { + background-color: var(--tui-clear-inverse-active); + } + + &:focus:after { + border: 2px solid var(--tui-base-01); + } + } + + &[data-tui-host-mode='dark'] { + background-color: var(--tui-clear); + color: var(--tui-text-01); + + &._hoverable:hover { + background-color: var(--tui-clear-hover); + } + + &._hoverable:active { + background-color: var(--tui-clear-active); } } } + &._editing { + background: transparent !important; + } + + &._disabled { + pointer-events: none; + opacity: var(--tui-disabled-opacity); + } + + &._hoverable { + cursor: pointer; + } + &._autocolor { color: var(--tui-text-01); } diff --git a/projects/kit/components/toggle/toggle.style.less b/projects/kit/components/toggle/toggle.style.less index 9db24a54a5fb..ec69db389cf9 100644 --- a/projects/kit/components/toggle/toggle.style.less +++ b/projects/kit/components/toggle/toggle.style.less @@ -69,7 +69,7 @@ .circle { margin: 2px 0; flex-shrink: 0; - border-radius: 50%; + border-radius: 100%; background-color: var(--tui-base-01); :host._disabled &_light { diff --git a/projects/kit/enums/status.ts b/projects/kit/enums/status.ts index 92b98f94ece5..ed035e815e84 100644 --- a/projects/kit/enums/status.ts +++ b/projects/kit/enums/status.ts @@ -2,16 +2,7 @@ export const enum TuiStatus { Default = 'default', Primary = 'primary', Custom = 'custom', - // TODO: Deprecated below, remove after badges are refactored - Light = 'light', - Gray = 'gray', Success = 'success', Error = 'error', - Secondary = 'secondary', - TransparentDark = 'transparent-dark', - TransparentLight = 'transparent-light', - Highlight = 'highlight', - White = 'white', - Inherit = 'inherit', - Normal = 'normal', + Warning = 'warning', }