From 94e8b00a32b01e81108e8c74c7a9601d6179abf7 Mon Sep 17 00:00:00 2001 From: Alex Inkin Date: Thu, 21 Jan 2021 11:31:42 +0300 Subject: [PATCH] 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 --- .../primitive-checkbox.component.ts | 17 +++++++++-- projects/core/tokens/checkbox-appearance.ts | 8 +++++ projects/core/tokens/index.ts | 1 + projects/demo/src/modules/app/app.routes.ts | 18 +++-------- .../src/modules/app/home/home.template.html | 30 ++++++++----------- projects/demo/src/modules/app/pages.ts | 15 +++------- .../input-tag/input-tag.component.ts | 4 ++- .../kit/components/radio/radio.component.ts | 7 +++-- projects/kit/components/tag/tag.style.less | 2 +- projects/kit/tokens/index.ts | 1 + projects/kit/tokens/tag-status.ts | 9 ++++++ 11 files changed, 63 insertions(+), 49 deletions(-) create mode 100644 projects/core/tokens/checkbox-appearance.ts create mode 100644 projects/kit/tokens/tag-status.ts diff --git a/projects/core/components/primitive-checkbox/primitive-checkbox.component.ts b/projects/core/components/primitive-checkbox/primitive-checkbox.component.ts index 99360c1e031a..4b23bebb6f5d 100644 --- 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 new file mode 100644 index 000000000000..904363217339 --- /dev/null +++ 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 index cfe0bab77a1c..af94c1430791 100644 --- 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 index 6da4cee3205c..d7d2dd52bce4 100644 --- a/projects/demo/src/modules/app/app.routes.ts +++ b/projects/demo/src/modules/app/app.routes.ts @@ -1185,7 +1185,7 @@ export const ROUTES = [ }, // PIPES { - path: 'tui-filter', + path: 'filter', loadChildren: () => import(`../pipes/filter/filter.module`).then(m => m.ExampleTuiFilterModule), data: { @@ -1193,7 +1193,7 @@ export const ROUTES = [ }, }, { - 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 index 61dc43252102..cc06fd3f4c86 100644 --- a/projects/demo/src/modules/app/home/home.template.html +++ b/projects/demo/src/modules/app/home/home.template.html @@ -5,27 +5,27 @@
  1. - Install libraries + + Install libraries +
  2. - Styles for LESS projects + + Styles for LESS projects +
  3. - Styles for not LESS projects + + Styles for not LESS projects +
  4. Root component
  5. - Optional components + + Optional components +
  6. Icons
  7. Theming
    8. @@ -132,12 +132,6 @@

    Wrap all content of your app with root component

    - - Note: your window will no longer scroll. To control - scrolling when modal dialogs are shown, - tui-root tag will be topmost scroll container. - - @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 index 220c40457729..9be093338b6b 100644 --- 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 index 2a363ee5ed6f..58feaf509328 100644 --- 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 new file mode 100644 index 000000000000..b02beaa7b5f1 --- /dev/null +++ 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( + 'Status for tags inside InputTag component', + { + factory: () => TuiStatus.Primary, + }, +);