refactor: changes needed in proprietary (#7926)

Signed-off-by: waterplea <[email protected]> Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Jun 25, 2024 · e4fc124 · e4fc124
1 parent 28dd338
commit e4fc124
Show file tree

Hide file tree

Showing 36 changed files with 100 additions and 531 deletions.
diff --git a/projects/addon-doc/components/documentation/documentation.style.less b/projects/addon-doc/components/documentation/documentation.style.less
@@ -72,7 +72,7 @@
 
 .t-property {
     font: var(--tui-font-text-m);
-    margin-bottom: @space;
+    margin-bottom: 0.25rem;
     font-family: monospace;
     color: @color-property;
 

diff --git a/projects/addon-doc/components/internal/see-also/index.less b/projects/addon-doc/components/internal/see-also/index.less
@@ -10,6 +10,6 @@
     text-transform: uppercase;
     letter-spacing: 0.075em;
     color: var(--tui-text-secondary);
-    margin: 0 0 @space * 2;
+    margin: 0 0 0.5rem;
     white-space: nowrap;
 }
diff --git a/projects/cdk/constants/used-icons.ts b/projects/cdk/constants/used-icons.ts
@@ -37,8 +37,8 @@ export const TUI_USED_ICONS = [
     '@tui.circle-check',
     '@tui.circle-x',
     '@tui.circle-alert',
-    '@tui.x',
     '@tui.circle-help',
+    '@tui.x',
     '@tui.chevron-right',
     '@tui.chevron-left',
     '@tui.calendar',

diff --git a/projects/core/components/loader/loader.style.less b/projects/core/components/loader/loader.style.less
@@ -101,7 +101,7 @@
     stroke-width: 0; // for Safari 11
 
     &_horizontal {
-        margin: 0 0 0 @space * 4;
+        margin: 0 0 0 1rem;
     }
 }
 
@@ -131,7 +131,7 @@
     display: block;
     width: var(--t-diameter);
     height: var(--t-diameter);
-    margin: @space calc(var(--t-diameter) / -2);
+    margin: 0.25rem calc(var(--t-diameter) / -2);
     border-radius: 100%;
     overflow: hidden;
     animation: tuiLoaderRotate 4s linear infinite;

diff --git a/projects/core/components/root/root.style.less b/projects/core/components/root/root.style.less
@@ -18,8 +18,9 @@ html[data-tui-theme],
     .scrollbar-hidden();
 }
 
-body {
-    margin: 0;
+body,
+input {
+    margin: 0; // lowest possible specificity CSS reset for default margins
 }
 
 tui-root {

diff --git a/projects/core/components/textfield/textfield.component.ts b/projects/core/components/textfield/textfield.component.ts
@@ -24,6 +24,7 @@ import {
     tuiDropdownOptionsProvider,
 } from '@taiga-ui/core/directives/dropdown';
 import {TuiIcons} from '@taiga-ui/core/directives/icons';
+import {TUI_COMMON_ICONS} from '@taiga-ui/core/tokens';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
 import {PolymorpheusOutlet} from '@taiga-ui/polymorpheus';
 
@@ -87,6 +88,7 @@ export class TuiTextfieldComponent<T> implements TuiDataListHost<T> {
         ?.change$;
 
     protected readonly options = inject(TUI_TEXTFIELD_OPTIONS);
+    protected readonly icons = inject(TUI_COMMON_ICONS);
     protected readonly control = inject(NgControl, {optional: true});
 
     @Input()

diff --git a/projects/core/components/textfield/textfield.template.html b/projects/core/components/textfield/textfield.template.html
@@ -10,11 +10,11 @@
     <button
         *ngIf="options.cleaner"
         appearance="icon"
-        iconLeft="@tui.x"
         size="xs"
         tabindex="-1"
         tuiIconButton
         class="t-clear"
+        [iconLeft]="icons.close"
         (click)="directive?.setValue('')"
         (pointerdown.silent.prevent)="input.focus()"
     ></button>

diff --git a/projects/core/pipes/fallback-src/fallback-src.pipe.ts b/projects/core/pipes/fallback-src/fallback-src.pipe.ts
@@ -2,7 +2,7 @@ import type {PipeTransform} from '@angular/core';
 import {Pipe} from '@angular/core';
 import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
 import type {Observable} from 'rxjs';
-import {fromEvent, map, merge, startWith} from 'rxjs';
+import {fromEvent, map, startWith} from 'rxjs';
 
 @Pipe({
     standalone: true,
@@ -12,10 +12,7 @@ export class TuiFallbackSrcPipe implements PipeTransform {
     private readonly el = tuiInjectElement();
 
     public transform(src: string, fallback: string): Observable<string> {
-        return merge(
-            fromEvent(this.el, 'tui-icon-error'),
-            fromEvent(this.el, 'error', {capture: true}),
-        ).pipe(
+        return fromEvent(this.el, 'error', {capture: true}).pipe(
             map(() => fallback),
             startWith(src),
         );

diff --git a/projects/core/styles/taiga-ui-local.less b/projects/core/styles/taiga-ui-local.less
@@ -1,8 +1,3 @@
-/**
- * @deprecated remove in 4.0
- */
-@space: 0.25rem;
-
 @import 'mixins/browsers.less';
 @import 'mixins/mixins.less';
 @import 'mixins/picker.less';

diff --git a/projects/core/styles/theme/variables.less b/projects/core/styles/theme/variables.less
@@ -1,6 +1,6 @@
 @font-fallback: -apple-system, 'BlinkMacSystemFont', system-ui, 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif;
 
-:root,
+&:root,
 [tuiTheme='light'][tuiTheme='light'] {
     // Fonts
     --tui-font-heading: 'Manrope', @font-fallback;

diff --git a/projects/demo-cypress/cypress.config.ts b/projects/demo-cypress/cypress.config.ts
@@ -36,7 +36,6 @@ export default defineConfig({
                         ],
                         baseHref: './',
                         styles: [
-                            'projects/demo/src/styles/normalize.less',
                             'projects/demo/src/styles/styles.less',
                             'projects/demo/src/styles/doc-global.style.less',
                         ],

diff --git a/projects/demo/project.json b/projects/demo/project.json
@@ -49,11 +49,7 @@
                     }
                 ],
                 "baseHref": "./",
-                "styles": [
-                    "{projectRoot}/src/styles/normalize.less",
-                    "{projectRoot}/src/styles/styles.less",
-                    "{projectRoot}/src/styles/styles.scss"
-                ],
+                "styles": ["{projectRoot}/src/styles/styles.less", "{projectRoot}/src/styles/styles.scss"],
                 "scripts": [],
                 "allowedCommonJsDependencies": ["markdown-it"],
                 "vendorChunk": true,

diff --git a/projects/demo/src/modules/components/block/examples/3/index.less b/projects/demo/src/modules/components/block/examples/3/index.less
@@ -19,7 +19,7 @@ form {
 
 .text {
     font: var(--tui-font-text-s);
-    margin-top: @space;
+    margin-top: 0.25rem;
     color: var(--tui-text-secondary);
 }
 

diff --git a/projects/demo/src/modules/components/combo-box/examples/1/index.less b/projects/demo/src/modules/components/combo-box/examples/1/index.less
@@ -6,7 +6,7 @@
 }
 
 .avatar {
-    margin: 0 @space * 2 0 0;
+    margin: 0 0.5rem 0 0;
     flex-shrink: 0;
 }
 

diff --git a/projects/demo/src/modules/components/combo-box/examples/2/index.less b/projects/demo/src/modules/components/combo-box/examples/2/index.less
@@ -1,7 +1,7 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
 .avatar {
-    margin: 0 @space * 2 0 0;
+    margin: 0 0.5rem 0 0;
     flex-shrink: 0;
 }
 

diff --git a/projects/demo/src/modules/components/filter/examples/1/index.less b/projects/demo/src/modules/components/filter/examples/1/index.less
@@ -6,13 +6,13 @@
 
 .title {
     font: var(--tui-font-heading-5);
-    margin: 0 0 @space * 3;
+    margin: 0 0 0.75rem;
 }
 
 .filters {
     display: inline;
 }
 
 .tag {
-    margin: 0 @space @space 0;
+    margin: 0 0.25rem 0.25rem 0;
 }
diff --git a/projects/demo/src/modules/components/filter/examples/2/index.less b/projects/demo/src/modules/components/filter/examples/2/index.less
@@ -6,13 +6,13 @@
 
 .title {
     font: var(--tui-font-heading-5);
-    margin: 0 0 @space * 3;
+    margin: 0 0 0.75rem;
 }
 
 .filters {
     display: inline;
 }
 
 .tag {
-    margin: 0 @space @space 0;
+    margin: 0 0.25rem 0.25rem 0;
 }
diff --git a/projects/demo/src/modules/components/filter/examples/3/index.less b/projects/demo/src/modules/components/filter/examples/3/index.less
@@ -6,13 +6,13 @@
 
 .title {
     font: var(--tui-font-heading-5);
-    margin: 0 0 @space * 3;
+    margin: 0 0 0.75rem;
 }
 
 .filters {
     display: inline;
 }
 
 .tag {
-    margin: 0 @space @space 0;
+    margin: 0 0.25rem 0.25rem 0;
 }
diff --git a/projects/demo/src/modules/components/icons/icons-group/icons-group.style.less b/projects/demo/src/modules/components/icons/icons-group/icons-group.style.less
@@ -23,7 +23,7 @@
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    margin: 0 -@space * 3;
+    margin: 0 -0.75rem;
     justify-content: center;
 }
 

diff --git a/projects/demo/src/modules/components/input/examples/8/index.less b/projects/demo/src/modules/components/input/examples/8/index.less
@@ -1,7 +1,7 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
 .avatar {
-    margin: 0 @space * 2 0 0;
+    margin: 0 0.5rem 0 0;
     flex-shrink: 0;
 }
 

diff --git a/projects/demo/src/modules/components/island/examples/3/index.less b/projects/demo/src/modules/components/island/examples/3/index.less
@@ -6,17 +6,17 @@
 
 .title {
     font: var(--tui-font-heading-4);
-    margin: 0 0 @space * 4;
+    margin: 0 0 1rem;
 
     &_size_s {
         font: var(--tui-font-heading-6);
-        margin: 0 0 @space * 3;
+        margin: 0 0 0.75rem;
     }
 }
 
 .text {
     font: var(--tui-font-text-m);
-    margin: 0 0 @space * 6;
+    margin: 0 0 1.5rem;
 }
 
 .image {

diff --git a/projects/demo/src/modules/components/select/examples/2/index.less b/projects/demo/src/modules/components/select/examples/2/index.less
@@ -47,7 +47,7 @@
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    margin-right: @space * 2;
+    margin-right: 0.5rem;
     width: 2.25rem;
     height: 2.25rem;
     border-radius: 100%;

diff --git a/projects/demo/src/modules/components/select/examples/6/index.less b/projects/demo/src/modules/components/select/examples/6/index.less
@@ -6,7 +6,7 @@
 }
 
 .avatar {
-    margin: 0 @space * 2 0 0;
+    margin: 0 0.5rem 0 0;
     flex-shrink: 0;
 }
 

diff --git a/projects/demo/src/modules/customization/viewport/examples/1/index.ts b/projects/demo/src/modules/customization/viewport/examples/1/index.ts
@@ -19,7 +19,7 @@ export class Example extends TuiRectAccessor {
 
     public readonly type = 'viewport';
 
-    public getClientRect(): ClientRect {
+    public getClientRect(): DOMRect {
         return this.el.getBoundingClientRect();
     }
 }