refactor(core): Root use Platform directive (#7931)

taiga-family · Jun 25, 2024 · dfbde23 · dfbde23
1 parent 4082269
commit dfbde23
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 31 deletions.
diff --git a/projects/addon-mobile/styles/common/button.less b/projects/addon-mobile/styles/common/button.less
@@ -1,4 +1,4 @@
-[tuiButton] {
+[tuiCardLarge] [tuiButton] {
     width: 100%;
 }
 
@@ -14,7 +14,12 @@
         --t-radius: 0.75rem;
     }
 
-    &:disabled:not(._loading) {
+    &[data-appearance='primary']:disabled:not(._loading),
+    &[data-appearance='secondary']:disabled:not(._loading),
+    &[data-appearance='accent']:disabled:not(._loading),
+    &[data-appearance='destructive']:disabled:not(._loading),
+    &[data-appearance='opposite']:disabled:not(._loading),
+    &[data-appearance='flat']:disabled:not(._loading) {
         background: var(--tui-background-neutral-1);
         color: var(--tui-background-neutral-1-pressed);
         opacity: 1;

diff --git a/projects/cdk/directives/platform/platform.directive.ts b/projects/cdk/directives/platform/platform.directive.ts
@@ -7,14 +7,14 @@ import {TUI_PLATFORM} from '@taiga-ui/cdk/tokens';
     providers: [
         {
             provide: TUI_PLATFORM,
-            deps: [TuiPlatform],
-            useFactory: ({tuiPlatform}: TuiPlatform) =>
-                tuiPlatform || inject(TUI_PLATFORM, {skipSelf: true}),
+            useFactory: () => inject(TuiPlatform).tuiPlatform,
         },
     ],
 })
 export class TuiPlatform {
     @Input()
     @HostBinding('attr.data-platform')
-    public tuiPlatform: '' | 'android' | 'ios' | 'web' = '';
+    public tuiPlatform: 'android' | 'ios' | 'web' = inject(TUI_PLATFORM, {
+        skipSelf: true,
+    });
 }
diff --git a/projects/core/components/calendar/calendar-sheet.style.less b/projects/core/components/calendar/calendar-sheet.style.less
@@ -8,6 +8,14 @@
     width: @itemSize * 7;
 }
 
+[data-type='weekday'] {
+    color: var(--tui-text-primary);
+}
+
+[data-type='weekend'] {
+    color: var(--tui-status-negative);
+}
+
 .t-row {
     justify-content: flex-start;
 

diff --git a/projects/core/components/root/root.component.ts b/projects/core/components/root/root.component.ts
@@ -8,8 +8,9 @@ import {
 } from '@angular/core';
 import {toSignal} from '@angular/core/rxjs-interop';
 import {TUI_VERSION} from '@taiga-ui/cdk/constants';
+import {TuiPlatform} from '@taiga-ui/cdk/directives/platform';
 import {tuiWatch} from '@taiga-ui/cdk/observables';
-import {TUI_IS_ANDROID, TUI_IS_IOS, TUI_IS_MOBILE} from '@taiga-ui/cdk/tokens';
+import {TUI_IS_MOBILE} from '@taiga-ui/cdk/tokens';
 import {TuiAlerts} from '@taiga-ui/core/components/alert';
 import {TUI_DIALOGS, TuiDialogs} from '@taiga-ui/core/components/dialog';
 import {TuiScrollControls} from '@taiga-ui/core/components/scrollbar';
@@ -38,38 +39,31 @@ import {debounceTime, map, of} from 'rxjs';
     encapsulation: ViewEncapsulation.None,
     // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
     changeDetection: ChangeDetectionStrategy.Default,
+    hostDirectives: [TuiPlatform],
     host: {
         'data-tui-version': TUI_VERSION,
         '[style.--tui-duration.ms]': 'duration',
-        '[class._ios]': 'isIOS',
-        '[class._android]': 'isAndroid',
         '[class._reduced-motion]': 'reducedMotion',
         '[class._mobile]': 'isMobileRes()',
         // Required for the :active state to work in Safari. https://stackoverflow.com/a/33681490
         '(touchstart.passive.silent)': '0',
     },
 })
 export class TuiRoot {
-    private readonly dialogs$ = inject<Observable<readonly unknown[]>>(TUI_DIALOGS);
-    private readonly isMobile = inject(TUI_IS_MOBILE);
-    private readonly breakpoint = inject(TuiBreakpointService);
-
-    protected readonly isIOS = inject(TUI_IS_IOS);
-    protected readonly isAndroid = inject(TUI_IS_ANDROID);
     protected readonly reducedMotion = inject(TUI_REDUCED_MOTION);
     protected readonly duration = tuiGetDuration(inject(TUI_ANIMATIONS_SPEED));
 
     protected readonly isMobileRes = toSignal(
-        this.breakpoint.pipe(
+        inject(TuiBreakpointService).pipe(
             map(breakpoint => breakpoint === 'mobile'),
             tuiWatch(inject(ChangeDetectorRef)),
         ),
     );
 
-    protected readonly scrollbars$: Observable<boolean> = this.isMobile
+    protected readonly scrollbars$: Observable<boolean> = inject(TUI_IS_MOBILE)
         ? of(false)
-        : this.dialogs$.pipe(
-              map(dialogs => !dialogs.length),
+        : inject<Observable<readonly unknown[]>>(TUI_DIALOGS).pipe(
+              map(({length}) => !length),
               debounceTime(0),
           );
 

diff --git a/projects/core/styles/taiga-ui-theme.less b/projects/core/styles/taiga-ui-theme.less
@@ -1,3 +1,3 @@
 @import 'theme/variables.less';
 @import 'theme/appearance.less';
-@import 'theme/calendar.less';
+@import 'theme/appearance/textfield.less';
diff --git a/projects/core/styles/theme/appearance.less b/projects/core/styles/theme/appearance.less
@@ -9,4 +9,5 @@
 @import 'appearance/primary.less';
 @import 'appearance/secondary.less';
 @import 'appearance/status.less';
-@import 'appearance/textfield.less';
+// Do not add it, we need it separately in proprietary theme
+// @import 'appearance/textfield.less';
diff --git a/projects/core/styles/theme/calendar.less b/projects/core/styles/theme/calendar.less
diff --git a/projects/demo/src/modules/app/app.config.ts b/projects/demo/src/modules/app/app.config.ts
@@ -22,7 +22,7 @@ import {
     type TuiDocSourceCodePathOptions,
     tuiSortPages,
 } from '@taiga-ui/addon-doc';
-import {TUI_BASE_HREF, TUI_IS_E2E, TUI_IS_PLAYWRIGHT} from '@taiga-ui/cdk';
+import {TUI_BASE_HREF, TUI_IS_E2E, TUI_IS_PLAYWRIGHT, TUI_PLATFORM} from '@taiga-ui/cdk';
 import {
     TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS,
     TUI_DROPDOWN_HOVER_OPTIONS,
@@ -57,6 +57,10 @@ export const config: ApplicationConfig = {
         ),
         NG_EVENT_PLUGINS,
         Title,
+        {
+            provide: TUI_PLATFORM,
+            useValue: 'web',
+        },
         {
             provide: TUI_IS_PLAYWRIGHT,
             useFactory: () => Boolean(inject(SESSION_STORAGE).getItem('playwright')),

diff --git a/projects/demo/src/modules/components/card-large/examples/1/index.ts b/projects/demo/src/modules/components/card-large/examples/1/index.ts
@@ -2,12 +2,20 @@ import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiPlatform} from '@taiga-ui/cdk';
-import {TuiButton, TuiLink, TuiSurface} from '@taiga-ui/core';
+import {TuiButton, TuiLink, TuiSurface, TuiTitle} from '@taiga-ui/core';
 import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
 
 @Component({
     standalone: true,
-    imports: [TuiCardLarge, TuiSurface, TuiButton, TuiLink, TuiPlatform, TuiHeader],
+    imports: [
+        TuiCardLarge,
+        TuiSurface,
+        TuiButton,
+        TuiLink,
+        TuiPlatform,
+        TuiHeader,
+        TuiTitle,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,