fix(legacy): fix icons looking interactive in readonly textfields (#9711

)

Co-authored-by: taiga-family-bot <[email protected]>

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);
     });

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);
     });

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,

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,

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"

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

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;
-}

projects/legacy/components/input-tag/input-tag.style.less

@@ -279,3 +279,16 @@
     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);
+    }
+}

projects/legacy/components/primitive-textfield/primitive-textfield.style.less

@@ -65,3 +65,16 @@
     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);
+    }
+}

projects/legacy/components/textarea/textarea.style.less

@@ -310,3 +310,16 @@
     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);
+    }
+}