chore: fix label migration and css shadow migration

taiga-family · Sep 30, 2024 · 622ac66 · 622ac66
1 parent 75a3f32
commit 622ac66
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 18 deletions.
diff --git a/projects/cdk/schematics/ng-update/v4/migrate-css-vars/palette.ts b/projects/cdk/schematics/ng-update/v4/migrate-css-vars/palette.ts
@@ -82,13 +82,13 @@ export const DEPRECATED_VARS = {
     '--tui-positive-night-hover': '--tui-status-positive',
     '--tui-negative-night': '--tui-status-negative',
     '--tui-negative-night-hover': '--tui-status-negative',
-    '--tui-shadow': 'var(--tui-shadow-small)',
-    '--tui-shadow-hover': 'var(--tui-shadow-small-hover)',
-    '--tui-shadow-dropdown': 'var(--tui-shadow-medium)',
-    '--tui-shadow-modal': 'var(--tui-shadow-popup)',
-    '--tui-shadow-sidebar': 'var(--tui-shadow-medium)',
-    '--tui-shadow-navigation': 'var(--tui-shadow-small)',
-    '--tui-shadow-sheet': 'var(--tui-shadow-popup)',
+    '--tui-shadow': '--tui-shadow-small',
+    '--tui-shadow-hover': '--tui-shadow-small-hover',
+    '--tui-shadow-dropdown': '--tui-shadow-medium',
+    '--tui-shadow-modal': '--tui-shadow-popup',
+    '--tui-shadow-sidebar': '--tui-shadow-medium',
+    '--tui-shadow-navigation': '--tui-shadow-small',
+    '--tui-shadow-sheet': '--tui-shadow-popup',
 };
 
 // warning: order is important

diff --git a/projects/cdk/schematics/ng-update/v4/migrate-css-vars/rename-css-vars.ts b/projects/cdk/schematics/ng-update/v4/migrate-css-vars/rename-css-vars.ts
@@ -24,16 +24,32 @@ export function renameCssVars(pattern = ALL_FILES): void {
             });
         }
 
+        const placeholders: Record<string, string> = {};
+
+        Object.keys(DEPRECATED_VARS).forEach((key, index) => {
+            placeholders[key] = `__PLACEHOLDER_${index}__`;
+        });
+
         Object.entries(DEPRECATED_VARS)
             .sort(([prev], [next]) => (prev.length < next.length ? 1 : -1))
             .map(([from, to]) => ({
                 from: new RegExp(`${from}`, 'g'),
                 to,
             }))
-            .forEach(({from, to}) => {
-                text = text.replaceAll(from, to);
+            .forEach(({from}) => {
+                text = text.replace(from, (matched) => placeholders[matched] ?? '');
             });
 
+        const placeholderPattern = new RegExp(Object.values(placeholders).join('|'), 'g');
+
+        text = text.replaceAll(placeholderPattern, (matched) => {
+            const originalKey = Object.keys(placeholders).find(
+                (key) => placeholders[key] === matched,
+            );
+
+            return DEPRECATED_VARS[originalKey as keyof typeof DEPRECATED_VARS];
+        });
+
         Object.entries(DEPRECATED_NUMERIC_VARS)
             .map(([from, to]) => ({
                 from: new RegExp(`${from}`, 'g'),

diff --git a/projects/cdk/schematics/ng-update/v4/steps/templates/migrate-label.ts b/projects/cdk/schematics/ng-update/v4/steps/templates/migrate-label.ts
@@ -1,6 +1,7 @@
 import type {UpdateRecorder} from '@angular-devkit/schematics';
 import type {DevkitFileSystem} from 'ng-morph';
 import type {Attribute, ElementLocation} from 'parse5/dist/common/token';
+import type {ChildNode} from 'parse5/dist/tree-adapters/default';
 
 import {findElementsByTagName} from '../../../../utils/templates/elements';
 import {findAttr} from '../../../../utils/templates/inputs';
@@ -26,7 +27,7 @@ export function migrateLabel({
         attrs.some(({name}) => name === 'tuilabel' || name === '[tuilabel]'),
     );
 
-    labelElements.forEach(({attrs, sourceCodeLocation}) => {
+    labelElements.forEach(({attrs, sourceCodeLocation, childNodes}) => {
         const labelAttr = findAttr(attrs, 'tuilabel');
 
         if (!labelAttr || !sourceCodeLocation) {
@@ -38,6 +39,7 @@ export function migrateLabel({
             sourceCodeLocation,
             recorder,
             templateOffset,
+            childNodes,
         });
     });
 }
@@ -47,23 +49,36 @@ function migrateValue({
     sourceCodeLocation,
     recorder,
     templateOffset,
+    childNodes,
 }: {
     valueAttr: Attribute;
     sourceCodeLocation: ElementLocation;
     recorder: UpdateRecorder;
     templateOffset: number;
+    childNodes: ChildNode[];
 }): void {
     const attrValue = valueAttr?.value;
-    const insertTo = sourceCodeLocation?.startTag?.endOffset ?? 0;
+    const {startTag, endTag} = sourceCodeLocation;
+    const insertTo = startTag?.endOffset;
 
     if (!attrValue || !insertTo) {
         return;
     }
 
-    recorder.insertRight(
-        insertTo + templateOffset,
-        valueAttr.name === 'tuilabel' ? attrValue : `{{ ${attrValue} }}`,
-    );
+    const onlyTextContent =
+        childNodes.length && childNodes.every((node) => node.nodeName === '#text');
+
+    if (onlyTextContent && startTag && endTag) {
+        const content = `<span tuiTitle><span tuiSubtitle>${valueAttr.name === 'tuilabel' ? attrValue : `{{ ${attrValue} }}`}</span>`;
+
+        recorder.insertRight(templateOffset + insertTo, content);
+        recorder.insertLeft(templateOffset + endTag.startOffset, '</span>');
+    } else {
+        recorder.insertRight(
+            insertTo + templateOffset,
+            valueAttr.name === 'tuilabel' ? attrValue : `{{ ${attrValue} }}`,
+        );
+    }
 
     const attrOffset = sourceCodeLocation?.attrs?.[valueAttr.name];
 

diff --git a/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-css-vars.spec.ts b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-css-vars.spec.ts
@@ -54,9 +54,11 @@ export class Test {
 const STYLES_BEFORE = `@import '@taiga-ui/core/styles/taiga-ui-local';
 
 :host {
-    color: var(--tui-text-primary);
+    box-shadow: var(--tui-shadow-navigation);
+    color: var(--tui-text-01-night);
     --tui-base-01: 'black';
     --tui-info-bg-night: 'blue';
+    --tui-shadow-sidebar: #fff;
 
     &_error {
         color: var(--tui-error-fill);
@@ -66,10 +68,12 @@ const STYLES_BEFORE = `@import '@taiga-ui/core/styles/taiga-ui-local';
 const STYLES_AFTER = `@import '@taiga-ui/core/styles/taiga-ui-local';
 
 :host {
+    box-shadow: var(--tui-shadow-small);
     color: var(--tui-text-primary);
     --tui-background-base: 'black';
 // TODO: use tuiTheme="dark" on an element to switch colors to dark theme
     --tui-status-info-pale: 'blue';
+    --tui-shadow-medium: #fff;
 
     &_error {
         color: var(--tui-status-negative);

diff --git a/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-label.spec.ts b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-label.spec.ts
@@ -47,6 +47,8 @@ const TEMPLATE_BEFORE = `
 <label [tuiLabel]="label">
   Some
 </label>
+
+<label tuiLabel="Foo">Bar</label>
 `;
 
 const TEMPLATE_AFTER = `
@@ -59,9 +61,11 @@ const TEMPLATE_AFTER = `
     >
 </label>
 
-<label tuiLabel>{{ label }}
+<label tuiLabel><span tuiTitle><span tuiSubtitle>{{ label }}</span>
   Some
-</label>
+</span></label>
+
+<label tuiLabel><span tuiTitle><span tuiSubtitle>Foo</span>Bar</span></label>
 `;
 
 describe('ng-update', () => {