refactor(kit): InputRange uses tuiTextfieldPostfix for the right …

…text input (#4965)
taiga-family · Jul 24, 2023 · 49d3014 · 49d3014
1 parent df27e7c
commit 49d3014
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 78 deletions.
diff --git a/projects/kit/components/input-range/input-range.style.less b/projects/kit/components/input-range/input-range.style.less
@@ -14,37 +14,6 @@
     width: 50%;
     height: 100%;
     text-align: right;
-
-    & .t-text-input {
-        flex: 1;
-    }
-}
-
-.t-text-input {
-    text-align: inherit;
-}
-
-.t-pluralize-right {
-    display: flex;
-    align-items: center;
-    padding: 1.125rem var(--tui-padding-m) 0 0;
-    margin-left: -0.75rem;
-    font: var(--tui-font-text-s);
-
-    :host[data-size='l'] & {
-        font: var(--tui-font-text-m);
-        padding-top: 1.25rem;
-        margin-left: -1rem;
-        padding-right: var(--tui-padding-l);
-    }
-
-    :host._label-outside & {
-        padding-top: 0;
-    }
-
-    :host._disabled & {
-        color: var(--tui-text-03);
-    }
 }
 
 :host {

diff --git a/projects/kit/components/input-range/input-range.template.html b/projects/kit/components/input-range/input-range.template.html
@@ -12,12 +12,12 @@
     <tui-input-number
         tuiTextfieldAppearance="none"
         automation-id="tui-input-range__left-input"
-        class="t-left t-text-input"
+        class="t-left"
         [min]="min"
         [max]="value[1]"
         [precision]="precision"
         [decimal]="decimal"
-        [postfix]="pluralize && !showLeftValueContent ? (value[0] | i18nPlural : pluralize) : ''"
+        [tuiTextfieldPostfix]="pluralize && !showLeftValueContent ? (value[0] | i18nPlural : pluralize) : ''"
         [disabled]="computedDisabled"
         [readOnly]="readOnly"
         [ngModel]="value[0]"
@@ -37,42 +37,32 @@
         </div>
     </tui-input-number>
 
-    <div class="t-right">
-        <tui-input-number
-            tuiTextfieldAppearance="none"
-            automation-id="tui-input-range__right-input"
-            class="t-text-input"
-            [min]="value[0]"
-            [max]="max"
-            [precision]="precision"
-            [decimal]="decimal"
-            [disabled]="computedDisabled"
-            [readOnly]="readOnly"
-            [ngModel]="value[1]"
-            (ngModelChange)="onInputRight($event)"
-            (focusedChange)="onTextInputFocused($event, true)"
-            (keydown.arrowUp)="changeByStep($event, [0, 1])"
-            (keydown.arrowDown)="changeByStep($event, [0, -1])"
-        >
-            <div
-                *ngIf="showRightValueContent"
-                ngProjectAs="tuiContent"
-            >
-                <ng-container *polymorpheusOutlet="rightValueContent as text; context: {$implicit: value[1]}">
-                    {{ text }}
-                </ng-container>
-            </div>
-        </tui-input-number>
-
-        <!-- TODO replace by postfix of the right InputNumber (after fix https://github.com/Tinkoff/taiga-ui/issues/1193) -->
-        <span
-            *ngIf="!showRightValueContent && pluralize"
-            automation-id="tui-input-range__pluralize-right"
-            class="t-pluralize-right"
+    <tui-input-number
+        tuiTextfieldAppearance="none"
+        automation-id="tui-input-range__right-input"
+        class="t-right"
+        [min]="value[0]"
+        [max]="max"
+        [precision]="precision"
+        [decimal]="decimal"
+        [disabled]="computedDisabled"
+        [tuiTextfieldPostfix]="pluralize && !showRightValueContent ? (value[1] | i18nPlural : pluralize) : ''"
+        [readOnly]="readOnly"
+        [ngModel]="value[1]"
+        (ngModelChange)="onInputRight($event)"
+        (focusedChange)="onTextInputFocused($event, true)"
+        (keydown.arrowUp)="changeByStep($event, [0, 1])"
+        (keydown.arrowDown)="changeByStep($event, [0, -1])"
+    >
+        <div
+            *ngIf="showRightValueContent"
+            ngProjectAs="tuiContent"
         >
-            &nbsp;{{ value[1] | i18nPlural : pluralize }}
-        </span>
-    </div>
+            <ng-container *polymorpheusOutlet="rightValueContent as text; context: {$implicit: value[1]}">
+                {{ text }}
+            </ng-container>
+        </div>
+    </tui-input-number>
 
     <tui-range
         class="t-range"

diff --git a/projects/kit/components/input-range/test/input-range.component.spec.ts b/projects/kit/components/input-range/test/input-range.component.spec.ts
@@ -111,15 +111,15 @@ describe(`InputRange`, () => {
 
         it(`Plural signature is present`, () => {
             expect(getLeftValueDecoration()).toContain(`лет`);
-            expect(getRightValueDecoration()).toBe(`год`);
+            expect(getRightValueDecoration()).toContain(`год`);
         });
 
         it(`[rightValueContent] missing on focus`, () => {
             testComponent.control.setValue([-10, 10]);
             inputPORight.focus();
 
             expect(getRightValueContent()).toBeNull();
-            expect(getRightValueDecoration()).toBe(`лет`);
+            expect(getRightValueDecoration()).toBe(`10 лет`);
         });
     });
 
@@ -147,7 +147,7 @@ describe(`InputRange`, () => {
         it(`Rounds the right value of an input field to the nearest quantum on loss of focus`, () => {
             inputPORight.sendTextAndBlur(`7`);
 
-            expect(inputPORight.value).toBe(`5`);
+            expect(inputPORight.value).toBe(`5 лет`);
         });
     });
 
@@ -167,7 +167,7 @@ describe(`InputRange`, () => {
             inputPORight.sendTextAndBlur(``);
 
             expect(testComponent.control.value[1]).toBe(5);
-            expect(inputPORight.value).toBe(`5`);
+            expect(inputPORight.value).toBe(`5 лет`);
         });
     });
 
@@ -192,9 +192,9 @@ describe(`InputRange`, () => {
 
             expect(testComponent.control.value[1]).toBe(testComponent.control.value[0]);
             expect(inputPORight.value).toBe(
-                testComponent.control.value[0]
+                `${testComponent.control.value[0]
                     .toString()
-                    .replace(CHAR_HYPHEN, CHAR_MINUS),
+                    .replace(CHAR_HYPHEN, CHAR_MINUS)} лет`,
             );
         });
     });
@@ -208,7 +208,7 @@ describe(`InputRange`, () => {
         });
 
         it(`Formats input`, () => {
-            expect(inputPORight.value).toBe(`12 345,67`);
+            expect(inputPORight.value).toBe(`12 345,67 лет`);
         });
 
         it(`Doesn't format the value`, () => {
@@ -349,7 +349,7 @@ describe(`InputRange`, () => {
             it(`Keyboard input does not exceed max`, () => {
                 inputPORight.sendText(`12345`);
 
-                expect(inputPORight.value).toBe(`10`);
+                expect(inputPORight.value).toBe(`10 лет`);
             });
 
             it(`Keyboard input does not exceed min`, () => {
@@ -368,7 +368,9 @@ describe(`InputRange`, () => {
             it(`Keyboard input does not output value[1] beyond value[0]`, () => {
                 inputPORight.sendText(`1`);
 
-                expect(inputPORight.value).toBe(`1`);
+                expect(inputPORight.value).toBe(
+                    `1 лет`, // this plural form is expected because it is intermediate state and form control is not updated yet
+                );
                 expect(testComponent.control.value[1]).toBe(6);
             });
         });
@@ -401,7 +403,7 @@ describe(`InputRange`, () => {
 
     function getRightValueDecoration(): string {
         return pageObject
-            .getByAutomationId(`${testContext.prefix}pluralize-right`)
+            .getByAutomationId(testContext.valueDecorationAutoId, rightInputWrapper)
             ?.nativeElement.textContent.trim()
             .replace(`\n `, ``);
     }