feat(kit): add tokens to customize Checkbox, Radio and InputTag (…

…#124) * feat(kit): add tokens to customize `Checkbox`, `Radio` and `InputTag` * chore(kit): fix build
taiga-family · Jan 21, 2021 · 94e8b00 · 94e8b00
1 parent b87737a
commit 94e8b00
Show file tree

Hide file tree

Showing 11 changed files with 63 additions and 49 deletions.
diff --git a/projects/core/components/primitive-checkbox/primitive-checkbox.component.ts b/projects/core/components/primitive-checkbox/primitive-checkbox.component.ts
@@ -1,8 +1,16 @@
-import {ChangeDetectionStrategy, Component, HostBinding, Input} from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    HostBinding,
+    Inject,
+    Input,
+} from '@angular/core';
 import {tuiDefaultProp} from '@taiga-ui/cdk';
 import {TuiAppearance} from '@taiga-ui/core/enums';
+import {TUI_CHECKBOX_APPEARANCE} from '@taiga-ui/core/tokens';
 import {TuiSizeL} from '@taiga-ui/core/types';
 
+// @dynamic
 @Component({
     selector: 'tui-primitive-checkbox',
     templateUrl: './primitive-checkbox.template.html',
@@ -39,8 +47,13 @@ export class TuiPrimitiveCheckboxComponent {
     @tuiDefaultProp()
     value: boolean | null = false;
 
+    constructor(
+        @Inject(TUI_CHECKBOX_APPEARANCE)
+        private readonly appearances: readonly [TuiAppearance, TuiAppearance],
+    ) {}
+
     get appearance(): TuiAppearance {
-        return !this.empty ? TuiAppearance.Primary : TuiAppearance.Outline;
+        return this.empty ? this.appearances[0] : this.appearances[1];
     }
 
     get empty(): boolean {

diff --git a/projects/core/tokens/checkbox-appearance.ts b/projects/core/tokens/checkbox-appearance.ts
@@ -0,0 +1,8 @@
+import {InjectionToken} from '@angular/core';
+import {TuiAppearance} from '@taiga-ui/core/enums';
+
+export const TUI_CHECKBOX_APPEARANCE = new InjectionToken<
+    readonly [TuiAppearance, TuiAppearance]
+>('Unchecked and checked appearances for Checkbox', {
+    factory: () => [TuiAppearance.Outline, TuiAppearance.Primary],
+});
diff --git a/projects/core/tokens/index.ts b/projects/core/tokens/index.ts
@@ -1,3 +1,4 @@
+export * from './checkbox-appearance';
 export * from './data-list-accessor';
 export * from './data-list-host';
 export * from './document-or-shadow-root';

diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
@@ -1185,15 +1185,15 @@ export const ROUTES = [
     },
     // PIPES
     {
-        path: 'tui-filter',
+        path: 'filter',
         loadChildren: () =>
             import(`../pipes/filter/filter.module`).then(m => m.ExampleTuiFilterModule),
         data: {
             title: 'Filter',
         },
     },
     {
-        path: 'tui-format-number',
+        path: 'format-number',
         loadChildren: () =>
             import(`../pipes/format-number/format-number.module`).then(
                 m => m.ExampleTuiFormatNumberModule,
@@ -1203,7 +1203,7 @@ export const ROUTES = [
         },
     },
     {
-        path: 'tui-format-phone',
+        path: 'format-phone',
         loadChildren: () =>
             import(`../pipes/format-phone/format-phone.module`).then(
                 m => m.ExampleTuiFormatPhoneModule,
@@ -1213,23 +1213,13 @@ export const ROUTES = [
         },
     },
     {
-        path: 'tui-mapper',
+        path: 'mapper',
         loadChildren: () =>
             import(`../pipes/mapper/mapper.module`).then(m => m.ExampleTuiMapperModule),
         data: {
             title: 'Mapper',
         },
     },
-    {
-        path: 'tui-pluralize',
-        loadChildren: () =>
-            import(`../pipes/pluralize/pluralize.module`).then(
-                m => m.ExampleTuiPluralizeModule,
-            ),
-        data: {
-            title: 'Pluralize',
-        },
-    },
     // SERVICES
     {
         path: 'tui-notifications-service',

diff --git a/projects/demo/src/modules/app/home/home.template.html b/projects/demo/src/modules/app/home/home.template.html
@@ -5,27 +5,27 @@
 <div class="tui-space_top-5">
     <ol class="steps">
         <li>
-            <a tuiLink routerLink="." fragment="install" i18n
-                >Install libraries</a
-            >
+            <a tuiLink routerLink="." fragment="install" i18n>
+                Install libraries
+            </a>
         </li>
         <li>
-            <a tuiLink routerLink="." fragment="less" i18n
-                >Styles for LESS projects</a
-            >
+            <a tuiLink routerLink="." fragment="less" i18n>
+                Styles for LESS projects
+            </a>
         </li>
         <li>
-            <a tuiLink routerLink="." fragment="not-less" i18n
-                >Styles for not LESS projects</a
-            >
+            <a tuiLink routerLink="." fragment="not-less" i18n>
+                Styles for not LESS projects
+            </a>
         </li>
         <li>
             <a tuiLink routerLink="." fragment="root" i18n>Root component</a>
         </li>
         <li>
-            <a tuiLink routerLink="." fragment="options" i18n
-                >Optional components</a
-            >
+            <a tuiLink routerLink="." fragment="options" i18n>
+                Optional components
+            </a>
         </li>
         <li><a tuiLink routerLink="." fragment="icons" i18n>Icons</a></li>
         <li><a tuiLink routerLink="." fragment="theme" i18n>Theming</a></li>
@@ -132,12 +132,6 @@
 
             <p>Wrap all content of your app with root component</p>
 
-            <em>
-                Note: your <code>window</code> will no longer scroll. To control
-                scrolling when modal dialogs are shown,
-                <code>tui-root</code> tag will be topmost scroll container.
-            </em>
-
             <tui-doc-code
                 filename="app.component.html"
                 [code]="examples.appTemplate"

diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
@@ -932,34 +932,27 @@ export const pages: TuiDocPages = [
                 section: $localize`Tools`,
                 title: 'Filter',
                 keywords: 'filter, совпадения, ngfor, for, match, пайп, pipe',
-                route: '/tui-filter',
+                route: '/filter',
             },
             {
                 section: $localize`Tools`,
                 title: 'FormatNumber',
                 keywords:
                     'format, форматирование, преобразование, пробелы, тысячи, пайп, pipe',
-                route: '/tui-format-number',
+                route: '/format-number',
             },
             {
                 section: $localize`Tools`,
                 title: 'FormatPhone',
                 keywords:
                     'format, форматирование, преобразование, phone, телефон, пайп, pipe',
-                route: '/tui-format-phone',
+                route: '/format-phone',
             },
             {
                 section: $localize`Tools`,
                 title: 'Mapper',
                 keywords: 'mapper, мап, преобразование, пайп, pipe',
-                route: '/tui-mapper',
-            },
-            {
-                section: $localize`Tools`,
-                title: 'Pluralize',
-                keywords:
-                    'pluralize, склонение, преобразование, слова, существительные, пайп, pipe',
-                route: '/tui-pluralize',
+                route: '/mapper',
             },
         ],
     },

diff --git a/projects/kit/components/input-tag/input-tag.component.ts b/projects/kit/components/input-tag/input-tag.component.ts
@@ -58,6 +58,7 @@ import {
 import {ALLOWED_SPACE_REGEXP} from '@taiga-ui/kit/components/tag';
 import {TuiStatus} from '@taiga-ui/kit/enums';
 import {FIXED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/kit/providers';
+import {TUI_TAG_STATUS} from '@taiga-ui/kit/tokens';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {merge, Subject} from 'rxjs';
 import {filter, map, mapTo, switchMap, takeUntil} from 'rxjs/operators';
@@ -180,6 +181,7 @@ export class TuiInputTagComponent
         @Optional()
         @Inject(TuiModeDirective)
         private readonly modeDirective: TuiModeDirective | null,
+        @Inject(TUI_TAG_STATUS) private readonly tagStatus: TuiStatus,
         @Inject(TUI_HINT_WATCHED_CONTROLLER)
         readonly hintController: TuiHintControllerDirective,
         @Inject(TUI_TEXTIFELD_WATCHED_CONTROLLER)
@@ -264,7 +266,7 @@ export class TuiInputTagComponent
     get status(): TuiStatus {
         return this.modeDirective && this.modeDirective.mode
             ? TuiStatus.Default
-            : TuiStatus.Primary;
+            : this.tagStatus;
     }
 
     get appearance(): TuiAppearance {

diff --git a/projects/kit/components/radio/radio.component.ts b/projects/kit/components/radio/radio.component.ts
@@ -22,9 +22,10 @@ import {
     TuiIdentityMatcher,
     TuiNativeFocusableElement,
 } from '@taiga-ui/cdk';
-import {TuiAppearance, tuiScaleIn, TuiSizeL} from '@taiga-ui/core';
+import {TUI_CHECKBOX_APPEARANCE, TuiAppearance, tuiScaleIn, TuiSizeL} from '@taiga-ui/core';
 import {TuiRadioGroupComponent} from '@taiga-ui/kit/components/radio-group';
 
+// @dynamic
 @Component({
     selector: 'tui-radio',
     templateUrl: './radio.template.html',
@@ -73,12 +74,14 @@ export class TuiRadioComponent<T>
         @Optional()
         @Inject(TuiRadioGroupComponent)
         private readonly radioGroup: TuiRadioGroupComponent | null,
+        @Inject(TUI_CHECKBOX_APPEARANCE)
+        private readonly appearances: readonly [TuiAppearance, TuiAppearance],
     ) {
         super(control, changeDetectorRef);
     }
 
     get appearance(): TuiAppearance {
-        return this.checked ? TuiAppearance.Primary : TuiAppearance.Outline;
+        return this.checked ? this.appearances[1] : this.appearances[0];
     }
 
     @HostBinding('class._disabled')

diff --git a/projects/kit/components/tag/tag.style.less b/projects/kit/components/tag/tag.style.less
@@ -11,7 +11,6 @@
     border-radius: 8px;
     max-width: 100%;
     cursor: default;
-    color: var(--tui-base-01);
     outline: none;
     text-decoration: none;
 
@@ -122,6 +121,7 @@
         }
 
         &[data-tui-host-mode='onDark'] {
+            color: var(--tui-text-01-night);
             background-color: var(--tui-clear-inverse);
 
             &._hoverable:hover {

diff --git a/projects/kit/tokens/index.ts b/projects/kit/tokens/index.ts
@@ -1,5 +1,6 @@
 export * from './calendar-data-stream';
 export * from './mobile-aware';
 export * from './mobile-calendar';
+export * from './tag-status';
 export * from './validation-errors';
 export * from './i18n';
diff --git a/projects/kit/tokens/tag-status.ts b/projects/kit/tokens/tag-status.ts
@@ -0,0 +1,9 @@
+import {InjectionToken} from '@angular/core';
+import {TuiStatus} from '@taiga-ui/kit/enums';
+
+export const TUI_TAG_STATUS = new InjectionToken<TuiStatus>(
+    'Status for tags inside InputTag component',
+    {
+        factory: () => TuiStatus.Primary,
+    },
+);