From 6e8450ddbd4af5a3c0cc2c1f24f092da96699868 Mon Sep 17 00:00:00 2001 From: German Panov Date: Wed, 10 Jul 2024 14:19:01 +0300 Subject: [PATCH] feat(experimental): `Status` add new component (#8064) --- projects/demo/src/modules/app/app.routes.ts | 8 ++++ projects/demo/src/modules/app/pages.ts | 6 +++ .../experimental/badge/badge.component.ts | 2 - .../experimental/badge/badge.module.ts | 8 +++- .../experimental/badge/badge.template.html | 11 ------ .../experimental/badge/examples/1/index.html | 14 ++++++- .../experimental/status/examples/1/index.html | 8 ++++ .../experimental/status/examples/1/index.ts | 11 ++++++ .../status/examples/import/import.md | 13 +++++++ .../status/examples/import/insert.md | 3 ++ .../experimental/status/status.component.ts | 18 +++++++++ .../experimental/status/status.module.ts | 17 +++++++++ .../experimental/status/status.template.html | 37 +++++++++++++++++++ .../components/badge/badge.directive.ts | 4 -- .../components/badge/badge.options.ts | 2 - .../components/badge/badge.style.less | 31 +++++++++------- projects/experimental/components/index.ts | 1 + .../experimental/components/status/index.ts | 3 ++ .../components/status/ng-package.json | 5 +++ .../components/status/status.component.ts | 12 ++++++ .../components/status/status.directive.ts | 22 +++++++++++ .../components/status/status.module.ts | 10 +++++ .../components/status/status.style.less | 18 +++++++++ .../progress-bar/progress-bar.component.less | 1 + 24 files changed, 229 insertions(+), 36 deletions(-) create mode 100644 projects/demo/src/modules/experimental/status/examples/1/index.html create mode 100644 projects/demo/src/modules/experimental/status/examples/1/index.ts create mode 100644 projects/demo/src/modules/experimental/status/examples/import/import.md create mode 100644 projects/demo/src/modules/experimental/status/examples/import/insert.md create mode 100644 projects/demo/src/modules/experimental/status/status.component.ts create mode 100644 projects/demo/src/modules/experimental/status/status.module.ts create mode 100644 projects/demo/src/modules/experimental/status/status.template.html create mode 100644 projects/experimental/components/status/index.ts create mode 100644 projects/experimental/components/status/ng-package.json create mode 100644 projects/experimental/components/status/status.component.ts create mode 100644 projects/experimental/components/status/status.directive.ts create mode 100644 projects/experimental/components/status/status.module.ts create mode 100644 projects/experimental/components/status/status.style.less diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts index d4e65ef98f6f..6a2acdd0e5b5 100644 --- a/projects/demo/src/modules/app/app.routes.ts +++ b/projects/demo/src/modules/app/app.routes.ts @@ -1169,6 +1169,14 @@ export const ROUTES: Routes = [ title: 'Slider', }, }, + { + path: 'experimental/status', + loadChildren: async () => + (await import('../experimental/status/status.module')).ExampleTuiStatusModule, + data: { + title: 'Status', + }, + }, { path: 'navigation/stepper', loadChildren: async () => diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts index 3ad39e2c8cbf..9df0b2ac9d7b 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/projects/demo/src/modules/app/pages.ts @@ -793,6 +793,12 @@ export const pages: TuiDocPages = [ 'предпоказ, показ, pdf, jpg, png, viewer, файл', route: '/components/preview', }, + { + section: 'Components', + title: 'Status', + keywords: 'dot, точка, бейдж, badge, success, failure, error', + route: '/experimental/status', + }, { section: 'Components', title: 'Table', diff --git a/projects/demo/src/modules/experimental/badge/badge.component.ts b/projects/demo/src/modules/experimental/badge/badge.component.ts index 4cc0ef9d3ba2..7c0dbd344d12 100644 --- a/projects/demo/src/modules/experimental/badge/badge.component.ts +++ b/projects/demo/src/modules/experimental/badge/badge.component.ts @@ -64,6 +64,4 @@ export class ExampleTuiBadgeComponent { contentTypeVariants = ['text', 'with icon', 'image']; contentType = this.contentTypeVariants[0]; - - dot = false; } diff --git a/projects/demo/src/modules/experimental/badge/badge.module.ts b/projects/demo/src/modules/experimental/badge/badge.module.ts index 73e766fa3d19..b9eed1c1e365 100644 --- a/projects/demo/src/modules/experimental/badge/badge.module.ts +++ b/projects/demo/src/modules/experimental/badge/badge.module.ts @@ -9,7 +9,12 @@ import { TuiNotificationModule, TuiTextfieldControllerModule, } from '@taiga-ui/core'; -import {TuiBadgeModule, TuiFadeModule, TuiIconModule} from '@taiga-ui/experimental'; +import { + TuiBadgeModule, + TuiFadeModule, + TuiIconModule, + TuiStatusModule, +} from '@taiga-ui/experimental'; import {TuiRadioListModule} from '@taiga-ui/kit'; import {ExampleTuiBadgeComponent} from './badge.component'; @@ -26,6 +31,7 @@ import {TuiBadgeExample6} from './examples/6'; TuiModeModule, TuiRepeatTimesModule, TuiIconModule, + TuiStatusModule, TuiRadioListModule, FormsModule, CommonModule, diff --git a/projects/demo/src/modules/experimental/badge/badge.template.html b/projects/demo/src/modules/experimental/badge/badge.template.html index e88c9e807992..9285aea52bcd 100644 --- a/projects/demo/src/modules/experimental/badge/badge.template.html +++ b/projects/demo/src/modules/experimental/badge/badge.template.html @@ -68,7 +68,6 @@ *ngIf="contentType === 'with icon'" iconLeft="tuiIconCheck" [appearance]="appearance" - [dot]="dot" [size]="size" >
Taiga UI
@@ -77,7 +76,6 @@ Taiga UI @@ -89,7 +87,6 @@ src="assets/images/avatar.jpg" tuiBadge [appearance]="appearance" - [dot]="dot" [size]="size" />

@@ -105,14 +102,6 @@ > - - Show dot on the left side - Default Primary Accent -Success -Error + + Success + + + Error + Warning Neutral Info diff --git a/projects/demo/src/modules/experimental/status/examples/1/index.html b/projects/demo/src/modules/experimental/status/examples/1/index.html new file mode 100644 index 000000000000..6be58d4d4777 --- /dev/null +++ b/projects/demo/src/modules/experimental/status/examples/1/index.html @@ -0,0 +1,8 @@ +Success +

Status is automatically colored within some badge appearances

+ + Success + diff --git a/projects/demo/src/modules/experimental/status/examples/1/index.ts b/projects/demo/src/modules/experimental/status/examples/1/index.ts new file mode 100644 index 000000000000..63f10ae8acf6 --- /dev/null +++ b/projects/demo/src/modules/experimental/status/examples/1/index.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-status-example-1', + templateUrl: './index.html', + encapsulation, + changeDetection, +}) +export class TuiStatusExample1 {} diff --git a/projects/demo/src/modules/experimental/status/examples/import/import.md b/projects/demo/src/modules/experimental/status/examples/import/import.md new file mode 100644 index 000000000000..24ba2c4b3317 --- /dev/null +++ b/projects/demo/src/modules/experimental/status/examples/import/import.md @@ -0,0 +1,13 @@ +```ts +import {NgModule} from '@angular/core'; +import {TuiStatusModule} from '@taiga-ui/experimental'; +// ... + +@NgModule({ + imports: [ + // ... + TuiStatusModule, + ], +}) +export class MyModule {} +``` diff --git a/projects/demo/src/modules/experimental/status/examples/import/insert.md b/projects/demo/src/modules/experimental/status/examples/import/insert.md new file mode 100644 index 000000000000..210bf4d4fa69 --- /dev/null +++ b/projects/demo/src/modules/experimental/status/examples/import/insert.md @@ -0,0 +1,3 @@ +```html +Success +``` diff --git a/projects/demo/src/modules/experimental/status/status.component.ts b/projects/demo/src/modules/experimental/status/status.component.ts new file mode 100644 index 000000000000..68c171b3fc9c --- /dev/null +++ b/projects/demo/src/modules/experimental/status/status.component.ts @@ -0,0 +1,18 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {TuiDocExample} from '@taiga-ui/addon-doc'; + +@Component({ + selector: 'status', + templateUrl: './status.template.html', + changeDetection, +}) +export class ExampleTuiStatusComponent { + readonly import = import('./examples/import/import.md?raw'); + readonly template = import('./examples/import/insert.md?raw'); + + readonly example1: TuiDocExample = { + TypeScript: import('./examples/1/index.ts?raw'), + HTML: import('./examples/1/index.html?raw'), + }; +} diff --git a/projects/demo/src/modules/experimental/status/status.module.ts b/projects/demo/src/modules/experimental/status/status.module.ts new file mode 100644 index 000000000000..2bbf4203445c --- /dev/null +++ b/projects/demo/src/modules/experimental/status/status.module.ts @@ -0,0 +1,17 @@ +import {NgModule} from '@angular/core'; +import {tuiGetDocModules} from '@taiga-ui/addon-doc'; +import {TuiBadgeModule, TuiStatusModule} from '@taiga-ui/experimental'; + +import {TuiStatusExample1} from './examples/1'; +import {ExampleTuiStatusComponent} from './status.component'; + +@NgModule({ + imports: [ + TuiStatusModule, + TuiBadgeModule, + tuiGetDocModules(ExampleTuiStatusComponent), + ], + declarations: [ExampleTuiStatusComponent, TuiStatusExample1], + exports: [ExampleTuiStatusComponent], +}) +export class ExampleTuiStatusModule {} diff --git a/projects/demo/src/modules/experimental/status/status.template.html b/projects/demo/src/modules/experimental/status/status.template.html new file mode 100644 index 000000000000..cbfa7f25ded1 --- /dev/null +++ b/projects/demo/src/modules/experimental/status/status.template.html @@ -0,0 +1,37 @@ + + + + + + + + +
    +
  1. +

    Import module:

    + + +
    2. + +
  2. +

    Add to the template:

    + + +
    3. +
+ + diff --git a/projects/experimental/components/badge/badge.directive.ts b/projects/experimental/components/badge/badge.directive.ts index ce0c310fe21c..5374a5db2c0f 100644 --- a/projects/experimental/components/badge/badge.directive.ts +++ b/projects/experimental/components/badge/badge.directive.ts @@ -9,7 +9,6 @@ import {TUI_BADGE_OPTIONS, TuiBadgeOptions} from './badge.options'; host: { tuiBadgeNew: '', tuiAppearance: '', - '[class._dot]': 'dot', '[attr.data-appearance]': 'appearance', '[attr.data-size]': 'size', }, @@ -21,9 +20,6 @@ export class TuiBadgeDirective { @Input() appearance = this.options.appearance; - @Input() - dot = this.options.dot; - constructor( @Inject(TUI_BADGE_OPTIONS) private readonly options: TuiBadgeOptions, @Inject(TuiDirectiveStylesService) directiveStyles: TuiDirectiveStylesService, diff --git a/projects/experimental/components/badge/badge.options.ts b/projects/experimental/components/badge/badge.options.ts index 8cd168ab9cfc..bbfbb86fcffc 100644 --- a/projects/experimental/components/badge/badge.options.ts +++ b/projects/experimental/components/badge/badge.options.ts @@ -5,13 +5,11 @@ import {TuiSizeS, TuiSizeXL} from '@taiga-ui/core'; export interface TuiBadgeOptions { readonly appearance: string; readonly size: TuiSizeS | TuiSizeXL; - readonly dot: boolean; } export const TUI_BADGE_DEFAULT_OPTIONS: TuiBadgeOptions = { size: 'l', appearance: 'default', - dot: false, }; export const TUI_BADGE_OPTIONS = tuiCreateToken(TUI_BADGE_DEFAULT_OPTIONS); diff --git a/projects/experimental/components/badge/badge.style.less b/projects/experimental/components/badge/badge.style.less index 99ddf903d56b..9039c4d7d9c3 100644 --- a/projects/experimental/components/badge/badge.style.less +++ b/projects/experimental/components/badge/badge.style.less @@ -3,7 +3,6 @@ // TODO: Change to [tuiBadge] in 4.0 [tuiBadgeNew] { --t-gap: 0rem; - --t-dot: currentColor; --t-icon-size: 1rem; .button-base(); @@ -16,13 +15,9 @@ width: fit-content; font: var(--tui-font-text-s); - &._dot:before { - content: ''; - display: block; + &[tuiStatus]:before { width: 0.375rem; height: 0.375rem; - background: var(--t-dot); - border-radius: 100%; } > tui-icon, @@ -32,23 +27,31 @@ } &[data-appearance='error'] { - --t-dot: var(--tui-error-fill); + --t-status: var(--tui-error-fill); } &[data-appearance='success'] { - --t-dot: var(--tui-success-fill); + --t-status: var(--tui-success-fill); } &[data-appearance='warning'] { - --t-dot: var(--tui-warning-fill); + --t-status: var(--tui-warning-fill); } &[data-appearance='info'] { - --t-dot: var(--tui-info-fill); + --t-status: var(--tui-info-fill); } &[data-appearance='neutral'] { - --t-dot: var(--tui-neutral-fill); + --t-status: var(--tui-neutral-fill); + } + + &[tuiStatus][data-appearance='error']:before, + &[tuiStatus][data-appearance='success']:before, + &[tuiStatus][data-appearance='warning']:before, + &[tuiStatus][data-appearance='info']:before, + &[tuiStatus][data-appearance='neutral']:before { + content: ''; } &[data-size='s'] { @@ -57,7 +60,7 @@ --t-icon-size: 0.625rem; --t-margin: -0.125rem; - &._dot:before { + &[tuiStatus]:before { width: 0.25rem; height: 0.25rem; margin-inline-end: -0.125rem; @@ -76,7 +79,7 @@ --t-size: var(--tui-height-xs); --t-margin: -0.25rem; - &._dot:before { + &[tuiStatus]:before { margin-inline-end: -0.25rem; } } @@ -87,7 +90,7 @@ --t-size: var(--tui-height-s); font: var(--tui-font-text-m); - &._dot:before { + &[tuiStatus]:before { width: 0.5rem; height: 0.5rem; margin-inline-end: -0.125rem; diff --git a/projects/experimental/components/index.ts b/projects/experimental/components/index.ts index ac861606b148..ace0688cedda 100644 --- a/projects/experimental/components/index.ts +++ b/projects/experimental/components/index.ts @@ -16,6 +16,7 @@ export * from '@taiga-ui/experimental/components/pin'; export * from '@taiga-ui/experimental/components/radio'; export * from '@taiga-ui/experimental/components/rating'; export * from '@taiga-ui/experimental/components/segmented'; +export * from '@taiga-ui/experimental/components/status'; export * from '@taiga-ui/experimental/components/swipe-action'; export * from '@taiga-ui/experimental/components/thumbnail-card'; export * from '@taiga-ui/experimental/components/toggle'; diff --git a/projects/experimental/components/status/index.ts b/projects/experimental/components/status/index.ts new file mode 100644 index 000000000000..1b110d5e1ad7 --- /dev/null +++ b/projects/experimental/components/status/index.ts @@ -0,0 +1,3 @@ +export * from './status.component'; +export * from './status.directive'; +export * from './status.module'; diff --git a/projects/experimental/components/status/ng-package.json b/projects/experimental/components/status/ng-package.json new file mode 100644 index 000000000000..bebf62dcb5e5 --- /dev/null +++ b/projects/experimental/components/status/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} diff --git a/projects/experimental/components/status/status.component.ts b/projects/experimental/components/status/status.component.ts new file mode 100644 index 000000000000..8d53c043ffa7 --- /dev/null +++ b/projects/experimental/components/status/status.component.ts @@ -0,0 +1,12 @@ +import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; + +@Component({ + template: '', + styleUrls: ['./status.style.less'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { + class: 'tui-status', + }, +}) +export class TuiStatusComponent {} diff --git a/projects/experimental/components/status/status.directive.ts b/projects/experimental/components/status/status.directive.ts new file mode 100644 index 000000000000..63c759eef5d2 --- /dev/null +++ b/projects/experimental/components/status/status.directive.ts @@ -0,0 +1,22 @@ +import {Directive, Inject} from '@angular/core'; +import {TuiDirectiveStylesService} from '@taiga-ui/cdk'; + +import {TuiStatusComponent} from './status.component'; + +@Directive({ + selector: '[tuiStatus]', + inputs: ['tuiStatus'], + host: { + tuiStatus: '', + '[style.--t-status]': 'tuiStatus || null', + }, +}) +export class TuiStatusDirective { + tuiStatus = ''; + + constructor( + @Inject(TuiDirectiveStylesService) directiveStyles: TuiDirectiveStylesService, + ) { + directiveStyles.addComponent(TuiStatusComponent); + } +} diff --git a/projects/experimental/components/status/status.module.ts b/projects/experimental/components/status/status.module.ts new file mode 100644 index 000000000000..329e7619c58a --- /dev/null +++ b/projects/experimental/components/status/status.module.ts @@ -0,0 +1,10 @@ +import {NgModule} from '@angular/core'; + +import {TuiStatusComponent} from './status.component'; +import {TuiStatusDirective} from './status.directive'; + +@NgModule({ + declarations: [TuiStatusComponent, TuiStatusDirective], + exports: [TuiStatusDirective], +}) +export class TuiStatusModule {} diff --git a/projects/experimental/components/status/status.style.less b/projects/experimental/components/status/status.style.less new file mode 100644 index 000000000000..4fe64f147d2f --- /dev/null +++ b/projects/experimental/components/status/status.style.less @@ -0,0 +1,18 @@ +@import '@taiga-ui/core/styles/taiga-ui-local'; + +[tuiStatus] { + display: inline-flex; + align-items: center; + gap: 0.5rem; + + &:before { + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + background: var(--t-status); + } + + &[style*='--t-status:']:before { + content: ''; + } +} diff --git a/projects/kit/components/progress/progress-bar/progress-bar.component.less b/projects/kit/components/progress/progress-bar/progress-bar.component.less index b88fd8e2e2a5..989fcf09f4df 100644 --- a/projects/kit/components/progress/progress-bar/progress-bar.component.less +++ b/projects/kit/components/progress/progress-bar/progress-bar.component.less @@ -49,6 +49,7 @@ background: @track-color; clip-path: inset(0 round var(--tui-radius-xs)); overflow: hidden; + flex-shrink: 0; &[data-mode='onDark'] { --tui-clear: var(--tui-clear-inverse);