@taiga-ui/core 3.37.0 → 3.38.0

package/styles/mixins/textfield.less

@@ -1,11 +1,9 @@
-@line-height-l: 1.25rem;
-
 .textfield-host() {
     .text-basic();
     position: relative;
     display: block;
-    border-radius: var(--tui-radius-m);
     text-align: left;
+    border-radius: var(--tui-radius-m);
     height: var(--tui-height);
     min-height: var(--tui-height);
     max-height: var(--tui-height);
@@ -21,7 +19,7 @@
     &[data-size='l'] {
         --tui-height: var(--tui-height-l);
         font: var(--tui-font-text-m);
-        line-height: @line-height-l;
+        line-height: 1.25rem;
     }
 }
 
@@ -29,7 +27,6 @@
     display: flex;
     height: 100%;
     width: 100%;
-    padding: 0 var(--tui-padding-m);
     box-sizing: border-box;
     align-items: center;
     overflow: hidden;
@@ -38,17 +35,12 @@
         padding: 0 var(--tui-padding-s);
     }
 
-    :host[data-size='l'] & {
-        padding: 0 var(--tui-padding-l);
-    }
-
-    &:after {
-        content: '';
-        margin-right: -0.25rem;
+    :host[data-size='m'] & {
+        padding: 0 var(--tui-padding-m);
     }
 
-    :host[data-size='m'] &:after {
-        display: none;
+    :host[data-size='l'] & {
+        padding: 0 var(--tui-padding-l);
     }
 }
 
@@ -56,9 +48,7 @@
     .text-basic();
     .clearinput();
     .fullsize();
-    padding: 0 var(--tui-padding-m);
     border: solid transparent;
-    border-width: 0 var(--border-end, 0) 0 var(--border-start, 0);
     border-inline-start-width: var(--border-start, 0);
     border-inline-end-width: var(--border-end, 0);
     text-indent: var(--text-indent);
@@ -114,6 +104,12 @@
         padding: 0 var(--tui-padding-s);
     }
 
+    :host[data-size='m'] &,
+    :host-context(tui-primitive-textfield[data-size='m']):not(tui-primitive-textfield),
+    :host-context(tui-text-area[data-size='m']):not(tui-text-area) {
+        padding: 0 var(--tui-padding-m);
+    }
+
     :host[data-size='l'] &,
     :host-context(tui-primitive-textfield[data-size='l']):not(tui-primitive-textfield),
     :host-context(tui-text-area[data-size='l']):not(tui-text-area) {
@@ -129,7 +125,7 @@
 
     :host[data-size='l']:not(._label-outside) &,
     :host-context(tui-primitive-textfield[data-size='l']:not(._label-outside)):not(tui-primitive-textfield) {
-        padding-top: @line-height-l;
+        padding-top: 1.25rem;
 
         // Workaround for raising placeholder in temporary autofill
         &:-webkit-autofill + .t-content .t-placeholder {
@@ -160,15 +156,10 @@
 .textfield-wrapper() {
     flex: 1;
     min-width: 0;
-    padding-right: 0.25rem;
     padding-inline-end: 0.25rem;
-    padding-inline-start: 0;
-
-    & + * {
-        margin: 0;
-    }
 }
 
+// TODO: Rename to label in 4.0
 .textfield-placeholder() {
     .transition(~'transform, font-size, color, letter-spacing');
     .text-overflow();
@@ -253,17 +244,33 @@
     display: flex;
     width: 1.5rem;
     height: 1.5rem;
-    margin: 0 0 0 0.25rem;
-    margin-inline-start: 0.25rem;
-    margin-inline-end: 0;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
     cursor: pointer;
+    pointer-events: none;
+}
+
+.input-icons() {
+    display: flex;
+    align-items: center;
+
+    :host[data-size='m'] & {
+        margin-inline-end: -0.125rem;
+    }
+
+    :host[data-size='s'] & {
+        margin-inline-end: -0.375rem;
+    }
+
+    :host:not([data-size='s']) & > :not(:first-child) {
+        margin-inline-start: 0.25rem;
+    }
 }
 
 .icon-button() {
     .input-icon();
+    pointer-events: auto;
 
     :host._readonly &,
     :host._disabled & {
@@ -296,21 +303,26 @@
         .icon-button();
     }
 
-    // @bad TODO: Refactor this and interactive icons together
     .t-icon {
         .input-icon();
-        pointer-events: none;
 
         &_left {
-            margin: 0 0.375rem 0 -0.25rem;
-            margin-inline-start: -0.25rem;
-            margin-inline-end: 0.375rem;
+            :host[data-size='s'] & {
+                margin-inline-start: -0.375rem;
+            }
+
+            :host[data-size='m'] & {
+                margin-inline-start: -0.125rem;
+                margin-inline-end: 0.375rem;
+            }
 
             :host[data-size='l'] & {
-                margin: 0 0.5rem 0 -0.25rem;
-                margin-inline-start: -0.25rem;
-                margin-inline-end: 0.5rem;
+                margin-inline-end: 0.75rem;
             }
         }
     }
+
+    .t-icons {
+        .input-icons();
+    }
 }

package/styles/mixins/textfield.scss

@@ -4,8 +4,8 @@ $line-height-l: 1.25rem;
     @include text-basic();
     position: relative;
     display: block;
-    border-radius: var(--tui-radius-m);
     text-align: left;
+    border-radius: var(--tui-radius-m);
     height: var(--tui-height);
     min-height: var(--tui-height);
     max-height: var(--tui-height);
@@ -20,9 +20,8 @@ $line-height-l: 1.25rem;
 
     &[data-size='l'] {
         --tui-height: var(--tui-height-l);
-
         font: var(--tui-font-text-m);
-        line-height: $line-height-l;
+        line-height: 1.25rem;
     }
 }
 
@@ -30,7 +29,6 @@ $line-height-l: 1.25rem;
     display: flex;
     height: 100%;
     width: 100%;
-    padding: 0 var(--tui-padding-m);
     box-sizing: border-box;
     align-items: center;
     overflow: hidden;
@@ -39,17 +37,12 @@ $line-height-l: 1.25rem;
         padding: 0 var(--tui-padding-s);
     }
 
-    :host[data-size='l'] & {
-        padding: 0 var(--tui-padding-l);
-    }
-
-    &:after {
-        content: '';
-        margin-right: -0.25rem;
+    :host[data-size='m'] & {
+        padding: 0 var(--tui-padding-m);
     }
 
-    :host[data-size='m'] &:after {
-        display: none;
+    :host[data-size='l'] & {
+        padding: 0 var(--tui-padding-l);
     }
 }
 
@@ -57,9 +50,7 @@ $line-height-l: 1.25rem;
     @include text-basic();
     @include clearinput();
     @include fullsize();
-    padding: 0 var(--tui-padding-m);
     border: solid transparent;
-    border-width: 0 var(--border-end, 0) 0 var(--border-start, 0);
     border-inline-start-width: var(--border-start, 0);
     border-inline-end-width: var(--border-end, 0);
     text-indent: var(--text-indent);
@@ -69,11 +60,44 @@ $line-height-l: 1.25rem;
     overflow: hidden;
     text-transform: inherit;
     resize: none;
-    text-overflow: ellipsis;
+
+    /* stylelint-disable */
+    /* Safari autofill icons */
+    //noinspection CssInvalidPseudoSelector
+    &:-webkit-autofill,
+    &:-webkit-autofill::first-line {
+        font-size: inherit;
+        line-height: inherit;
+    }
+    /* stylelint-enable */
+
+    //noinspection ALL
+    &::-webkit-caps-lock-indicator,
+    &::-webkit-contacts-auto-fill-button,
+    &::-webkit-credit-card-auto-fill-button,
+    &::-webkit-credentials-auto-fill-button,
+    &::-webkit-strong-password-auto-fill-button {
+        @include webkit-auto-fill-button-hidden();
+    }
+
+    &::placeholder {
+        color: var(--tui-text-03);
+        opacity: 0;
+    }
+
+    :host._focused:not(._readonly) &::placeholder,
+    :host-context(tui-primitive-textfield._focused:not(._readonly)) &::placeholder,
+    :host-context(tui-text-area._focused:not(._readonly)) &::placeholder {
+        opacity: 1;
+    }
 
     [tuiWrapper][data-mode='onDark'] &,
     :host-context([tuiWrapper][data-mode='onDark']) {
         @include autofill(dark);
+
+        &::placeholder {
+            color: var(--tui-text-03-night);
+        }
     }
 
     :host[data-size='s'] &,
@@ -82,6 +106,12 @@ $line-height-l: 1.25rem;
         padding: 0 var(--tui-padding-s);
     }
 
+    :host[data-size='m'] &,
+    :host-context(tui-primitive-textfield[data-size='m']):not(tui-primitive-textfield),
+    :host-context(tui-text-area[data-size='m']):not(tui-text-area) {
+        padding: 0 var(--tui-padding-m);
+    }
+
     :host[data-size='l'] &,
     :host-context(tui-primitive-textfield[data-size='l']):not(tui-primitive-textfield),
     :host-context(tui-text-area[data-size='l']):not(tui-text-area) {
@@ -91,13 +121,13 @@ $line-height-l: 1.25rem;
     :host._disabled &,
     :host-context(tui-primitive-textfield._disabled),
     :host-context(tui-text-area._disabled) {
-        // $bad TODO: research why you can reach disabled textfield with mask inside a label without that
+        // @bad TODO: research why you can reach disabled textfield with mask inside a label without that
         pointer-events: none;
     }
 
     :host[data-size='l']:not(._label-outside) &,
     :host-context(tui-primitive-textfield[data-size='l']:not(._label-outside)):not(tui-primitive-textfield) {
-        padding-top: $line-height-l;
+        padding-top: 1.25rem;
 
         // Workaround for raising placeholder in temporary autofill
         &:-webkit-autofill + .t-content .t-placeholder {
@@ -128,22 +158,17 @@ $line-height-l: 1.25rem;
 @mixin textfield-wrapper() {
     flex: 1;
     min-width: 0;
-    padding-right: 0.25rem;
     padding-inline-end: 0.25rem;
-    padding-inline-start: 0;
-
-    & + * {
-        margin: 0;
-    }
 }
 
+// TODO: Rename to label in 4.0
 @mixin textfield-placeholder() {
     @include transition('transform, font-size, color, letter-spacing');
-    @include text-basic();
     @include text-overflow();
     display: block;
     width: 100%;
     user-select: none;
+    font: var(--tui-font-text-s);
     color: var(--tui-text-02);
     pointer-events: none;
     will-change: transform;
@@ -177,7 +202,8 @@ $line-height-l: 1.25rem;
     }
 
     :host[data-size='l'] & {
-        font-size: 0.9375rem;
+        font: var(--tui-font-text-m);
+        line-height: 1.25rem;
 
         &_raised {
             font-size: 0.8156rem;
@@ -220,17 +246,33 @@ $line-height-l: 1.25rem;
     display: flex;
     width: 1.5rem;
     height: 1.5rem;
-    margin: 0 0 0 0.25rem;
-    margin-inline-start: 0.25rem;
-    margin-inline-end: 0;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
     cursor: pointer;
+    pointer-events: none;
+}
+
+@mixin input-icons() {
+    display: flex;
+    align-items: center;
+
+    :host[data-size='m'] & {
+        margin-inline-end: -0.125rem;
+    }
+
+    :host[data-size='s'] & {
+        margin-inline-end: -0.375rem;
+    }
+
+    :host:not([data-size='s']) & > :not(:first-child) {
+        margin-inline-start: 0.25rem;
+    }
 }
 
 @mixin icon-button() {
     @include input-icon();
+    pointer-events: auto;
 
     :host._readonly &,
     :host._disabled & {
@@ -263,19 +305,26 @@ $line-height-l: 1.25rem;
         @include icon-button();
     }
 
-    // $bad TODO: Refactor this and interactive icons together
     .t-icon {
         @include input-icon();
 
         &_left {
-            margin: 0 2 * $space 0 -$space;
-            margin-inline-start: -$space;
-            margin-inline-end: 2 * $space;
-
             :host[data-size='s'] & {
-                margin-right: $space;
-                margin-inline-end: $space;
+                margin-inline-start: -0.375rem;
+            }
+
+            :host[data-size='m'] & {
+                margin-inline-start: -0.125rem;
+                margin-inline-end: 0.375rem;
+            }
+
+            :host[data-size='l'] & {
+                margin-inline-end: 0.75rem;
             }
         }
     }
+
+    .t-icons {
+        @include input-icons();
+    }
 }

package/tokens/notification-options.d.ts

@@ -1,8 +1,16 @@
 import { Provider } from '@angular/core';
 import { TuiAlertOptions } from '@taiga-ui/core/interfaces';
+import { TuiSizeL, TuiSizeS } from '@taiga-ui/core/types';
 export interface TuiNotificationDefaultOptions extends Omit<TuiAlertOptions<unknown>, 'data'> {
-    readonly defaultAutoCloseTime: number;
+    size: TuiSizeL | TuiSizeS;
 }
+/** @deprecated remove export */
+export declare const STATUS_ICON: {
+    readonly info: "tuiIconInfo";
+    readonly success: "tuiIconCheckCircle";
+    readonly error: "tuiIconXCircle";
+    readonly warning: "tuiIconAlertCircle";
+};
 /** Default values for the notification options. */
 export declare const TUI_NOTIFICATION_DEFAULT_OPTIONS: TuiNotificationDefaultOptions;
 /**

package/types/index.d.ts

@@ -8,6 +8,7 @@ export * from './dropdown-align';
 export * from './dropdown-width';
 export * from './hint-direction';
 export * from './marker-handler';
+export * from './notification';
 export * from './option-role';
 export * from './orientation';
 export * from './point';

package/types/notification.d.ts

@@ -0,0 +1 @@
+export declare type TuiNotificationT = 'error' | 'info' | 'success' | 'warning';

package/utils/miscellaneous/get-border.d.ts

@@ -1 +1,2 @@
-export declare function tuiGetBorder(hasIcon: boolean, hasCleaner?: boolean, hasTooltip?: boolean, hasContent?: boolean): number;
+import { TuiSizeL, TuiSizeS } from '@taiga-ui/core/types';
+export declare function tuiGetBorder(hasIcon: boolean, hasCleaner?: boolean, hasTooltip?: boolean, hasContent?: boolean, size?: TuiSizeL | TuiSizeS): number;