From c3a839ca0321ee947beec9806e62dc3343aff05e Mon Sep 17 00:00:00 2001 From: waterplea Date: Wed, 4 Sep 2024 15:29:19 +0400 Subject: [PATCH] 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 5b7bb9639b98a..ba5d9f933245c 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 f69d937b6fafa..ebc5df9b84acd 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 0000000000000..67a47794bddc1 --- /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 0000000000000..eed5e8299353c --- /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 0000000000000..8b8627fc2bb34 --- /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 47458f522b243..4226c9eb57ea0 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 1cbb099e0d246..2d9b4421bc6a6 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 7b98f28d8768b..c62a65c23495c 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;