feat(kit): TextArea enable icons (#4512)

taiga-family · May 22, 2023 · c6f6a7e · c6f6a7e
1 parent 442ba8d
commit c6f6a7e
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 42 deletions.
diff --git a/projects/core/styles/mixins/textfield.less b/projects/core/styles/mixins/textfield.less
@@ -110,7 +110,7 @@
 
     :host[data-size='m']:not(._label-outside) &,
     :host-context(tui-primitive-textfield[data-size='m']:not(._label-outside)):not(tui-primitive-textfield) {
-        padding-top: 1.125rem;
+        padding-top: 1rem;
 
         // Workaround for raising placeholder in temporary autofill
         &:-webkit-autofill + .t-content .t-placeholder {
@@ -156,6 +156,7 @@
 
         :host[data-size='m'] & {
             font: var(--tui-font-text-xs);
+            line-height: 1.25rem;
             transform: translateY(-0.5rem);
             letter-spacing: 0.025rem;
         }

diff --git a/projects/demo/src/modules/components/input/input.template.html b/projects/demo/src/modules/components/input/input.template.html
@@ -276,13 +276,7 @@
                 [documentationPropertyValues]="iconVariants"
                 [(documentationPropertyValue)]="icon"
             >
-                Icon content. If content is a string, it is used as stringified svg or a name of icon registered in
-                <a
-                    tuiLink
-                    routerLink="/services/svg-service"
-                >
-                    <code>SvgService</code>
-                </a>
+                Icon content. If content is a string, it is used as stringified svg or a name of an icon
             </ng-template>
             <ng-template
                 documentationPropertyName="placeholder"

diff --git a/projects/demo/src/modules/components/text-area/text-area.component.ts b/projects/demo/src/modules/components/text-area/text-area.component.ts
@@ -67,6 +67,10 @@ export class ExampleTuiTextAreaComponent extends AbstractExampleTuiControl {
 
     override maxLength: number | null = null;
 
+    readonly iconVariants = ['', 'tuiIconSearchLarge', 'tuiIconCalendarLarge'];
+
+    icon = this.iconVariants[0];
+
     readonly rowsVariants: readonly number[] = [8, 15, 30];
 
     rows: number = this.rowsVariants[0];

diff --git a/projects/demo/src/modules/components/text-area/text-area.template.html b/projects/demo/src/modules/components/text-area/text-area.template.html
@@ -71,6 +71,9 @@
                 [tuiTextfieldCleaner]="cleaner"
                 [tuiTextfieldLabelOutside]="labelOutside"
                 [tuiTextfieldSize]="size"
+                [tuiTextfieldIcon]="icon"
+                [tuiTextfieldIconLeft]="iconLeft"
+                [tuiTextfieldCustomContent]="customContent"
                 [maxLength]="maxLength"
                 [expandable]="expandable"
                 [pseudoInvalid]="pseudoInvalid"
@@ -128,6 +131,15 @@
                 <code>expandable</code>
                 mode
             </ng-template>
+            <ng-template
+                documentationPropertyName="tuiTextfieldIcon"
+                documentationPropertyMode="input"
+                documentationPropertyType="PolymorpheusContent"
+                [documentationPropertyValues]="iconVariants"
+                [(documentationPropertyValue)]="icon"
+            >
+                Icon content. If content is a string, it is used as stringified svg or a name of an icon
+            </ng-template>
         </tui-doc-documentation>
         <inherited-documentation></inherited-documentation>
     </ng-template>

diff --git a/projects/kit/components/text-area/text-area.component.ts b/projects/kit/components/text-area/text-area.component.ts
@@ -127,9 +127,19 @@ export class TuiTextAreaComponent
         return this.controller.size;
     }
 
+    @HostBinding('style.--border-start.rem')
+    get borderStart(): number {
+        return this.iconLeftContent ? 1.75 : 0;
+    }
+
     @HostBinding('style.--border-end.rem')
-    get border(): number {
-        return tuiGetBorder(false, this.hasCleaner, this.hasTooltip);
+    get borderEnd(): number {
+        return tuiGetBorder(
+            !!this.iconContent,
+            this.hasCleaner,
+            this.hasTooltip,
+            this.hasCustomContent,
+        );
     }
 
     get hasCleaner(): boolean {
@@ -138,7 +148,10 @@ export class TuiTextAreaComponent
 
     @HostBinding('class._has-tooltip')
     get hasTooltip(): boolean {
-        return !!this.hintOptions?.content && !this.computedDisabled;
+        return (
+            !!this.hintOptions?.content &&
+            (this.controller.options.hintOnDisabled || !this.computedDisabled)
+        );
     }
 
     @HostBinding('class._has-value')
@@ -155,6 +168,20 @@ export class TuiTextAreaComponent
         return this.placeholderRaisable || (!this.hasValue && !this.hasExampleText);
     }
 
+    get hasCustomContent(): boolean {
+        return !!this.controller.customContent;
+    }
+
+    get iconLeftContent(): PolymorpheusContent<
+        TuiContextWithImplicit<TuiSizeL | TuiSizeS>
+    > {
+        return this.controller.iconLeft;
+    }
+
+    get iconContent(): PolymorpheusContent<TuiContextWithImplicit<TuiSizeL | TuiSizeS>> {
+        return this.controller.icon;
+    }
+
     get iconCleaner(): PolymorpheusContent<TuiContextWithImplicit<TuiSizeL | TuiSizeS>> {
         return this.controller.options.iconCleaner;
     }
@@ -187,13 +214,6 @@ export class TuiTextAreaComponent
         return this.value.slice(this.maxLength || Infinity);
     }
 
-    get showHint(): boolean {
-        return (
-            !!this.hintOptions?.content &&
-            (this.controller.options.hintOnDisabled || !this.computedDisabled)
-        );
-    }
-
     @HostListener('focusin', ['true'])
     @HostListener('focusout', ['false'])
     onFocused(focused: boolean): void {

diff --git a/projects/kit/components/text-area/text-area.style.less b/projects/kit/components/text-area/text-area.style.less
@@ -7,9 +7,8 @@
     position: relative;
     z-index: 0;
     display: flex;
-    font: var(--tui-font-text-m);
     flex-direction: column;
-    min-height: var(--tui-textarea-height, @height);
+    min-height: var(--tui-textarea-height);
     border-radius: var(--tui-radius-m);
     color: var(--tui-text-01);
 
@@ -18,15 +17,23 @@
     }
 
     &[data-size='s'] {
+        --tui-height: var(--tui-height-s);
         --tui-textarea-height: 4.5625rem;
         font: var(--tui-font-text-s);
     }
 
     &[data-size='m'] {
+        --tui-height: var(--tui-height-m);
         --tui-textarea-height: 5.5rem;
         font: var(--tui-font-text-s);
     }
 
+    &[data-size='l'] {
+        --tui-height: var(--tui-height-l);
+        --tui-textarea-height: @height;
+        font: var(--tui-font-text-m);
+    }
+
     &[data-size='m']._has-counter {
         --tui-textarea-height: 6.625rem;
     }
@@ -73,27 +80,19 @@
     width: 100%;
     height: 100%;
     min-height: inherit;
-    padding-bottom: 0.4375rem;
     box-sizing: border-box;
-
-    :host[data-size='s'] & {
-        padding-top: 0.375rem;
-    }
-
-    :host[data-size='m']._label-outside & {
-        padding-top: 0.75rem;
-    }
+    padding: calc((var(--tui-height) - 1.25rem) / 2) 0;
 
     :host[data-size='l']._label-outside & {
-        padding-top: 1rem;
+        padding: calc((var(--tui-height) - 1.5rem) / 2) 0;
     }
 
     :host[data-size='m']:not(._label-outside) & {
-        padding-top: 1.25rem;
+        padding: calc((var(--tui-height) - 2.25rem) / 2) 0;
     }
 
     :host[data-size='l']:not(._label-outside) & {
-        padding-top: 1.625rem;
+        padding: calc((var(--tui-height) - 2.625rem) / 2) 0;
     }
 }
 
@@ -118,16 +117,25 @@
 
 .t-box {
     display: flex;
-    min-height: 100%;
+    min-height: calc(100% - 1rem);
     width: 100%;
 
     :host:not(._expandable) & {
-        height: 100%;
+        height: calc(100% - 1rem);
     }
 
     :host._has-counter._expandable & {
         margin-bottom: 1.25rem;
     }
+
+    // For placeholder
+    :host[data-size='m']:not(._label-outside) & {
+        border-top: 1rem solid transparent;
+    }
+
+    :host[data-size='l']:not(._label-outside) & {
+        border-top: 1.25rem solid transparent;
+    }
 }
 
 .t-pseudo-content {
@@ -141,6 +149,7 @@
     border-inline-start-width: var(--border-start, 0);
     border-inline-end-width: var(--border-end, 0);
 
+    :host[data-size='s'] &,
     :host[data-size='m'] & {
         padding: 0 0.75rem;
     }
@@ -187,6 +196,7 @@
         opacity: 1;
     }
 
+    :host[data-size='s'] &,
     :host[data-size='m'] & {
         padding: 0 0.75rem;
     }
@@ -210,27 +220,25 @@
 .t-placeholder {
     .textfield-placeholder();
     position: absolute;
+    top: calc(var(--tui-height) / 2 - 0.625rem);
     left: 0;
     max-width: 100%;
-    padding: 0 1rem;
     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);
     box-sizing: border-box;
 
     :host[data-size='s'] & {
-        top: 0.375rem;
         padding: 0 0.75rem;
     }
 
     :host[data-size='m'] & {
-        top: 0.75rem;
         padding: 0 0.75rem;
     }
 
     :host[data-size='l'] & {
-        top: 1.12rem;
+        padding: 0 1rem;
     }
 
     :host._label-outside & {
@@ -245,10 +253,16 @@
     display: flex;
     justify-content: flex-end;
     pointer-events: none;
-    padding: 1rem 0.75rem;
+    padding: calc((var(--tui-height) - 1.5rem) / 2) 0.75rem;
+}
 
-    :host[data-size='m'] & {
-        padding: 0.75rem;
+.t-icon {
+    .input-icon();
+
+    &_left {
+        margin: 0 auto 0 0;
+        margin-inline-start: 0;
+        margin-inline-end: auto;
     }
 }
 

diff --git a/projects/kit/components/text-area/text-area.template.html b/projects/kit/components/text-area/text-area.template.html
@@ -65,6 +65,23 @@
             </tui-scrollbar>
         </div>
         <div class="t-icons">
+            <div
+                *ngIf="iconLeftContent"
+                class="t-icon t-icon_left t-textfield-icon"
+            >
+                <tui-svg
+                    *polymorpheusOutlet="iconLeftContent as src; context: {$implicit: size}"
+                    tuiWrapper
+                    appearance="icon"
+                    [src]="src"
+                ></tui-svg>
+            </div>
+            <ng-container *ngIf="hasCustomContent">
+                <tui-svg
+                    *polymorpheusOutlet="controller.customContent as src"
+                    [src]="src"
+                ></tui-svg>
+            </ng-container>
             <ng-container *ngIf="hasCleaner">
                 <tui-svg
                     *polymorpheusOutlet="iconCleaner as src; context: {$implicit: size}"
@@ -76,12 +93,23 @@
                 ></tui-svg>
             </ng-container>
             <tui-tooltip
-                *ngIf="showHint"
+                *ngIf="hasTooltip"
                 automation-id="tui-text-area__tooltip"
                 class="t-tooltip"
                 [describeId]="id"
                 [content]="hintOptions?.content"
             ></tui-tooltip>
+            <div
+                *ngIf="iconContent"
+                class="t-icon t-textfield-icon"
+            >
+                <tui-svg
+                    *polymorpheusOutlet="iconContent as src; context: {$implicit: size}"
+                    tuiWrapper
+                    appearance="icon"
+                    [src]="src"
+                ></tui-svg>
+            </div>
         </div>
     </label>
 </div>