feat!: replace deprecated directives with universal tuiItem-directi…

…ve (#2069) * feat(kit)!: replace `*tuiTab` with `*tuiItem` * feat(kit)!: replace `*tuiBreadcrumb` with `*tuiItem` * feat(kit)!: replace `tuiToolbarTool` with `tuiItem` * chore(cdk): `schematics` add migrations for `*tuiTab`, `*tuiBreadcrumb`, `tuiToolbarTool`
taiga-family · Aug 30, 2022 · d806829 · d806829
1 parent 0ee6ebb
commit d806829
Show file tree

Hide file tree

Showing 31 changed files with 193 additions and 129 deletions.
diff --git a/projects/addon-doc/src/components/example/example.template.html b/projects/addon-doc/src/components/example/example.template.html
@@ -37,7 +37,7 @@
             >
                 <ng-container *ngFor="let tab of tabs">
                     <button
-                        *tuiTab
+                        *tuiItem
                         tuiTab
                     >
                         {{ tab }}

diff --git a/projects/addon-doc/src/components/page/page.template.html b/projects/addon-doc/src/components/page/page.template.html
@@ -23,7 +23,7 @@ <h1 class="t-title">
         <ng-container *ngFor="let tab of tabConnectors; first as first; index as index">
             <ng-container *ngIf="first; else dynamicTab">
                 <a
-                    *tuiTab
+                    *tuiItem
                     tuiTab
                     routerLink="./"
                     routerLinkActive
@@ -34,7 +34,7 @@ <h1 class="t-title">
             </ng-container>
             <ng-template #dynamicTab>
                 <a
-                    *tuiTab
+                    *tuiItem
                     tuiTab
                     routerLinkActive
                     [routerLink]="getRouterLink(tab.pageTab || defaultTabs[index])"

diff --git a/projects/addon-editor/components/editor-new/editor-new.module.ts b/projects/addon-editor/components/editor-new/editor-new.module.ts
@@ -1,12 +1,14 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {TuiEditLinkModule} from '@taiga-ui/addon-editor/components/edit-link';
-import {
-    TuiToolbarNewModule,
-    TuiToolbarToolDirective,
-} from '@taiga-ui/addon-editor/components/toolbar-new';
+import {TuiToolbarNewModule} from '@taiga-ui/addon-editor/components/toolbar-new';
 import {TuiTiptapEditorModule} from '@taiga-ui/addon-editor/directives';
-import {TuiActiveZoneModule, TuiHoveredModule, TuiLetModule} from '@taiga-ui/cdk';
+import {
+    TuiActiveZoneModule,
+    TuiHoveredModule,
+    TuiItemDirective,
+    TuiLetModule,
+} from '@taiga-ui/cdk';
 import {TuiScrollbarModule, TuiWrapperModule} from '@taiga-ui/core';
 import {TuiDropdownSelectionModule} from '@taiga-ui/kit';
 
@@ -32,6 +34,6 @@ import {TuiEditorPortalHostComponent} from './portal/editor-portal-host.componen
         TuiTiptapEditorModule,
         TuiLetModule,
     ],
-    exports: [TuiEditorNewComponent, TuiToolbarToolDirective],
+    exports: [TuiEditorNewComponent, TuiItemDirective],
 })
 export class TuiEditorNewModule {}
diff --git a/projects/addon-editor/components/editor/editor.module.ts b/projects/addon-editor/components/editor/editor.module.ts
@@ -9,7 +9,12 @@ import {
 import {TuiToolbarModule} from '@taiga-ui/addon-editor/components/toolbar';
 import {TuiToolbarNewModule} from '@taiga-ui/addon-editor/components/toolbar-new';
 import {TuiDesignModeModule} from '@taiga-ui/addon-editor/directives/design-mode';
-import {TuiActiveZoneModule, TuiHoveredModule, TuiLetModule} from '@taiga-ui/cdk';
+import {
+    TuiActiveZoneModule,
+    TuiHoveredModule,
+    TuiItemDirective,
+    TuiLetModule,
+} from '@taiga-ui/cdk';
 import {
     TuiButtonModule,
     TuiLinkModule,
@@ -39,6 +44,6 @@ import {TuiEditorComponent} from './editor.component';
         TuiToolbarNewModule,
     ],
     declarations: [TuiEditorComponent],
-    exports: [TuiEditorComponent, TuiEditorNewComponent],
+    exports: [TuiEditorComponent, TuiEditorNewComponent, TuiItemDirective],
 })
 export class TuiEditorModule {}
diff --git a/projects/addon-editor/components/toolbar-new/index.ts b/projects/addon-editor/components/toolbar-new/index.ts
@@ -1,4 +1,3 @@
 export * from './toolbar-navigation-manager.directive';
 export * from './toolbar-new.component';
 export * from './toolbar-new.module';
-export * from './toolbar-tool.directive';
diff --git a/projects/addon-editor/components/toolbar-new/toolbar-navigation-manager.directive.ts b/projects/addon-editor/components/toolbar-new/toolbar-navigation-manager.directive.ts
@@ -9,7 +9,7 @@ import {
 } from '@taiga-ui/cdk';
 
 @Directive({
-    selector: `[tuiToolbarNavigationManager]`,
+    selector: '[tuiToolbarNavigationManager]',
 })
 export class TuiToolbarNavigationManagerDirective {
     constructor(
@@ -18,14 +18,12 @@ export class TuiToolbarNavigationManagerDirective {
 
     private get toolsContainers(): readonly HTMLElement[] {
         return Array.from(
-            this.elementRef.nativeElement.querySelectorAll<HTMLElement>(
-                `[tuiToolbarTool]`,
-            ),
+            this.elementRef.nativeElement.querySelectorAll<HTMLElement>('[tuiItem]'),
         );
     }
 
-    @HostListener(`keydown.arrowRight.prevent`, [`false`])
-    @HostListener(`keydown.arrowLeft.prevent`, [`true`])
+    @HostListener('keydown.arrowRight.prevent', ['false'])
+    @HostListener('keydown.arrowLeft.prevent', ['true'])
     onHorizontalNavigation(toPrevious: boolean): void {
         const {toolsContainers} = this;
         const focusedToolIndex = toolsContainers.findIndex(isNativeFocusedIn);

diff --git a/projects/addon-editor/components/toolbar-new/toolbar-new.module.ts b/projects/addon-editor/components/toolbar-new/toolbar-new.module.ts
@@ -5,7 +5,6 @@ import {
     TuiAlignContentModule,
     TuiCodeModule,
     TuiDetailsModule,
-    TuiEditorToolGroup,
     TuiFontSizeModule,
     TuiFontStyleModule,
     TuiHighlightColorModule,
@@ -16,7 +15,7 @@ import {
     TuiTableRowColumnManagerModule,
     TuiTextColorModule,
 } from '@taiga-ui/addon-editor/components/toolbar-tools';
-import {TuiFocusableModule} from '@taiga-ui/cdk';
+import {TuiFocusableModule, TuiItemDirective, TuiItemModule} from '@taiga-ui/cdk';
 import {
     TuiButtonModule,
     TuiDescribedByModule,
@@ -26,7 +25,6 @@ import {
 
 import {TuiToolbarNavigationManagerDirective} from './toolbar-navigation-manager.directive';
 import {TuiToolbarNewComponent} from './toolbar-new.component';
-import {TuiToolbarToolDirective} from './toolbar-tool.directive';
 
 @NgModule({
     imports: [
@@ -49,13 +47,9 @@ import {TuiToolbarToolDirective} from './toolbar-tool.directive';
         TuiHighlightColorModule,
         TuiCodeModule,
         TuiDetailsModule,
-        TuiEditorToolGroup,
+        TuiItemModule,
     ],
-    declarations: [
-        TuiToolbarNewComponent,
-        TuiToolbarToolDirective,
-        TuiToolbarNavigationManagerDirective,
-    ],
-    exports: [TuiToolbarNewComponent, TuiToolbarToolDirective],
+    declarations: [TuiToolbarNewComponent, TuiToolbarNavigationManagerDirective],
+    exports: [TuiToolbarNewComponent, TuiItemDirective],
 })
 export class TuiToolbarNewModule {}
diff --git a/projects/addon-editor/components/toolbar-new/toolbar-new.template.html b/projects/addon-editor/components/toolbar-new/toolbar-new.template.html
@@ -22,7 +22,7 @@
     >
         <button
             #undoBtn
-            tuiToolbarTool
+            tuiItem
             tuiIconButton
             type="button"
             size="s"
@@ -40,7 +40,7 @@
         <button
             #redoBtn
             tuiIconButton
-            tuiToolbarTool
+            tuiItem
             type="button"
             size="s"
             icon="tuiIconRedoLarge"
@@ -60,7 +60,7 @@
         class="t-block"
     >
         <tui-font-size
-            tuiToolbarTool
+            tuiItem
             class="t-tool t-wrapper"
         ></tui-font-size>
     </div>
@@ -70,20 +70,20 @@
     >
         <tui-font-style
             *ngIf="formatEnabled"
-            tuiToolbarTool
+            tuiItem
             class="t-tool t-wrapper"
             [enabledTools]="toolsSet"
         ></tui-font-style>
 
         <tui-align-content
             *ngIf="enabled(TuiEditorTool.Align)"
-            tuiToolbarTool
+            tuiItem
             class="t-tool t-wrapper"
         ></tui-align-content>
 
         <tui-list-configs
             *ngIf="enabled(TuiEditorTool.List)"
-            tuiToolbarTool
+            tuiItem
             class="t-tool t-wrapper"
         ></tui-list-configs>
 
@@ -92,7 +92,7 @@
             #button
             #quoteBtn
             tuiIconButton
-            tuiToolbarTool
+            tuiItem
             type="button"
             size="s"
             icon="tuiIconQuoteLarge"
@@ -110,7 +110,7 @@
         <tui-hosted-dropdown
             *ngIf="enabled(TuiEditorTool.Link)"
             #link
-            tuiToolbarTool
+            tuiItem
             class="t-wrapper"
             [canOpen]="!a"
             [content]="linkDropdown"
@@ -144,7 +144,7 @@
             #button
             #attachBtn
             tuiIconButton
-            tuiToolbarTool
+            tuiItem
             type="button"
             size="s"
             icon="tuiIconAttachLarge"
@@ -167,7 +167,7 @@
             #button
             #subBtn
             tuiIconButton
-            tuiToolbarTool
+            tuiItem
             type="button"
             size="s"
             icon="tuiIconSubscriptLarge"
@@ -186,7 +186,7 @@
             #button
             #supBtn
             tuiIconButton
-            tuiToolbarTool
+            tuiItem
             type="button"
             size="s"
             icon="tuiIconSuperscriptLarge"
@@ -207,14 +207,14 @@
     >
         <tui-text-color
             *ngIf="enabled(TuiEditorTool.Color)"
-            tuiToolbarTool
+            tuiItem
             class="t-tool t-wrapper"
             [colors]="colors"
         ></tui-text-color>
 
         <tui-highlight-color
             *ngIf="enabled(TuiEditorTool.Hilite)"
-            tuiToolbarTool
+            tuiItem
             class="t-tool t-wrapper"
             [colors]="colors"
         ></tui-highlight-color>
@@ -225,7 +225,7 @@
     >
         <tui-code
             *ngIf="enabled(TuiEditorTool.Code)"
-            tuiToolbarTool
+            tuiItem
             class="t-tool t-wrapper"
         ></tui-code>
 
@@ -234,7 +234,7 @@
             #button
             #texBtn
             tuiIconButton
-            tuiToolbarTool
+            tuiItem
             type="button"
             size="s"
             icon="tuiIconTeXLarge"
@@ -249,7 +249,7 @@
         ></button>
         <div
             *ngIf="enabled(TuiEditorTool.Img)"
-            tuiToolbarTool
+            tuiItem
             class="t-wrapper"
         >
             <button
@@ -282,7 +282,7 @@
             #button
             #hrBtn
             tuiIconButton
-            tuiToolbarTool
+            tuiItem
             type="button"
             size="s"
             icon="tuiIconHrLarge"
@@ -304,7 +304,7 @@
             #button
             #clearBtn
             tuiIconButton
-            tuiToolbarTool
+            tuiItem
             type="button"
             size="s"
             icon="tuiIconClearFormatLarge"
@@ -323,12 +323,12 @@
         class="t-block"
     >
         <tui-details
-            tuiToolbarTool
+            tuiItem
             class="t-tool t-tool_margin"
         ></tui-details>
 
         <tui-details-remove
-            tuiToolbarTool
+            tuiItem
             class="t-tool t-tool_margin"
         ></tui-details-remove>
     </div>
@@ -346,22 +346,22 @@
         class="t-block"
     >
         <tui-table-create
-            tuiToolbarTool
+            tuiItem
             class="t-tool t-tool_margin"
         ></tui-table-create>
 
         <tui-table-row-column-manager
-            tuiToolbarTool
+            tuiItem
             class="t-tool t-tool_margin"
         ></tui-table-row-column-manager>
 
         <tui-table-merge-cells
-            tuiToolbarTool
+            tuiItem
             class="t-tool t-tool_margin"
         ></tui-table-merge-cells>
 
         <tui-table-cell-color
-            tuiToolbarTool
+            tuiItem
             class="t-tool t-wrapper"
             [colors]="colors"
         ></tui-table-cell-color>

diff --git a/projects/addon-editor/components/toolbar-new/toolbar-tool.directive.ts b/projects/addon-editor/components/toolbar-new/toolbar-tool.directive.ts
diff --git a/projects/cdk/directives/item/item.directive.ts b/projects/cdk/directives/item/item.directive.ts
@@ -1,10 +1,9 @@
 import {Directive} from '@angular/core';
 
 /**
- * Blank directive to query for {@link TemplateRef}
- * TODO: 3.0 Migrate everything to this directive
+ * Blank directive for queries via `@ContentChildren` / `@ViewChildren` / `querySelector`
  */
 @Directive({
-    selector: `ng-template[tuiItem]`,
+    selector: '[tuiItem]',
 })
 export class TuiItemDirective {}
-Original file line number
+Diff line change
@@ Expand Up / @@ -37,7 +37,7 @@ @@
                 >
                     <ng-container *ngFor="let tab of tabs">
                         <button
-                            *tuiTab
+                            *tuiItem
                             tuiTab
                         >
                             {{ tab }}
@@ Expand Down @@