chore(schematics): valid migration for badged content (#10077)

taiga-family · Dec 27, 2024 · 9012cd6 · 9012cd6
1 parent 51bf8b0
commit 9012cd6
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/projects/cdk/schematics/ng-update/v4/steps/templates/migrate-badged-content.ts b/projects/cdk/schematics/ng-update/v4/steps/templates/migrate-badged-content.ts
@@ -3,7 +3,7 @@ import type {DevkitFileSystem} from 'ng-morph';
 import type {Attribute, ElementLocation} from 'parse5/dist/common/token';
 
 import {findElementsByTagName} from '../../../../utils/templates/elements';
-import {findAttr} from '../../../../utils/templates/inputs';
+import {findAttr, isBinding} from '../../../../utils/templates/inputs';
 import {
     getTemplateFromTemplateResource,
     getTemplateOffset,
@@ -120,13 +120,14 @@ function migrateColor({
 
     const value = attr.value;
     const insertTo = sourceCodeLocation.startTag?.endOffset ?? 0;
+    const hasBinding = Boolean(attr) && isBinding(attr);
 
     recorder.insertRight(
         insertTo + templateOffset + 1,
         `<tui-badge-notification
         size="xs"
         tuiSlot="${slot}"
-        [style.color]="'${value}'"
+        [style.color]="${hasBinding ? value : `'${value}'`}"
     ></tui-badge-notification>\n`,
     );
 }

diff --git a/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-badged-content.spec.ts b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-badged-content.spec.ts
@@ -43,6 +43,9 @@ const TEMPLATE_BEFORE = `
       {{ day?.activity?.date?.day }}
   </p>
 </tui-badged-content>
+<tui-badged-content
+  [colorTop]="(unsavedChanges.value$ | async) ? 'var(--tui-warning-fill)' : ''">
+</tui-badged-content>
 <tui-badged-content
      colorTop="var(--tui-error-fill)"
      size="l"
@@ -81,12 +84,20 @@ const TEMPLATE_AFTER = `
 <tui-badge-notification
         size="xs"
         tuiSlot="top"
-        [style.color]="'status || '''"
+        [style.color]="status || ''"
     ></tui-badge-notification>
   <p class="day">
       {{ day?.activity?.date?.day }}
   </p>
 </tui-badged-content>
+<tui-badged-content
+  [style.--tui-radius.%]="50">
+<tui-badge-notification
+        size="xs"
+        tuiSlot="top"
+        [style.color]="(unsavedChanges.value$ | async) ? 'var(--tui-warning-fill)' : ''"
+    ></tui-badge-notification>
+</tui-badged-content>
 <tui-badged-content
     ${''}
     ${''}