feat(addon-charts): RingChart add xs size (#7077)

taiga-family · Mar 25, 2024 · a7b4ff3 · a7b4ff3
1 parent 0efb113
commit a7b4ff3
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 26 deletions.
diff --git a/projects/addon-charts/components/pie-chart/pie-chart.style.less b/projects/addon-charts/components/pie-chart/pie-chart.style.less
@@ -9,31 +9,28 @@
 :host {
     position: relative;
     display: block;
+    width: var(--t-size);
+    height: var(--t-size);
 
     &[data-size='xs'] {
-        width: @size-xs;
-        height: @size-xs;
+        --t-size: @size-xs;
         pointer-events: none;
     }
 
     &[data-size='s'] {
-        width: @size-s;
-        height: @size-s;
+        --t-size: @size-s;
     }
 
     &[data-size='m'] {
-        width: @size-m;
-        height: @size-m;
+        --t-size: @size-m;
     }
 
     &[data-size='l'] {
-        width: @size-l;
-        height: @size-l;
+        --t-size: @size-l;
     }
 
     &[data-size='xl'] {
-        width: @size-xl;
-        height: @size-xl;
+        --t-size: @size-xl;
     }
 }
 

diff --git a/projects/addon-charts/components/ring-chart/ring-chart.component.ts b/projects/addon-charts/components/ring-chart/ring-chart.component.ts
@@ -6,7 +6,7 @@ import {
     Input,
     Output,
 } from '@angular/core';
-import {TuiSizeS, TuiSizeXL} from '@taiga-ui/core';
+import {TuiSizeXL, TuiSizeXS} from '@taiga-ui/core';
 
 @Component({
     selector: 'tui-ring-chart',
@@ -20,7 +20,7 @@ export class TuiRingChartComponent {
 
     @Input()
     @HostBinding('attr.data-size')
-    size: TuiSizeS | TuiSizeXL = 'm';
+    size: TuiSizeXL | TuiSizeXS = 'm';
 
     @Input()
     activeItemIndex = NaN;

diff --git a/projects/addon-charts/components/ring-chart/ring-chart.style.less b/projects/addon-charts/components/ring-chart/ring-chart.style.less
@@ -1,5 +1,6 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
+@size-xs: 3rem;
 @size-s: 4rem;
 @size-m: 9rem;
 @size-l: 11rem;
@@ -8,25 +9,28 @@
 :host {
     position: relative;
     display: block;
+    width: var(--t-size);
+    height: var(--t-size);
+    flex-shrink: 0;
+
+    &[data-size='xs'] {
+        --t-size: @size-xs;
+    }
 
     &[data-size='s'] {
-        width: @size-s;
-        height: @size-s;
+        --t-size: @size-s;
     }
 
     &[data-size='m'] {
-        width: @size-m;
-        height: @size-m;
+        --t-size: @size-m;
     }
 
     &[data-size='l'] {
-        width: @size-l;
-        height: @size-l;
+        --t-size: @size-l;
     }
 
     &[data-size='xl'] {
-        width: @size-xl;
-        height: @size-xl;
+        --t-size: @size-xl;
     }
 }
 
@@ -73,3 +77,8 @@
     bottom: 25%;
     border-radius: 100%;
 }
+
+.t-chart {
+    width: 100%;
+    height: 100%;
+}
diff --git a/projects/addon-charts/components/ring-chart/ring-chart.template.html b/projects/addon-charts/components/ring-chart/ring-chart.template.html
@@ -5,6 +5,7 @@
 </div>
 
 <tui-pie-chart
+    class="t-chart"
     [activeItemIndex]="activeItemIndex"
     [masked]="true"
     [size]="size"

diff --git a/projects/demo/src/modules/charts/ring-chart/ring-chart.component.ts b/projects/demo/src/modules/charts/ring-chart/ring-chart.component.ts
@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
-import {TuiSizeS, TuiSizeXL} from '@taiga-ui/core';
+import {TuiSizeXL, TuiSizeXS} from '@taiga-ui/core';
 
 @Component({
     selector: 'example-tui-ring-chart',
@@ -36,7 +36,13 @@ export class ExampleTuiRingChartComponent {
 
     activeItemIndex = this.activeItemIndexVariants[0];
 
-    readonly sizeVariants: ReadonlyArray<TuiSizeS | TuiSizeXL> = ['s', 'm', 'l', 'xl'];
+    readonly sizeVariants: ReadonlyArray<TuiSizeXL | TuiSizeXS> = [
+        'xs',
+        's',
+        'm',
+        'l',
+        'xl',
+    ];
 
-    size = this.sizeVariants[1];
+    size = this.sizeVariants[2];
 }
diff --git a/projects/demo/src/modules/charts/ring-chart/ring-chart.template.html b/projects/demo/src/modules/charts/ring-chart/ring-chart.template.html
@@ -43,7 +43,7 @@
             <ng-template
                 documentationPropertyMode="input"
                 documentationPropertyName="size"
-                documentationPropertyType="TuiSizeS | TuiSizeXL"
+                documentationPropertyType="TuiSizeXS | TuiSizeXL"
                 [documentationPropertyValues]="sizeVariants"
                 [(documentationPropertyValue)]="size"
             >

diff --git a/projects/experimental/components/checkbox/checkbox.component.ts b/projects/experimental/components/checkbox/checkbox.component.ts
@@ -9,7 +9,7 @@ import {
     Optional,
     Self,
 } from '@angular/core';
-import {NgControl} from '@angular/forms';
+import {NgControl, NgModel} from '@angular/forms';
 import {
     tuiControlValue,
     TuiDestroyService,
@@ -68,7 +68,10 @@ export class TuiCheckboxComponent implements OnInit {
         tuiControlValue(this.control)
             .pipe(distinctUntilChanged(), tuiWatch(this.cdr), takeUntil(this.destroy$))
             .subscribe(value => {
-                this.el.nativeElement.indeterminate = value === null;
+                // https://github.com/angular/angular/issues/14988
+                const fix = this.control instanceof NgModel ? this.control.model : value;
+
+                this.el.nativeElement.indeterminate = fix === null;
             });
     }
 }