feat(kit): Progress add options with DI (#8065)

taiga-family · Jul 10, 2024 · e00cd8c · e00cd8c
1 parent d39b76e
commit e00cd8c
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 7 deletions.
diff --git a/projects/experimental/directives/cell/cell.styles.less b/projects/experimental/directives/cell/cell.styles.less
@@ -80,7 +80,7 @@
         }
 
         [tuiSubtitle] {
-            font: var(--tui-font-text-xs-s);
+            font: var(--tui-font-text-xs-2);
         }
 
         & > *:not(:first-child),
@@ -93,6 +93,9 @@
         & > [tuiAccessories] tui-avatar,
         & > [tuiAccessories] tui-avatar-stack tui-avatar {
             --t-size: 1.5rem;
+
+            font: var(--tui-font-text-m);
+            font-size: 0.5625rem;
         }
     }
 
@@ -136,6 +139,9 @@
         & > [tuiAccessories] tui-avatar,
         & > [tuiAccessories] tui-avatar-stack tui-avatar {
             --t-size: 2.5rem;
+
+            font: var(--tui-font-text-m);
+            font-weight: bold;
         }
     }
 

diff --git a/projects/kit/components/progress/index.ts b/projects/kit/components/progress/index.ts
@@ -1,4 +1,5 @@
 export * from './progress.module';
+export * from './progress.options';
 export * from './progress-bar/progress-bar.component';
 export * from './progress-bar/progress-color-segments.directive';
 export * from './progress-circle/progress-circle.component';

diff --git a/projects/kit/components/progress/progress-bar/progress-bar.component.less b/projects/kit/components/progress/progress-bar/progress-bar.component.less
@@ -54,6 +54,10 @@
         --tui-clear: var(--tui-clear-inverse);
     }
 
+    &[data-size='xxs'] {
+        --t-height: 0.125rem;
+    }
+
     &[data-size='m'] {
         --t-height: 1.5rem;
     }

diff --git a/projects/kit/components/progress/progress-bar/progress-bar.component.ts b/projects/kit/components/progress/progress-bar/progress-bar.component.ts
@@ -9,11 +9,13 @@ import {
     MODE_PROVIDER,
     TUI_MODE,
     TuiBrightness,
-    TuiSizeXS,
     TuiSizeXXL,
+    TuiSizeXXS,
 } from '@taiga-ui/core';
 import {Observable} from 'rxjs';
 
+import {TUI_PROGRESS_OPTIONS, TuiProgressOptions} from '../progress.options';
+
 @Component({
     selector: 'progress[tuiProgressBar]',
     template: '',
@@ -27,11 +29,15 @@ import {Observable} from 'rxjs';
 export class TuiProgressBarComponent {
     @Input()
     @HostBinding('style.--tui-progress-color')
-    color?: string;
+    color: string | null = this.options.color;
 
     @Input()
     @HostBinding('attr.data-size')
-    size: TuiSizeXS | TuiSizeXXL = 'm';
+    size: TuiSizeXXL | TuiSizeXXS = this.options.size;
 
-    constructor(@Inject(TUI_MODE) readonly mode$: Observable<TuiBrightness | null>) {}
+    constructor(
+        @Inject(TUI_MODE) readonly mode$: Observable<TuiBrightness | null>,
+        @Inject(TUI_PROGRESS_OPTIONS)
+        private readonly options: TuiProgressOptions,
+    ) {}
 }
diff --git a/projects/kit/components/progress/progress-circle/progress-circle.component.ts b/projects/kit/components/progress/progress-circle/progress-circle.component.ts
@@ -19,6 +19,8 @@ import {
 import {Observable, of} from 'rxjs';
 import {delay} from 'rxjs/operators';
 
+import {TUI_PROGRESS_OPTIONS, TuiProgressOptions} from '../progress.options';
+
 @Component({
     selector: 'tui-progress-circle',
     templateUrl: './progress-circle.template.html',
@@ -41,11 +43,11 @@ export class TuiProgressCircleComponent {
 
     @Input()
     @HostBinding('style.--tui-progress-color')
-    color: string | null = null;
+    color: string | null = this.options.color;
 
     @Input()
     @HostBinding('attr.data-size')
-    size: TuiSizeXXL | TuiSizeXXS = 'm';
+    size: TuiSizeXXL | TuiSizeXXS = this.options.size;
 
     readonly animationDelay$ = of(true).pipe(delay(0));
 
@@ -54,6 +56,8 @@ export class TuiProgressCircleComponent {
         @Inject(WINDOW) private readonly win: Window,
         @Inject(ElementRef) private readonly el: ElementRef<HTMLElement>,
         @Inject(TUI_MODE) readonly mode$: Observable<TuiBrightness | null>,
+        @Inject(TUI_PROGRESS_OPTIONS)
+        private readonly options: TuiProgressOptions,
     ) {}
 
     @HostBinding('style.--progress-ratio')

diff --git a/projects/kit/components/progress/progress.options.ts b/projects/kit/components/progress/progress.options.ts
@@ -0,0 +1,21 @@
+import type {Provider} from '@angular/core';
+import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk';
+import type {TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core';
+
+export interface TuiProgressOptions {
+    readonly color: string | null;
+    readonly size: TuiSizeXXL | TuiSizeXXS;
+}
+
+export const TUI_PROGRESS_DEFAULT_OPTIONS: TuiProgressOptions = {
+    color: null,
+    size: 'm',
+};
+
+export const TUI_PROGRESS_OPTIONS = tuiCreateToken(TUI_PROGRESS_DEFAULT_OPTIONS);
+
+export function tuiProgressOptionsProvider(
+    options: Partial<TuiProgressOptions>,
+): Provider {
+    return tuiProvideOptions(TUI_PROGRESS_OPTIONS, options, TUI_PROGRESS_DEFAULT_OPTIONS);
+}