feat(kit): Status add new component (#8057)

waterplea · taiga-family-bot · web-flow · commit 432412ced91d · 2024-07-08T18:19:26.000+08:00
Co-authored-by: taiga-family-bot &lt;taiga-family-bot@users.noreply.github.com&gt;
diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
@@ -584,6 +584,11 @@ export const ROUTES: Routes = [
         loadComponent: async () => import('../components/slider'),
         title: 'Slider',
     }),
+    route({
+        path: DemoRoute.Status,
+        loadComponent: async () => import('../components/status'),
+        title: 'Status',
+    }),
     route({
         path: DemoRoute.Stepper,
         loadComponent: async () => import('../components/stepper'),
diff --git a/projects/demo/src/modules/app/demo-routes.ts b/projects/demo/src/modules/app/demo-routes.ts
@@ -114,6 +114,7 @@ export const DemoRoute = {
     Sheet: '/components/sheet',
     SheetDialog: '/components/sheet-dialog',
     Slider: '/components/slider',
+    Status: '/components/status',
     Stepper: '/navigation/stepper',
     Preview: '/components/preview',
     AppBar: '/navigation/app-bar',
diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
@@ -809,6 +809,12 @@ export const pages: TuiDocRoutePages = [
             'предпоказ, показ, pdf, jpg, png, viewer, файл',
         route: DemoRoute.Preview,
     },
+    {
+        section: 'Components',
+        title: 'Status',
+        keywords: 'dot, точка, бейдж, badge, success, failure, error',
+        route: DemoRoute.Status,
+    },
     {
         section: 'Components',
         title: 'Table',
diff --git a/projects/demo/src/modules/components/badge/examples/1/index.html b/projects/demo/src/modules/components/badge/examples/1/index.html
@@ -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>
diff --git a/projects/demo/src/modules/components/badge/examples/1/index.ts b/projects/demo/src/modules/components/badge/examples/1/index.ts
@@ -2,12 +2,12 @@ import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiRepeatTimes} from '@taiga-ui/cdk';
-import {TuiBadge} from '@taiga-ui/kit';
+import {TuiBadge, TuiStatus} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
     selector: 'tui-badge-example-1',
-    imports: [TuiBadge, TuiRepeatTimes],
+    imports: [TuiBadge, TuiRepeatTimes, TuiStatus],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
diff --git a/projects/demo/src/modules/components/badge/index.html b/projects/demo/src/modules/components/badge/index.html
@@ -62,7 +62,6 @@
                     *ngIf="contentType === 'with icon'"
                     iconStart="@tui.check"
                     [appearance]="appearance"
-                    [dot]="dot"
                     [size]="size"
                 >
                     <div tuiFade>Taiga UI</div>
@@ -71,7 +70,6 @@
                 <tui-badge
                     *ngIf="contentType === 'text'"
                     [appearance]="appearance"
-                    [dot]="dot"
                     [size]="size"
                 >
                     Taiga UI
@@ -83,7 +81,6 @@
                     src="assets/images/avatar.jpg"
                     tuiBadge
                     [appearance]="appearance"
-                    [dot]="dot"
                     [size]="size"
                 />
             </p>
@@ -100,14 +97,6 @@
             />
         </div>
         <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"
diff --git a/projects/demo/src/modules/components/badge/index.ts b/projects/demo/src/modules/components/badge/index.ts
@@ -65,6 +65,4 @@ export default class Page {
 
     protected contentTypeVariants = ['text', 'with icon', 'image'];
     protected contentType = this.contentTypeVariants[0];
-
-    protected dot = false;
 }
diff --git a/projects/demo/src/modules/components/status/examples/1/index.html b/projects/demo/src/modules/components/status/examples/1/index.html
@@ -0,0 +1,8 @@
+<span tuiStatus="var(--tui-status-positive)">Success</span>
+<p>Status is automatically colored within some badge appearances</p>
+<tui-badge
+    appearance="success"
+    tuiStatus
+>
+    Success
+</tui-badge>
diff --git a/projects/demo/src/modules/components/status/examples/1/index.ts b/projects/demo/src/modules/components/status/examples/1/index.ts
@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiBadge, TuiStatus} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [TuiStatus, TuiBadge],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export default class Example {}
diff --git a/projects/demo/src/modules/components/status/examples/import/import.md b/projects/demo/src/modules/components/status/examples/import/import.md
@@ -0,0 +1,14 @@
+```ts
+import {Component} from '@angular/core';
+import {TuiStatus} from '@taiga-ui/kit';
+// ...
+
+@Component({
+  standalone: true,
+  imports: [
+    // ...
+    TuiStatus,
+  ],
+})
+export class Example {}
+```
diff --git a/projects/demo/src/modules/components/status/examples/import/template.md b/projects/demo/src/modules/components/status/examples/import/template.md
@@ -0,0 +1,3 @@
+```html
+<span tuiStatus="var(--tui-status-positive)">Success</span>
+```
diff --git a/projects/demo/src/modules/components/status/index.html b/projects/demo/src/modules/components/status/index.html
@@ -0,0 +1,16 @@
+<tui-doc-page
+    header="Status"
+    package="KIT"
+    type="components"
+>
+    <ng-template pageTab>
+        <tui-doc-example
+            id="basic"
+            heading="Basic"
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
+        />
+    </ng-template>
+
+    <tui-setup *pageTab="'Setup'" />
+</tui-doc-page>
diff --git a/projects/demo/src/modules/components/status/index.ts b/projects/demo/src/modules/components/status/index.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+
+@Component({
+    standalone: true,
+    imports: [TuiDemo],
+    templateUrl: './index.html',
+    changeDetection,
+})
+export default class Page {}
diff --git a/projects/kit/components/badge/badge.directive.ts b/projects/kit/components/badge/badge.directive.ts
@@ -33,18 +33,12 @@ class TuiBadgeStyles {}
     providers: [tuiAppearanceOptionsProvider(TUI_BADGE_OPTIONS)],
     hostDirectives: [TuiWithAppearance, TuiWithIcons],
     host: {
-        '[class._dot]': 'dot',
         '[attr.data-size]': 'size',
     },
 })
 export class TuiBadge {
-    private readonly options = inject(TUI_BADGE_OPTIONS);
-
     protected readonly nothing = tuiWithStyles(TuiBadgeStyles);
 
     @Input()
-    public size = this.options.size;
-
-    @Input()
-    public dot = this.options.dot;
+    public size = inject(TUI_BADGE_OPTIONS).size;
 }
diff --git a/projects/kit/components/badge/badge.options.ts b/projects/kit/components/badge/badge.options.ts
@@ -5,13 +5,11 @@ import type {TuiSizeS, TuiSizeXL} from '@taiga-ui/core/types';
 
 export interface TuiBadgeOptions extends TuiAppearanceOptions {
     readonly size: TuiSizeS | TuiSizeXL;
-    readonly dot: boolean;
 }
 
 export const TUI_BADGE_DEFAULT_OPTIONS: TuiBadgeOptions = {
     appearance: '',
     size: 'l',
-    dot: false,
 };
 
 export const TUI_BADGE_OPTIONS = tuiCreateToken(TUI_BADGE_DEFAULT_OPTIONS);
diff --git a/projects/kit/components/badge/badge.style.less b/projects/kit/components/badge/badge.style.less
@@ -3,7 +3,6 @@
 tui-badge,
 [tuiBadge] {
     --t-gap: 0rem;
-    --t-dot: currentColor;
     --t-icon-size: 1rem;
 
     .button-base();
@@ -17,13 +16,9 @@ tui-badge,
     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,
@@ -33,23 +28,31 @@ tui-badge,
     }
 
     &[data-appearance='error'] {
-        --t-dot: var(--tui-status-negative);
+        --t-status: var(--tui-status-negative);
     }
 
     &[data-appearance='success'] {
-        --t-dot: var(--tui-status-positive);
+        --t-status: var(--tui-status-positive);
     }
 
     &[data-appearance='warning'] {
-        --t-dot: var(--tui-status-warning);
+        --t-status: var(--tui-status-warning);
     }
 
     &[data-appearance='info'] {
-        --t-dot: var(--tui-status-info);
+        --t-status: var(--tui-status-info);
     }
 
     &[data-appearance='neutral'] {
-        --t-dot: var(--tui-status-neutral);
+        --t-status: var(--tui-status-neutral);
+    }
+
+    &[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'] {
@@ -58,7 +61,7 @@ tui-badge,
         --t-icon-size: 0.625rem;
         --t-margin: -0.125rem;
 
-        &._dot:before {
+        &[tuiStatus]:before {
             width: 0.25rem;
             height: 0.25rem;
             margin-inline-end: -0.125rem;
@@ -77,7 +80,7 @@ tui-badge,
         --t-size: var(--tui-height-xs);
         --t-margin: -0.25rem;
 
-        &._dot:before {
+        &[tuiStatus]:before {
             margin-inline-end: -0.25rem;
         }
     }
@@ -89,7 +92,7 @@ tui-badge,
 
         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/kit/components/index.ts b/projects/kit/components/index.ts
@@ -36,6 +36,7 @@ export * from '@taiga-ui/kit/components/rating';
 export * from '@taiga-ui/kit/components/routable-dialog';
 export * from '@taiga-ui/kit/components/segmented';
 export * from '@taiga-ui/kit/components/slider';
+export * from '@taiga-ui/kit/components/status';
 export * from '@taiga-ui/kit/components/stepper';
 export * from '@taiga-ui/kit/components/switch';
 export * from '@taiga-ui/kit/components/tabs';
diff --git a/projects/kit/components/progress/progress-bar/progress-bar.component.less b/projects/kit/components/progress/progress-bar/progress-bar.component.less
@@ -51,6 +51,7 @@
     clip-path: inset(0 0.5px round var(--tui-radius-m)); // 0.5px is a hack to prevent jagged edges on low dpi screens
     overflow: hidden;
     border-radius: 1rem;
+    flex-shrink: 0;
 
     &[data-size='xs'] {
         --t-height: 0.25rem;
diff --git a/projects/kit/components/status/index.ts b/projects/kit/components/status/index.ts
@@ -0,0 +1 @@
+export * from './status.directive';
diff --git a/projects/kit/components/status/ng-package.json b/projects/kit/components/status/ng-package.json
@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}
diff --git a/projects/kit/components/status/status.directive.ts b/projects/kit/components/status/status.directive.ts
@@ -0,0 +1,34 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    Directive,
+    ViewEncapsulation,
+} from '@angular/core';
+import {tuiWithStyles} from '@taiga-ui/cdk/utils/miscellaneous';
+
+@Component({
+    standalone: true,
+    template: '',
+    styleUrls: ['./status.style.less'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        class: 'tui-status',
+    },
+})
+class TuiStatusStyles {}
+
+@Directive({
+    standalone: true,
+    selector: '[tuiStatus]',
+    inputs: ['tuiStatus'],
+    host: {
+        tuiStatus: '',
+        '[style.--t-status]': 'tuiStatus || null',
+    },
+})
+export class TuiStatus {
+    protected readonly nothing = tuiWithStyles(TuiStatusStyles);
+
+    public tuiStatus = '';
+}
diff --git a/projects/kit/components/status/status.style.less b/projects/kit/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: '';
+    }
+}

Original file line number	Diff line number	Diff line change
`@@ -65,6 +65,4 @@ export default class Page {`
`65`	`65`
`66`	`66`	`protected contentTypeVariants = ['text', 'with icon', 'image'];`
`67`	`67`	`protected contentType = this.contentTypeVariants[0];`
`68`		`-`
`69`		`- protected dot = false;`
`70`	`68`	`}`