Skip to content

Commit

Permalink
feat(experimental): Status add new component (#8064)
Browse files Browse the repository at this point in the history
  • Loading branch information
mdlufy authored Jul 10, 2024
1 parent e00cd8c commit 6e8450d
Show file tree
Hide file tree
Showing 24 changed files with 229 additions and 36 deletions.
8 changes: 8 additions & 0 deletions projects/demo/src/modules/app/app.routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 () =>
Expand Down
6 changes: 6 additions & 0 deletions projects/demo/src/modules/app/pages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,4 @@ export class ExampleTuiBadgeComponent {

contentTypeVariants = ['text', 'with icon', 'image'];
contentType = this.contentTypeVariants[0];

dot = false;
}
8 changes: 7 additions & 1 deletion projects/demo/src/modules/experimental/badge/badge.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -26,6 +31,7 @@ import {TuiBadgeExample6} from './examples/6';
TuiModeModule,
TuiRepeatTimesModule,
TuiIconModule,
TuiStatusModule,
TuiRadioListModule,
FormsModule,
CommonModule,
Expand Down
11 changes: 0 additions & 11 deletions projects/demo/src/modules/experimental/badge/badge.template.html
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@
*ngIf="contentType === 'with icon'"
iconLeft="tuiIconCheck"
[appearance]="appearance"
[dot]="dot"
[size]="size"
>
<div tuiFade>Taiga UI</div>
Expand All @@ -77,7 +76,6 @@
<tui-badge
*ngIf="contentType === 'text'"
[appearance]="appearance"
[dot]="dot"
[size]="size"
>
Taiga UI
Expand All @@ -89,7 +87,6 @@
src="assets/images/avatar.jpg"
tuiBadge
[appearance]="appearance"
[dot]="dot"
[size]="size"
/>
</p>
Expand All @@ -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"
Expand Down
14 changes: 12 additions & 2 deletions projects/demo/src/modules/experimental/badge/examples/1/index.html
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
11 changes: 11 additions & 0 deletions projects/demo/src/modules/experimental/status/examples/1/index.ts
Original file line number Diff line number Diff line change
@@ -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 {}
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
```ts
import {NgModule} from '@angular/core';
import {TuiStatusModule} from '@taiga-ui/experimental';
// ...

@NgModule({
imports: [
// ...
TuiStatusModule,
],
})
export class MyModule {}
```
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
```html
<span tuiStatus="var(--tui-status-positive)">Success</span>
```
18 changes: 18 additions & 0 deletions projects/demo/src/modules/experimental/status/status.component.ts
Original file line number Diff line number Diff line change
@@ -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'),
};
}
17 changes: 17 additions & 0 deletions projects/demo/src/modules/experimental/status/status.module.ts
Original file line number Diff line number Diff line change
@@ -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 {}
37 changes: 37 additions & 0 deletions projects/demo/src/modules/experimental/status/status.template.html
Original file line number Diff line number Diff line change
@@ -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>
4 changes: 0 additions & 4 deletions projects/experimental/components/badge/badge.directive.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
Expand All @@ -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,
Expand Down
2 changes: 0 additions & 2 deletions projects/experimental/components/badge/badge.options.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
31 changes: 17 additions & 14 deletions projects/experimental/components/badge/badge.style.less
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
// TODO: Change to [tuiBadge] in 4.0
[tuiBadgeNew] {
--t-gap: 0rem;
--t-dot: currentColor;
--t-icon-size: 1rem;

.button-base();
Expand All @@ -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,
Expand All @@ -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'] {
Expand All @@ -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;
Expand All @@ -76,7 +79,7 @@
--t-size: var(--tui-height-xs);
--t-margin: -0.25rem;

&._dot:before {
&[tuiStatus]:before {
margin-inline-end: -0.25rem;
}
}
Expand All @@ -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;
Expand Down
1 change: 1 addition & 0 deletions projects/experimental/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
3 changes: 3 additions & 0 deletions projects/experimental/components/status/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export * from './status.component';
export * from './status.directive';
export * from './status.module';
5 changes: 5 additions & 0 deletions projects/experimental/components/status/ng-package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"lib": {
"entryFile": "index.ts"
}
}
12 changes: 12 additions & 0 deletions projects/experimental/components/status/status.component.ts
Original file line number Diff line number Diff line change
@@ -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 {}
Loading

0 comments on commit 6e8450d

Please sign in to comment.