taiga-family · waterplea · Jul 10, 2024 · Jul 8, 2024
@@ -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 () =>

@@ -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',

@@ -64,6 +64,4 @@ export class ExampleTuiBadgeComponent {
 
     contentTypeVariants = ['text', 'with icon', 'image'];
     contentType = this.contentTypeVariants[0];
-
-    dot = false;
 }
@@ -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,

@@ -68,7 +68,6 @@
                     *ngIf="contentType === 'with icon'"
                     iconLeft="tuiIconCheck"
                     [appearance]="appearance"
-                    [dot]="dot"
                     [size]="size"
                 >
                     <div tuiFade>Taiga UI</div>
@@ -77,7 +76,6 @@
                 <tui-badge
                     *ngIf="contentType === 'text'"
                     [appearance]="appearance"
-                    [dot]="dot"
                     [size]="size"
                 >
                     Taiga UI
@@ -89,7 +87,6 @@
                     src="assets/images/avatar.jpg"
                     tuiBadge
                     [appearance]="appearance"
-                    [dot]="dot"
                     [size]="size"
                 />
             </p>
@@ -105,14 +102,6 @@
             ></tui-radio-list>
         </label>
         <tui-doc-documentation>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="dot"
-                documentationPropertyType="boolean"
-                [(documentationPropertyValue)]="dot"
-            >
-                Show dot on the left side
-            </ng-template>
             <ng-template
                 documentationPropertyMode="input"
                 documentationPropertyName="size"

@@ -1,8 +1,18 @@
 <tui-badge>Default</tui-badge>
 <tui-badge appearance="primary">Primary</tui-badge>
 <tui-badge appearance="accent">Accent</tui-badge>
-<tui-badge appearance="success">Success</tui-badge>
-<tui-badge appearance="error">Error</tui-badge>
+<tui-badge
+    appearance="success"
+    tuiStatus
+>
+    Success
+</tui-badge>
+<tui-badge
+    appearance="error"
+    tuiStatus
+>
+    Error
+</tui-badge>
 <tui-badge appearance="warning">Warning</tui-badge>
 <tui-badge appearance="neutral">Neutral</tui-badge>
 <tui-badge appearance="info">Info</tui-badge>

@@ -0,0 +1,8 @@
+<span tuiStatus="var(--tui-success-fill)">Success</span>
+<p>Status is automatically colored within some badge appearances</p>
+<tui-badge
+    appearance="success"
+    tuiStatus
+>
+    Success
+</tui-badge>
@@ -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 {}
@@ -0,0 +1,13 @@
+```ts
+import {NgModule} from '@angular/core';
+import {TuiStatusModule} from '@taiga-ui/experimental';
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiStatusModule,
+  ],
+})
+export class MyModule {}
+```
@@ -0,0 +1,3 @@
+```html
+<span tuiStatus="var(--tui-status-positive)">Success</span>
+```
@@ -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'),
+    };
+}
@@ -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 {}
@@ -0,0 +1,37 @@
+<tui-doc-page
+    header="Status"
+    package="KIT"
+    type="components"
+>
+    <ng-template pageTab>
+        <tui-doc-example
+            id="basic"
+            heading="Basic"
+            [content]="example1"
+        >
+            <tui-status-example-1></tui-status-example-1>
+        </tui-doc-example>
+    </ng-template>
+
+    <ng-template pageTab="Setup">
+        <ol class="b-demo-steps">
+            <li>
+                <p>Import module:</p>
+
+                <tui-doc-code
+                    filename="my.module.ts"
+                    [code]="import"
+                ></tui-doc-code>
+            </li>
+
+            <li>
+                <p>Add to the template:</p>
+
+                <tui-doc-code
+                    filename="my.component.html"
+                    [code]="template"
+                ></tui-doc-code>
+            </li>
+        </ol>
+    </ng-template>
+</tui-doc-page>
@@ -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,

@@ -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);

@@ -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;

@@ -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';

@@ -0,0 +1,3 @@
+export * from './status.component';
+export * from './status.directive';
+export * from './status.module';
@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.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 {}