From 67c8765ea2443d2674f3dc6fd2c4dc7c970b6ea5 Mon Sep 17 00:00:00 2001 From: waterplea Date: Wed, 4 Sep 2024 15:29:19 +0400 Subject: [PATCH 1/3] chore(demo): `Appearance` add all options --- .../appearance/appearance.directive.ts | 4 +-- .../appearance/appearance.options.ts | 25 ++++++++++++- .../appearance/examples/4/index.html | 7 ++++ .../appearance/examples/4/index.less | 5 +++ .../directives/appearance/examples/4/index.ts | 35 +++++++++++++++++++ .../modules/directives/appearance/index.html | 28 ++++----------- .../modules/directives/appearance/index.ts | 7 ++++ .../components/navigation/aside.style.less | 1 + 8 files changed, 88 insertions(+), 24 deletions(-) create mode 100644 projects/demo/src/modules/directives/appearance/examples/4/index.html create mode 100644 projects/demo/src/modules/directives/appearance/examples/4/index.less create mode 100644 projects/demo/src/modules/directives/appearance/examples/4/index.ts diff --git a/projects/core/directives/appearance/appearance.directive.ts b/projects/core/directives/appearance/appearance.directive.ts index 5b7bb9639b98..ba5d9f933245 100644 --- a/projects/core/directives/appearance/appearance.directive.ts +++ b/projects/core/directives/appearance/appearance.directive.ts @@ -10,7 +10,7 @@ import { import {tuiWithStyles} from '@taiga-ui/cdk/utils/miscellaneous'; import type {TuiInteractiveState} from '@taiga-ui/core/types'; -import {TUI_APPEARANCE_OPTIONS} from './appearance.options'; +import {TUI_APPEARANCE_OPTIONS, type TuiAppearanceOptions} from './appearance.options'; @Component({ standalone: true, @@ -43,7 +43,7 @@ export class TuiAppearance { public readonly focus = signal(null); @Input() - public set tuiAppearance(appearance: string) { + public set tuiAppearance(appearance: TuiAppearanceOptions['appearance']) { this.appearance.set(appearance); } diff --git a/projects/core/directives/appearance/appearance.options.ts b/projects/core/directives/appearance/appearance.options.ts index f69d937b6faf..ebc5df9b84ac 100644 --- a/projects/core/directives/appearance/appearance.options.ts +++ b/projects/core/directives/appearance/appearance.options.ts @@ -1,8 +1,31 @@ import type {ExistingProvider, ProviderToken} from '@angular/core'; import {tuiCreateToken, tuiProvide} from '@taiga-ui/cdk/utils/miscellaneous'; +/** + * Bundled appearances for autocomplete purposes, not exported on purpose + */ +type Appearance = + | 'primary' + | 'secondary' + | 'accent' + | 'floating' + | 'glass' + | 'link' + | 'textfield' + | 'opposite' + | 'whiteblock' + | 'outline' + | 'flat' + | 'destructive' + | 'neutral' + | 'error' + | 'success' + | 'warning' + | 'info' + | ({} & string); + export interface TuiAppearanceOptions { - readonly appearance: string; + readonly appearance: Appearance; } export const TUI_APPEARANCE_DEFAULT_OPTIONS: TuiAppearanceOptions = { diff --git a/projects/demo/src/modules/directives/appearance/examples/4/index.html b/projects/demo/src/modules/directives/appearance/examples/4/index.html new file mode 100644 index 000000000000..67a47794bddc --- /dev/null +++ b/projects/demo/src/modules/directives/appearance/examples/4/index.html @@ -0,0 +1,7 @@ + diff --git a/projects/demo/src/modules/directives/appearance/examples/4/index.less b/projects/demo/src/modules/directives/appearance/examples/4/index.less new file mode 100644 index 000000000000..eed5e8299353 --- /dev/null +++ b/projects/demo/src/modules/directives/appearance/examples/4/index.less @@ -0,0 +1,5 @@ +:host { + display: flex; + gap: 1rem; + flex-wrap: wrap; +} diff --git a/projects/demo/src/modules/directives/appearance/examples/4/index.ts b/projects/demo/src/modules/directives/appearance/examples/4/index.ts new file mode 100644 index 000000000000..8b8627fc2bb3 --- /dev/null +++ b/projects/demo/src/modules/directives/appearance/examples/4/index.ts @@ -0,0 +1,35 @@ +import {NgForOf} from '@angular/common'; +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiAppearance, TuiButton} from '@taiga-ui/core'; + +@Component({ + standalone: true, + imports: [TuiAppearance, TuiButton, NgForOf], + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export default class Example { + protected readonly appearances = [ + 'primary', + 'secondary', + 'destructive', + 'neutral', + 'flat', + 'link', + 'accent', + 'opposite', + 'floating', + 'textfield', + 'whiteblock', + 'outline', + 'error', + 'success', + 'warning', + 'info', + 'glass', + ] as const; +} diff --git a/projects/demo/src/modules/directives/appearance/index.html b/projects/demo/src/modules/directives/appearance/index.html index 47458f522b24..4226c9eb57ea 100644 --- a/projects/demo/src/modules/directives/appearance/index.html +++ b/projects/demo/src/modules/directives/appearance/index.html @@ -7,27 +7,13 @@

A directive for visual presets of interactive components

- - - - diff --git a/projects/demo/src/modules/directives/appearance/index.ts b/projects/demo/src/modules/directives/appearance/index.ts index 1cbb099e0d24..2d9b4421bc6a 100644 --- a/projects/demo/src/modules/directives/appearance/index.ts +++ b/projects/demo/src/modules/directives/appearance/index.ts @@ -11,6 +11,13 @@ import {TuiButton} from '@taiga-ui/core'; changeDetection, }) export default class Page { + protected examples = ['Basic', 'Custom', 'Checkbox', 'Bundled']; + protected descriptions = [ + 'Interactive elements react to pointer natively but you can override state with inputs', + 'Use LESS or SCSS mixins to create your own appearances in global styles', + 'You can use it on input[type="checkbox"] to create a custom toggle component easily', + 'You can create your own appearances or use one of the bundled options', + ]; protected appearances = ['primary', 'secondary', 'flat']; protected appearance = this.appearances[0]!; diff --git a/projects/layout/components/navigation/aside.style.less b/projects/layout/components/navigation/aside.style.less index 7b98f28d8768..c62a65c23495 100644 --- a/projects/layout/components/navigation/aside.style.less +++ b/projects/layout/components/navigation/aside.style.less @@ -100,6 +100,7 @@ tui-dropdown[data-appearance='dropdown-navigation'] { [tuiAsideItem] { justify-content: flex-start; + margin: 0; &._active { background: transparent; From 04cfdff068b4537b8866044b9335a00137d773c6 Mon Sep 17 00:00:00 2001 From: Alex Inkin Date: Wed, 4 Sep 2024 17:39:07 +0400 Subject: [PATCH 2/3] chore: fix --- projects/core/directives/appearance/appearance.options.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/core/directives/appearance/appearance.options.ts b/projects/core/directives/appearance/appearance.options.ts index ebc5df9b84ac..e1580662d523 100644 --- a/projects/core/directives/appearance/appearance.options.ts +++ b/projects/core/directives/appearance/appearance.options.ts @@ -22,7 +22,7 @@ type Appearance = | 'success' | 'warning' | 'info' - | ({} & string); + | (Record & string); export interface TuiAppearanceOptions { readonly appearance: Appearance; From 243d9ea52a52d00e421c3d54adc88261b93e1e64 Mon Sep 17 00:00:00 2001 From: taiga-family-bot Date: Wed, 4 Sep 2024 13:43:36 +0000 Subject: [PATCH 3/3] chore: apply changes after linting [bot] --- .../appearance/appearance.options.ts | 18 +++++++++--------- .../src/modules/directives/appearance/index.ts | 1 + 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/projects/core/directives/appearance/appearance.options.ts b/projects/core/directives/appearance/appearance.options.ts index e1580662d523..23170b25c27f 100644 --- a/projects/core/directives/appearance/appearance.options.ts +++ b/projects/core/directives/appearance/appearance.options.ts @@ -5,23 +5,23 @@ import {tuiCreateToken, tuiProvide} from '@taiga-ui/cdk/utils/miscellaneous'; * Bundled appearances for autocomplete purposes, not exported on purpose */ type Appearance = - | 'primary' - | 'secondary' | 'accent' + | 'destructive' + | 'error' + | 'flat' | 'floating' | 'glass' + | 'info' | 'link' - | 'textfield' + | 'neutral' | 'opposite' - | 'whiteblock' | 'outline' - | 'flat' - | 'destructive' - | 'neutral' - | 'error' + | 'primary' + | 'secondary' | 'success' + | 'textfield' | 'warning' - | 'info' + | 'whiteblock' | (Record & string); export interface TuiAppearanceOptions { diff --git a/projects/demo/src/modules/directives/appearance/index.ts b/projects/demo/src/modules/directives/appearance/index.ts index 2d9b4421bc6a..c17d01a9539e 100644 --- a/projects/demo/src/modules/directives/appearance/index.ts +++ b/projects/demo/src/modules/directives/appearance/index.ts @@ -18,6 +18,7 @@ export default class Page { 'You can use it on input[type="checkbox"] to create a custom toggle component easily', 'You can create your own appearances or use one of the bundled options', ]; + protected appearances = ['primary', 'secondary', 'flat']; protected appearance = this.appearances[0]!;