fix(core): support text-overflow in tuiTextfield

taiga-family · Sep 9, 2022 · 30513e5 · 30513e5
1 parent b373af1
commit 30513e5
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 6 deletions.
diff --git a/projects/core/components/primitive-textfield/textfield/textfield.component.ts b/projects/core/components/primitive-textfield/textfield/textfield.component.ts
@@ -27,7 +27,7 @@ import {TUI_TEXTFIELD_HOST} from '@taiga-ui/core/tokens';
         '[value]': `host.value`,
         '(input)': `host.onValueChange($event.target.value)`,
     },
-    styleUrls: [`textfield.style.less`],
+    styleUrls: [`./textfield.style.less`],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TuiTextfieldComponent {

diff --git a/projects/core/components/primitive-textfield/textfield/textfield.style.less b/projects/core/components/primitive-textfield/textfield/textfield.style.less
@@ -48,6 +48,11 @@
     :host-context(tui-text-area._focused:not(._readonly))::placeholder {
         opacity: 1;
     }
+
+    &::placeholder,
+    &:placeholder-shown {
+        .text-overflow();
+    }
 }
 
 textarea:host {

diff --git a/projects/core/styles/mixins/textfield.less b/projects/core/styles/mixins/textfield.less
@@ -71,6 +71,7 @@
     overflow: hidden;
     text-transform: inherit;
     resize: none;
+    text-overflow: ellipsis;
 
     :host[data-mode='onDark'] &,
     :host-context(tui-primitive-textfield[data-mode='onDark']),

diff --git a/projects/demo-integrations/cypress/tests/kit/input/input.spec.ts b/projects/demo-integrations/cypress/tests/kit/input/input.spec.ts
@@ -6,7 +6,8 @@ describe(`Input`, () => {
 
         it(`has custom content (text) + cleaner + hint which dont overlapping each others`, () => {
             cy.tuiVisit(
-                `${INPUT_PAGE_URL}/API?tuiHintContent=Some%20content&tuiTextfieldCleaner=true&tuiTextfieldCustomContent=%3Cspan%3ELongTextContent%3Cspan%3E`,
+                `${INPUT_PAGE_URL}/API?tuiHintContent=Some content&tuiTextfieldCustomContent=<b>LongTextContent<b>`,
+                {skipExpectUrl: true},
             );
 
             cy.get(`#demoContent`)
@@ -52,7 +53,7 @@ describe(`Input`, () => {
             );
 
             cy.get(`.t-input-wrapper`)
-                .find(`input`)
+                .find(`input[tuiTextfield]`)
                 .focus()
                 .should(`have.value`, `111`)
                 .focused()
@@ -69,26 +70,28 @@ describe(`Input`, () => {
         const characters = `big, placeholder, qwerty, jackson, yellow and more`;
 
         cy.viewport(450, 300).tuiVisit(
-            `components/input/API?tuiMode=null&tuiTextfieldExampleText=${characters}`,
+            `components/input/API?tuiMode=null&pseudoFocused=true&attr.placeholder=${characters}`,
         );
 
         cy.get(`#demoContent`)
             .find(`.t-input-wrapper`)
             .tuiScrollIntoView()
-            .find(`input`)
+            .find(`input[tuiTextfield]`)
             .as(`input`);
 
         cy.get(`@input`)
             .focus()
             .should(`have.value`, `111`)
             .focused()
             .clear()
+            .blur()
             .matchImageSnapshot(`06-character-descenders`);
 
         cy.get(`@input`)
             .type(
                 `It has been the industry's standard dummy text ever since the 1500s{enter}`,
             )
+            .blur()
             .matchImageSnapshot(`07-very-long-text-without-text-ellipsis`);
     });
 });
diff --git a/projects/demo/src/modules/components/input/input.component.ts b/projects/demo/src/modules/components/input/input.component.ts
@@ -94,6 +94,8 @@ export class ExampleTuiInputComponent extends AbstractExampleTuiControl {
 
     readonly control = new FormControl(`111`, Validators.required);
 
+    placeholder = `Field placeholder`;
+
     override readonly customContentVariants = [
         `tuiIconSearchLarge`,
         `tuiIconCalendarLarge`,

diff --git a/projects/demo/src/modules/components/input/input.template.html b/projects/demo/src/modules/components/input/input.template.html
@@ -236,8 +236,12 @@
                     [tuiHintDirection]="hintDirection"
                     [tuiHintAppearance]="hintAppearance"
                 >
-                    placeholder
+                    Label
                     <strong>strong text</strong>
+                    <input
+                        tuiTextfield
+                        [attr.placeholder]="placeholder"
+                    />
                 </tui-input>
             </ng-template>
         </tui-doc-demo>
@@ -277,6 +281,15 @@
                     <code>SvgService</code>
                 </a>
             </ng-template>
+            <ng-template
+                i18n
+                documentationPropertyName="attr.placeholder"
+                documentationPropertyMode="input"
+                documentationPropertyType="string"
+                [(documentationPropertyValue)]="placeholder"
+            >
+                Placeholder
+            </ng-template>
         </tui-doc-documentation>
         <inherited-documentation [dropdown]="true"></inherited-documentation>
     </ng-template>