feat(kit)!: Toggle rename to Switch and replace with experimental…

… component (#7069) Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Mar 25, 2024 · 60dc5c8 · 60dc5c8
1 parent 64feaf4
commit 60dc5c8
Show file tree

Hide file tree

Showing 116 changed files with 451 additions and 1,527 deletions.
diff --git a/.env b/.env
@@ -1 +1,2 @@
 NODE_OPTIONS=--max-old-space-size=12288
+NX_NATIVE_COMMAND_RUNNER=false
diff --git a/package.json b/package.json
@@ -120,6 +120,7 @@
         "@taiga-ui/prettier-config": "0.10.0",
         "@taiga-ui/stylelint-config": "0.20.1",
         "@taiga-ui/tsconfig": "0.17.0",
+        "@tinkoff/ng-event-plugins": "^3.1.1",
         "@types/glob": "8.1.0",
         "@types/node": "20.11.30",
         "@types/webpack-env": "1.18.4",

diff --git a/projects/addon-doc/components/documentation/documentation.module.ts b/projects/addon-doc/components/documentation/documentation.module.ts
@@ -18,7 +18,7 @@ import {
     TuiDataListWrapperModule,
     TuiInputNumberModule,
     TuiSelectModule,
-    TuiToggleModule,
+    TuiSwitchComponent,
 } from '@taiga-ui/kit';
 
 import {TuiInputOpacityModule} from '../internal/input-opacity/input-opacity.module';
@@ -40,7 +40,7 @@ import {TuiDocTypeReferencePipe} from './pipes/type-reference.pipe';
         RouterModule,
         TuiBadgeDirective,
         TuiSelectModule,
-        TuiToggleModule,
+        TuiSwitchComponent,
         TuiLinkModule,
         TuiInputNumberModule,
         TuiModeModule,

diff --git a/projects/addon-doc/components/documentation/documentation.style.less b/projects/addon-doc/components/documentation/documentation.style.less
@@ -143,3 +143,7 @@
             center/100%;
     }
 }
+
+.t-switch {
+    display: block;
+}
diff --git a/projects/addon-doc/components/documentation/documentation.template.html b/projects/addon-doc/components/documentation/documentation.template.html
@@ -108,10 +108,12 @@
 
                     <ng-template #noItems>
                         <ng-container [ngSwitch]="propertyConnector.documentationPropertyType">
-                            <tui-toggle
+                            <input
                                 *ngSwitchCase="'boolean'"
-                                size="l"
-                                [nativeId]="propertyConnector.attrName"
+                                tuiSwitch
+                                type="checkbox"
+                                class="t-switch"
+                                [id]="propertyConnector.attrName"
                                 [ngModel]="propertyConnector.documentationPropertyValue"
                                 [showIcons]="true"
                                 (ngModelChange)="propertyConnector.onValueChange($event)"

diff --git a/projects/addon-mobile/styles/android/toggle.less b/projects/addon-mobile/styles/android/toggle.less
@@ -1,4 +1,4 @@
-input[tuiToggle] {
+input[tuiSwitch] {
     .transition(~'color, opacity');
 
     height: 1.25rem;

diff --git a/projects/addon-mobile/styles/ios/toggle.less b/projects/addon-mobile/styles/ios/toggle.less
@@ -1,4 +1,4 @@
-input[tuiToggle] {
+input[tuiSwitch] {
     height: 1.9375rem;
     width: 3.1875rem;
     border-radius: 2rem;

diff --git a/projects/cdk/constants/used-icons.ts b/projects/cdk/constants/used-icons.ts
@@ -63,9 +63,5 @@ export const TUI_USED_ICONS = [
     'tuiIconEyeLarge',
     'tuiIconClock',
     'tuiIconClockLarge',
-    'tuiIconToggleOff',
-    'tuiIconToggleOffLarge',
-    'tuiIconToggleOn',
-    'tuiIconToggleOnLarge',
     'tuiIconCalendar',
 ] as const;
diff --git a/projects/cdk/schematics/ng-update/v4/steps/constants/identifiers-to-replace.ts b/projects/cdk/schematics/ng-update/v4/steps/constants/identifiers-to-replace.ts
@@ -54,7 +54,7 @@ export const IDENTIFIERS_TO_REPLACE: ReplacementIdentifier[] = [
     },
     {
         from: {name: 'TuiToggleModule', moduleSpecifier: '@taiga-ui/experimental'},
-        to: {name: 'TuiToggleModule', moduleSpecifier: '@taiga-ui/kit'},
+        to: {name: 'TuiSwitchComponent', moduleSpecifier: '@taiga-ui/kit'},
     },
     {
         from: {name: 'TuiTextAreaModule', moduleSpecifier: '@taiga-ui/kit'},

diff --git a/projects/cdk/schematics/ng-update/v4/steps/templates/toggles/migrate-toggle.ts b/projects/cdk/schematics/ng-update/v4/steps/templates/toggles/migrate-toggle.ts
@@ -31,7 +31,7 @@ export function migrateToggle({
         replaceSizeAttr(attrs, sourceCodeLocation, recorder, templateOffset);
         replaceOpenTag(sourceCodeLocation, recorder, templateOffset, {
             tag: 'tui-toggle',
-            directive: 'tuiToggle',
+            directive: 'tuiSwitch',
             type: 'checkbox',
         });
         closeStartTag(sourceCodeLocation, recorder, templateOffset);

diff --git a/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-toggle.spec.ts b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-toggle.spec.ts
@@ -26,12 +26,12 @@ import { TuiToggleModule } from "@taiga-ui/experimental";
 export class TestComponent {
 }`;
 
-const COMPONENT_AFTER = `import { TuiToggleModule } from "@taiga-ui/kit";
+const COMPONENT_AFTER = `import { TuiSwitchComponent } from "@taiga-ui/kit";
 
 @Component({
     standalone: true,
     templateUrl: './test.template.html',
-    imports: [TuiToggleModule]
+    imports: [TuiSwitchComponent]
 })
 export class TestComponent {
 }`;
@@ -54,21 +54,21 @@ const TEMPLATE_BEFORE = `
 
 const TEMPLATE_AFTER = `
 <input
-    tuiToggle
+    tuiSwitch
     type="checkbox"
     formControlName="test"
     class="toggle"
     [showIcons]="true"
 />
 <!-- TODO: (Taiga UI migration) toggle [singleColor] and [showLoader] inputs have been removed due to design changes -->
 <input
-    tuiToggle
+    tuiSwitch
     type="checkbox"
     [showIcons]="true"
     ${''}
 />
 <input
-    tuiToggle
+    tuiSwitch
     type="checkbox"
     formControlName="test"
     class="toggle"

diff --git a/projects/core/internal/svg-defs-host/svg-defs-host.template.html b/projects/core/internal/svg-defs-host/svg-defs-host.template.html
@@ -1,4 +1,4 @@
-<svg:svg
+<svg
     version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns="http://www.w3.org/2000/svg"
@@ -15,4 +15,4 @@
             <svg [outerHTML]="def" />
         </defs>
     </ng-template>
-</svg:svg>
+</svg>
diff --git a/projects/core/styles/mixins/mixins.less b/projects/core/styles/mixins/mixins.less
@@ -86,7 +86,7 @@
     > tui-badge,
     > [tuiBadge],
     > [tuiRadio],
-    > [tuiToggle],
+    > [tuiSwitch],
     > [tuiCheckbox],
     &._icon-left:before,
     &._icon-right:after {

diff --git a/projects/core/styles/mixins/mixins.scss b/projects/core/styles/mixins/mixins.scss
@@ -85,7 +85,7 @@
     > tui-badge,
     > [tuiBadge],
     > [tuiRadio],
-    > [tuiToggle],
+    > [tuiSwitch],
     > [tuiCheckbox],
     &._icon-left:before,
     &._icon-right:after {

diff --git a/projects/demo/src/modules/app/app.const.ts b/projects/demo/src/modules/app/app.const.ts
@@ -18,7 +18,7 @@ export const SEE_ALSO_GROUPS: ReadonlyArray<readonly string[]> = [
     ['InputPhone', 'InputPhoneInternational'],
     ['Button', 'Action', 'Link'],
     ['Action', 'Island'],
-    ['Checkbox', 'Radio', 'Toggle', 'Block', 'Label'],
+    ['Checkbox', 'Radio', 'Switch', 'Block', 'Label'],
     ['Accordion', 'Expand'],
     ['ComboBox', 'MultiSelect', 'Select'],
     ['Badge', 'BadgedContent', 'Tag'],

diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
@@ -201,14 +201,6 @@ export const ROUTES: Routes = [
         title: 'Title',
         loadComponent: async () => import('../directives/title'),
     }),
-    {
-        path: 'experimental/toggle',
-        loadChildren: async () =>
-            (await import('../experimental/toggle/toggle.module')).ExampleTuiToggleModule,
-        data: {
-            title: 'Toggle ',
-        },
-    },
     {
         path: 'experimental/tooltip',
         loadChildren: async () =>
@@ -318,14 +310,11 @@ export const ROUTES: Routes = [
             title: 'Icon',
         },
     },
-    {
+    route({
         path: 'experimental/label',
-        loadChildren: async () =>
-            (await import('../experimental/label/label.module')).ExampleTuiLabelModule,
-        data: {
-            title: 'Label ',
-        },
-    },
+        title: 'Label ',
+        loadComponent: async () => import('../experimental/label'),
+    }),
     {
         path: 'experimental/progress-segmented',
         loadChildren: async () =>
@@ -1157,14 +1146,11 @@ export const ROUTES: Routes = [
             title: 'Tiles',
         },
     },
-    {
-        path: 'components/toggle',
-        loadChildren: async () =>
-            (await import('../components/toggle/toggle.module')).ExampleTuiToggleModule,
-        data: {
-            title: 'Toggle',
-        },
-    },
+    route({
+        path: 'components/switch',
+        title: 'Switch',
+        loadComponent: async () => import('../components/switch'),
+    }),
     {
         path: 'components/tooltip',
         loadChildren: async () =>

diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
@@ -264,9 +264,9 @@ export const pages: TuiDocPages = [
             },
             {
                 section: 'Components',
-                title: 'Toggle',
+                title: 'Switch',
                 keywords: 'инпут, форма, ввод, toggle, переключение',
-                route: '/components/toggle',
+                route: '/components/switch',
             },
         ],
     },
@@ -983,12 +983,6 @@ export const pages: TuiDocPages = [
         keywords: 'чек, радио, ввод, форма, form, checkbox, radio, toggle',
         route: '/experimental/radio',
     },
-    {
-        section: 'Experimental',
-        title: 'Toggle ',
-        keywords: 'чек, радио, ввод, форма, form, checkbox, radio, toggle',
-        route: '/experimental/toggle',
-    },
     {
         section: 'Pipes',
         title: 'Amount',

diff --git a/projects/demo/src/modules/components/block/block.module.ts b/projects/demo/src/modules/components/block/block.module.ts
@@ -9,12 +9,13 @@ import {
     TuiTitleDirective,
     TuiTooltipModule,
 } from '@taiga-ui/core';
+import {TuiCheckboxModule, TuiRadioComponent} from '@taiga-ui/experimental';
 import {
-    TuiCheckboxModule,
-    TuiRadioComponent,
-    TuiToggleModule,
-} from '@taiga-ui/experimental';
-import {TuiAvatarComponent, TuiBlockDirective, TuiFadeDirective} from '@taiga-ui/kit';
+    TuiAvatarComponent,
+    TuiBlockDirective,
+    TuiFadeDirective,
+    TuiSwitchComponent,
+} from '@taiga-ui/kit';
 
 import {ExampleTuiBlockComponent} from './block.component';
 import {TuiBlockExample1} from './examples/1';
@@ -34,7 +35,7 @@ import {TuiBlockExample3} from './examples/3';
         TuiRadioComponent,
         TuiFadeDirective,
         TuiTitleDirective,
-        TuiToggleModule,
+        TuiSwitchComponent,
         TuiIconComponent,
         TuiExamplePipe,
         tuiGetDocModules(ExampleTuiBlockComponent),

diff --git a/projects/demo/src/modules/components/block/examples/3/index.html b/projects/demo/src/modules/components/block/examples/3/index.html
@@ -37,7 +37,7 @@
         </span>
         <input
             formControlName="testValue3"
-            tuiToggle
+            tuiSwitch
             type="checkbox"
         />
     </label>
@@ -48,7 +48,7 @@
         <input
             formControlName="testValue3"
             size="s"
-            tuiToggle
+            tuiSwitch
             type="checkbox"
         />
         Enable

diff --git a/projects/demo/src/modules/components/button/button.component.ts b/projects/demo/src/modules/components/button/button.component.ts
@@ -4,6 +4,7 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import type {TuiDocExample} from '@taiga-ui/addon-doc';
 import {tuiPure} from '@taiga-ui/cdk';
 import type {TuiSizeXL, TuiSizeXS} from '@taiga-ui/core';
+import {tuiSwitchOptionsProvider} from '@taiga-ui/kit';
 import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
@@ -19,6 +20,7 @@ import {AbstractExampleTuiInteractive} from '../abstract/interactive';
             provide: ABSTRACT_PROPS_ACCESSOR,
             useExisting: forwardRef(() => ExampleTuiButtonComponent),
         },
+        tuiSwitchOptionsProvider({appearance: () => 'primary'}),
     ],
 })
 export class ExampleTuiButtonComponent extends AbstractExampleTuiInteractive {

diff --git a/projects/demo/src/modules/components/button/button.module.ts b/projects/demo/src/modules/components/button/button.module.ts
@@ -13,7 +13,7 @@ import {
     TuiNotificationModule,
     TuiSvgModule,
 } from '@taiga-ui/core';
-import {TuiArrowModule, TuiAvatarComponent, TuiToggleModule} from '@taiga-ui/kit';
+import {TuiArrowModule, TuiAvatarComponent, TuiSwitchComponent} from '@taiga-ui/kit';
 
 import {InheritedDocumentationModule} from '../abstract/inherited-documentation/inherited-documentation.module';
 import {ExampleTuiButtonComponent} from './button.component';
@@ -31,7 +31,7 @@ import {TuiButtonExample6} from './examples/6';
         TuiThumbnailCardModule,
         TuiAvatarComponent,
         TuiSvgModule,
-        TuiToggleModule,
+        TuiSwitchComponent,
         TuiFocusableModule,
         TuiButtonModule,
         TuiDropdownModule,

diff --git a/projects/demo/src/modules/components/button/button.template.html b/projects/demo/src/modules/components/button/button.template.html
@@ -119,9 +119,10 @@
                 </ng-template>
             </p>
             tuiButton
-            <tui-toggle
+            <input
+                tuiSwitch
+                type="checkbox"
                 class="tui-space_horizontal-2"
-                [singleColor]="true"
                 [(ngModel)]="iconButton"
             />
             tuiIconButton

diff --git a/projects/demo/src/modules/components/error/error.module.ts b/projects/demo/src/modules/components/error/error.module.ts
@@ -5,7 +5,8 @@ import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiMapperPipeModule} from '@taiga-ui/cdk';
 import {TuiErrorModule, TuiLinkModule} from '@taiga-ui/core';
-import {TuiToggleModule} from '@taiga-ui/kit';
+import {TuiLabelDirective} from '@taiga-ui/experimental';
+import {TuiSwitchComponent} from '@taiga-ui/kit';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
 import {ExampleTuiErrorComponent} from './error.component';
@@ -15,7 +16,8 @@ import {TuiErrorExample1} from './examples/1';
     imports: [
         CommonModule,
         FormsModule,
-        TuiToggleModule,
+        TuiSwitchComponent,
+        TuiLabelDirective,
         TuiErrorModule,
         TuiLinkModule,
         PolymorpheusModule,

diff --git a/projects/demo/src/modules/components/error/examples/1/index.html b/projects/demo/src/modules/components/error/examples/1/index.html
@@ -1,2 +1,9 @@
-<tui-toggle [(ngModel)]="enabled">Show</tui-toggle>
+<label tuiLabel>
+    <input
+        tuiSwitch
+        type="checkbox"
+        [(ngModel)]="enabled"
+    />
+    Show
+</label>
 <tui-error [error]="computedError" />
diff --git a/projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.module.ts b/projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.module.ts
@@ -20,7 +20,6 @@ import {
     TuiMultiSelectModule,
     TuiSelectModule,
     TuiTabsModule,
-    TuiToggleModule,
 } from '@taiga-ui/kit';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
@@ -54,7 +53,6 @@ import {ExampleTuiHostedDropdownComponent} from './hosted-dropdown.component';
         TuiDataListWrapperModule,
         DropdownDocumentationModule,
         TuiAddonDocModule,
-        TuiToggleModule,
         TuiMultiSelectModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiHostedDropdownComponent)),
     ],
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		NODE_OPTIONS=--max-old-space-size=12288
		NX_NATIVE_COMMAND_RUNNER=false