feat(kit): refactor Badge and BadgedContent to use colors directly (

#46)
taiga-family · Dec 3, 2020 · 1961b9a · 1961b9a
1 parent 65ae6ab
commit 1961b9a
Show file tree

Hide file tree

Showing 51 changed files with 498 additions and 831 deletions.
diff --git 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
@@ -1,5 +1,6 @@
 import {TuiBaseColor, TuiColor, TuiSupportColor} from '@taiga-ui/core';
 
+// TODO: Consider removing
 export const DEFAULT_COLORS: ReadonlyArray<TuiColor | string | null> = [
     TuiBaseColor.Primary,
     TuiSupportColor.Havelock,

diff --git 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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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 | TuiSupportColor> = [
-        TuiStatus.Normal,
-        TuiStatus.Error,
-        TuiStatus.Success,
-        TuiStatus.Light,
-        TuiStatus.Gray,
+    readonly statusVariants: ReadonlyArray<TuiStatus> = [
+        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> = [
-        TuiTextColor.Black,
-        TuiTextColor.White,
-    ];
-
-    textColor: TuiTextColor | null = null;
-
     valueVariants: ReadonlyArray<string | number> = 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
@@ -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
@@ -44,10 +44,8 @@
         <tui-doc-demo>
             <tui-badge
                 [hoverable]="hoverable"
-                [notification]="notification"
                 [size]="size"
                 [status]="status"
-                [textColor]="textColor"
                 [value]="values[value]"
             ></tui-badge>
         </tui-doc-demo>
@@ -58,16 +56,7 @@
                 documentationPropertyMode="input"
                 [(documentationPropertyValue)]="hoverable"
             >
-                Позволяет включить эффект наведения на бэдж (hover).
-            </ng-template>
-            <ng-template
-                documentationPropertyName="notification"
-                documentationPropertyMode="input"
-                documentationPropertyType="TuiNotification | TuiSupportColor | null"
-                [documentationPropertyValues]="notificationVariants"
-                [(documentationPropertyValue)]="notification"
-            >
-                Показывать нотификацию выбранного цвета
+                Позволяет включить изменение цвета при наведении
             </ng-template>
             <ng-template
                 documentationPropertyName="size"
@@ -85,16 +74,7 @@
                 [documentationPropertyValues]="statusVariants"
                 [(documentationPropertyValue)]="status"
             >
-                Статус меняет цвет бейджа.
-            </ng-template>
-            <ng-template
-                documentationPropertyName="textColor"
-                documentationPropertyMode="input"
-                documentationPropertyType="TuiTextColor | null"
-                [documentationPropertyValues]="textColorVariants"
-                [(documentationPropertyValue)]="textColor"
-            >
-                Цвет текста
+                Статус меняет цвет бейджа
             </ng-template>
             <ng-template
                 documentationPropertyName="value"
@@ -104,7 +84,7 @@
                 [(documentationPropertyValue)]="value"
             >
                 Значение. Числовые значения, превыщающие 99, заменяются
-                на&nbsp;&laquo;99+&raquo;.
+                на&nbsp;&laquo;99+&raquo;
             </ng-template>
         </tui-doc-documentation>
     </ng-template>