fix(kit): .t-mark in Radio disappears after toggling Expand (#6037

)
taiga-family · Nov 21, 2023 · 6999a19 · 6999a19
1 parent 3db1473
commit 6999a19
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/projects/kit/components/radio/radio.component.ts b/projects/kit/components/radio/radio.component.ts
@@ -1,4 +1,3 @@
-import {AnimationOptions} from '@angular/animations';
 import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
@@ -22,7 +21,7 @@ import {
     tuiIsNativeFocused,
     TuiNativeFocusableElement,
 } from '@taiga-ui/cdk';
-import {TUI_ANIMATION_OPTIONS, tuiScaleIn, TuiSizeL} from '@taiga-ui/core';
+import {TuiSizeL} from '@taiga-ui/core';
 import {TuiRadioGroupComponent} from '@taiga-ui/kit/components/radio-group';
 
 import {TUI_RADIO_OPTIONS, TuiRadioOptions} from './radio.options';
@@ -36,7 +35,6 @@ import {TUI_RADIO_OPTIONS, TuiRadioOptions} from './radio.options';
         tuiAsFocusableItemAccessor(TuiRadioComponent),
         tuiAsControl(TuiRadioComponent),
     ],
-    animations: [tuiScaleIn],
 })
 export class TuiRadioComponent<T>
     extends AbstractTuiNullableControl<T>
@@ -67,7 +65,6 @@ export class TuiRadioComponent<T>
         @Inject(NgControl)
         control: NgControl | null,
         @Inject(ChangeDetectorRef) cdr: ChangeDetectorRef,
-        @Inject(TUI_ANIMATION_OPTIONS) readonly animation: AnimationOptions,
         @Inject(TUI_RADIO_OPTIONS) private readonly options: TuiRadioOptions,
         @Optional()
         @Inject(TuiRadioGroupComponent)

diff --git a/projects/kit/components/radio/radio.style.less b/projects/kit/components/radio/radio.style.less
@@ -28,9 +28,15 @@
 }
 
 .t-mark {
+    .transition(transform);
     position: absolute;
     background-color: currentColor;
     border-radius: 100%;
+    transform: scale(0);
+
+    &_visible {
+        transform: scale(1);
+    }
 
     :host[data-size='m'] & {
         margin: 0.25rem;

diff --git a/projects/kit/components/radio/radio.template.html b/projects/kit/components/radio/radio.template.html
@@ -8,9 +8,8 @@
     [invalid]="computedInvalid"
 >
     <div
-        *ngIf="checked"
         class="t-mark"
-        [@tuiScaleIn]="animation"
+        [class.t-mark_visible]="checked"
     ></div>
     <input
         #focusableElement