Merge branch 'main' into feature/3417-dropdown-hint-direction-change

taiga-family · Nov 8, 2024 · 959fd4d · 959fd4d
2 parents 4175691 + 44290e8
commit 959fd4d
Show file tree

Hide file tree

Showing 17 changed files with 128 additions and 29 deletions.
diff --git a/projects/addon-table/components/table/td/td.style.less b/projects/addon-table/components/table/td/td.style.less
@@ -7,9 +7,11 @@
     border: 1px solid var(--tui-border-normal);
     border-block-start: none;
     box-sizing: border-box;
+    // TODO: Remove in v5 after we drop all legacy controls
     // Create new viewport for fixed positioning
     filter: opacity(1);
 
+    // TODO: Remove in v5 after we drop all legacy controls
     .safari-only({
         transform: translate3d(0, 0, 0);
     });

diff --git a/projects/addon-table/components/table/th/th.style.less b/projects/addon-table/components/table/th/th.style.less
@@ -16,9 +16,11 @@
     box-sizing: border-box;
     box-shadow: 0 0.3125rem rgba(237, 237, 237, 0);
     border: 1px solid var(--tui-border-normal);
+    // TODO: Remove in v5 after we drop all legacy controls
     // Create new viewport for fixed positioning
     filter: opacity(1);
 
+    // TODO: Remove in v5 after we drop all legacy controls
     .safari-only({
         transform: translate3d(0, 0, 0);
     });

diff --git a/projects/cdk/date-time/day.ts b/projects/cdk/date-time/day.ts
@@ -14,6 +14,11 @@ import {TuiYear} from './year';
  * Immutable date object, consisting of day, month and year
  */
 export class TuiDay extends TuiMonth {
+    /**
+     * @param year
+     * @param month (starting with 0)
+     * @param day
+     */
     constructor(
         year: number,
         month: number,

diff --git a/projects/core/components/textfield/textfield.component.ts b/projects/core/components/textfield/textfield.component.ts
@@ -21,7 +21,7 @@ import type {TuiContext, TuiStringHandler} from '@taiga-ui/cdk/types';
 import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
 import {tuiFocusedIn} from '@taiga-ui/cdk/utils/focus';
 import {tuiPx} from '@taiga-ui/cdk/utils/miscellaneous';
-import {TuiButton} from '@taiga-ui/core/components/button';
+import {TuiButton, tuiButtonOptionsProvider} from '@taiga-ui/core/components/button';
 import type {TuiDataListHost} from '@taiga-ui/core/components/data-list';
 import {tuiAsDataListHost} from '@taiga-ui/core/components/data-list';
 import {TuiLabel} from '@taiga-ui/core/components/label';
@@ -49,7 +49,10 @@ import {TuiWithTextfieldDropdown} from './textfield-dropdown.directive';
     styles: ['@import "@taiga-ui/core/styles/components/textfield.less";'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [tuiAsDataListHost(TuiTextfieldComponent)],
+    providers: [
+        tuiButtonOptionsProvider({size: 'xs', appearance: 'icon'}),
+        tuiAsDataListHost(TuiTextfieldComponent),
+    ],
     hostDirectives: [
         TuiDropdownFixed,
         TuiDropdownDirective,

diff --git a/projects/demo-playwright/tests/kit/action-bar/action-bar.pw.spec.ts b/projects/demo-playwright/tests/kit/action-bar/action-bar.pw.spec.ts
@@ -17,4 +17,15 @@ test.describe('ActionBar', () => {
 
         await expect(actionBarExample).toHaveScreenshot('01-actions-bar.png');
     });
+
+    test('should show on top', async ({page}) => {
+        await tuiGoto(page, DemoRoute.ActionBar);
+        const example = page.locator('#top-position');
+        const showActionBarButton = example.getByTestId('open-table-bar-on-top').first();
+
+        await showActionBarButton.click();
+        const actionBarExample = page.locator('tui-action-bar');
+
+        await expect(actionBarExample).toHaveScreenshot('02-actions-bar.png');
+    });
 });
diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
@@ -341,6 +341,7 @@ export const pages: DocRoutePages = [
         keywords:
             'попап, модал, popup, dialog, диалог, modal, окно, шторка, overlay, sidebar, сайдбар',
         route: DemoRoute.Drawer,
+        meta: {scheme: 'beaver', name: 'drawer'},
     },
     {
         section: 'Components',
@@ -897,6 +898,10 @@ export const pages: DocRoutePages = [
                 title: 'Table',
                 keywords: 'таблица, data, cell, tr, th, td, row, col, grid, beaver',
                 route: DemoRoute.Table,
+                meta: [
+                    {scheme: 'beaver', anchor: 'custom', name: 'table'},
+                    {scheme: 'beaver', anchor: 'footer', name: 'pagination'},
+                ],
             },
         ],
     },
@@ -937,7 +942,11 @@ export const pages: DocRoutePages = [
         title: 'Cell',
         keywords: 'cell, feed, item',
         route: DemoRoute.Cell,
-        meta: [{name: 'tui-cell'}, {name: 'tui-cell-connected'}],
+        meta: [
+            {name: 'tui-cell'},
+            {name: 'tui-cell-connected'},
+            {name: 'list-item', scheme: 'beaver'},
+        ],
     },
     {
         section: 'Components',
@@ -1019,12 +1028,14 @@ export const pages: DocRoutePages = [
         title: 'Navigation',
         keywords: 'шапка, header, sidebar, aside, сайдбар, навигация, beaver',
         route: DemoRoute.Navigation,
+        meta: {scheme: 'beaver', name: 'navigation'},
     },
     {
         section: 'Layout',
         title: 'Search',
         keywords: 'шапка, header, filter, table, beaver, поиск, фильтр, таблица',
         route: DemoRoute.Search,
+        meta: {scheme: 'beaver', name: 'filters'},
     },
     // Charts
     {
@@ -1102,6 +1113,7 @@ export const pages: DocRoutePages = [
         title: 'Breadcrumbs',
         keywords: 'шаги, навигация, nav, хлебные, крошки, breadcrumbs',
         route: DemoRoute.Breadcrumbs,
+        meta: {scheme: 'beaver', name: 'breadcrumbs'},
     },
     {
         section: 'Navigation',

diff --git a/projects/demo/src/modules/components/action-bar/examples/3/index.html b/projects/demo/src/modules/components/action-bar/examples/3/index.html
@@ -0,0 +1,20 @@
+<button
+    automation-id="open-table-bar-on-top"
+    tuiButton
+    type="button"
+    (click)="open.set(true)"
+>
+    Show TableBar on top
+</button>
+
+<tui-action-bar *tuiActionBar="open()">
+    <span>Table bar on top opened</span>
+    <button
+        iconStart="@tui.trash"
+        tuiIconButton
+        type="button"
+        (click)="open.set(false)"
+    >
+        Close
+    </button>
+</tui-action-bar>
diff --git a/projects/demo/src/modules/components/action-bar/examples/3/index.less b/projects/demo/src/modules/components/action-bar/examples/3/index.less
@@ -0,0 +1,4 @@
+tui-action-bar {
+    top: 1rem;
+    bottom: unset;
+}
diff --git a/projects/demo/src/modules/components/action-bar/examples/3/index.ts b/projects/demo/src/modules/components/action-bar/examples/3/index.ts
@@ -0,0 +1,24 @@
+import {NgIf} from '@angular/common';
+import {Component, inject, signal} from '@angular/core';
+import {toSignal} from '@angular/core/rxjs-interop';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiBreakpointService, TuiButton} from '@taiga-ui/core';
+import {TuiActionBar} from '@taiga-ui/kit';
+import {map} from 'rxjs';
+
+@Component({
+    standalone: true,
+    imports: [NgIf, TuiActionBar, TuiButton],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected open = signal(false);
+
+    protected readonly isMobile = toSignal(
+        inject(TuiBreakpointService).pipe(map((size) => size === 'mobile')),
+    );
+}
diff --git a/projects/demo/src/modules/components/action-bar/index.ts b/projects/demo/src/modules/components/action-bar/index.ts
@@ -10,5 +10,5 @@ import {TuiDemo} from '@demo/utils';
     changeDetection,
 })
 export default class Page {
-    protected readonly examples = ['Size M', 'Size S'];
+    protected readonly examples = ['Size M', 'Size S', 'Top position'];
 }
diff --git a/projects/demo/src/modules/components/textfield/examples/5/index.html b/projects/demo/src/modules/components/textfield/examples/5/index.html
@@ -11,9 +11,7 @@
 
     <button
         *ngIf="value"
-        appearance="icon"
         iconStart="@tui.x"
-        size="xs"
         tabindex="-1"
         tuiIconButton
         type="button"

diff --git a/projects/demo/src/modules/components/textfield/examples/6/index.html b/projects/demo/src/modules/components/textfield/examples/6/index.html
@@ -1,30 +1,27 @@
-<fieldset [disabled]="disable()">
+<fieldset
+    tuiTextfieldSize="s"
+    [disabled]="disable()"
+>
     <legend>Payment fieldset</legend>
 
-    <tui-textfield
-        iconStart="@tui.credit-card"
-        tuiTextfieldSize="s"
-    >
-        <label tuiLabel>Card number</label>
+    <tui-textfield iconStart="@tui.credit-card">
         <input
+            placeholder="Card number"
             tuiTextfield
             [(ngModel)]="card"
         />
     </tui-textfield>
 
-    <tui-textfield
-        iconStart="@tui.user"
-        tuiTextfieldSize="s"
-    >
-        <label tuiLabel>Card holder</label>
+    <tui-textfield iconStart="@tui.user">
         <input
+            placeholder="Card holder"
             tuiTextfield
             [(ngModel)]="name"
         />
     </tui-textfield>
 </fieldset>
 
-<label class="t-label">
+<label tuiLabel>
     <input
         size="s"
         tuiSwitch

diff --git a/projects/demo/src/modules/components/textfield/examples/6/index.less b/projects/demo/src/modules/components/textfield/examples/6/index.less
@@ -3,12 +3,3 @@ fieldset {
     flex-direction: column;
     gap: 1rem;
 }
-
-.t-label {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    margin-top: 0.25rem;
-    inline-size: fit-content;
-    cursor: pointer;
-}
diff --git a/projects/layout/components/app-bar/app-bar-back.component.ts b/projects/layout/components/app-bar/app-bar-back.component.ts
@@ -2,8 +2,8 @@ import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {TuiIcon} from '@taiga-ui/core/components/icon';
 import type {TuiAppearanceOptions} from '@taiga-ui/core/directives/appearance';
 import {
-    TuiAppearance,
     tuiAppearanceOptionsProvider,
+    TuiWithAppearance,
 } from '@taiga-ui/core/directives/appearance';
 import {TUI_SPIN_ICONS} from '@taiga-ui/core/tokens';
 
@@ -15,7 +15,7 @@ import {TUI_SPIN_ICONS} from '@taiga-ui/core/tokens';
     styleUrls: ['./app-bar-back.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [tuiAppearanceOptionsProvider(TuiAppBarBack)],
-    hostDirectives: [TuiAppearance],
+    hostDirectives: [TuiWithAppearance],
 })
 export class TuiAppBarBack implements TuiAppearanceOptions {
     protected readonly icons = inject(TUI_SPIN_ICONS);

diff --git a/projects/legacy/components/input-tag/input-tag.style.less b/projects/legacy/components/input-tag/input-tag.style.less
@@ -279,3 +279,13 @@
     color: var(--tui-status-negative);
     font-size: 1rem;
 }
+
+:host._readonly .t-textfield-icon ::ng-deep [tuiAppearance][data-appearance='icon'] {
+    pointer-events: none;
+}
+
+@media @tui-mouse {
+    :host:not(._readonly):not(._disabled):hover .t-textfield-icon ::ng-deep [tuiAppearance][data-appearance='icon']::after {
+        color: var(--tui-text-secondary);
+    }
+}
diff --git a/projects/legacy/components/primitive-textfield/primitive-textfield.style.less b/projects/legacy/components/primitive-textfield/primitive-textfield.style.less
@@ -65,3 +65,13 @@
     position: relative;
     pointer-events: none;
 }
+
+:host._readonly .t-textfield-icon ::ng-deep [tuiAppearance][data-appearance='icon'] {
+    pointer-events: none;
+}
+
+@media @tui-mouse {
+    :host:not(._readonly):not(._disabled):hover .t-textfield-icon ::ng-deep [tuiAppearance][data-appearance='icon']::after {
+        color: var(--tui-text-secondary);
+    }
+}
diff --git a/projects/legacy/components/textarea/textarea.style.less b/projects/legacy/components/textarea/textarea.style.less
@@ -310,3 +310,13 @@
     text-align: end;
     color: var(--tui-text-tertiary);
 }
+
+:host._readonly .t-textfield-icon ::ng-deep [tuiAppearance][data-appearance='icon'] {
+    pointer-events: none;
+}
+
+@media @tui-mouse {
+    :host:not(._readonly):not(._disabled):hover .t-textfield-icon ::ng-deep [tuiAppearance][data-appearance='icon']::after {
+        color: var(--tui-text-secondary);
+    }
+}