From d2feb88ef83b1209d1cf43f253ca0d38419544d1 Mon Sep 17 00:00:00 2001 From: OlgaLarina Date: Wed, 17 Jan 2024 18:02:56 +0300 Subject: [PATCH] resolve #7679 Character Counter Overlaps the Supplied Text --- src/defaultCss/defaultV2Css.ts | 1 + src/defaultV2-theme/blocks/sd-input.scss | 4 ++++ src/question_text.ts | 4 +++- tests/question_texttests.ts | 18 ++++++++++++++++++ ...acter-counter-maxLength-100-with-focus.png | Bin 0 -> 4199 bytes ...er-counter-maxLength-100-without-focus.png | Bin 0 -> 3657 bytes .../tests/defaultV2/question.ts | 11 ++++++++++- 7 files changed, 36 insertions(+), 2 deletions(-) create mode 100644 visualRegressionTests/tests/defaultV2/etalons/question-text-remaining-character-counter-maxLength-100-with-focus.png create mode 100644 visualRegressionTests/tests/defaultV2/etalons/question-text-remaining-character-counter-maxLength-100-without-focus.png diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts index 834f9e7033..a94afbdaea 100644 --- a/src/defaultCss/defaultV2Css.ts +++ b/src/defaultCss/defaultV2Css.ts @@ -323,6 +323,7 @@ export var defaultV2Css = { small: "sd-row__question--small", controlDisabled: "sd-input--disabled", constrolWithCharacterCounter: "sd-text__character-counter", + characterCounterBig: "sd-text__character-counter--big", content: "sd-text__content sd-question__content", remainingCharacterCounter: "sd-remaining-character-counter", onError: "sd-input--error" diff --git a/src/defaultV2-theme/blocks/sd-input.scss b/src/defaultV2-theme/blocks/sd-input.scss index bce44742ee..9c7f9b71fd 100644 --- a/src/defaultV2-theme/blocks/sd-input.scss +++ b/src/defaultV2-theme/blocks/sd-input.scss @@ -81,6 +81,10 @@ textarea { padding-inline-end: calcSize(8); } +.sd-text__character-counter.sd-text__character-counter--big:focus-within { + padding-inline-end: calcSize(11); +} + .sd-remaining-character-counter { display: none; flex-direction: row; diff --git a/src/question_text.ts b/src/question_text.ts index a9eb8906a1..b0ab0ad41e 100644 --- a/src/question_text.ts +++ b/src/question_text.ts @@ -400,8 +400,10 @@ export class QuestionTextModel extends QuestionTextBase { return !this.isReadOnly && this.inputType !== "range"; } protected getControlCssClassBuilder(): CssClassBuilder { + const maxLength = this.getMaxLength(); return super.getControlCssClassBuilder() - .append(this.cssClasses.constrolWithCharacterCounter, !!this.getMaxLength()); + .append(this.cssClasses.constrolWithCharacterCounter, !!maxLength) + .append(this.cssClasses.characterCounterBig, maxLength > 99); } public isReadOnlyRenderDiv(): boolean { return this.isReadOnly && settings.readOnly.textRenderMode === "div"; diff --git a/tests/question_texttests.ts b/tests/question_texttests.ts index 76832c1b11..860ad6017f 100644 --- a/tests/question_texttests.ts +++ b/tests/question_texttests.ts @@ -3,6 +3,7 @@ import { QuestionCommentModel } from "../src/question_comment"; import { SurveyModel } from "../src/survey"; import { QuestionTextBase, CharacterCounter } from "../src/question_textbase"; import { settings } from "../src/settings"; +import { StylesManager } from "../src/stylesmanager"; QUnit.test("check dropdown disabled class", function(assert) { var json = { @@ -349,6 +350,23 @@ QUnit.test("CharacterCounter + settings.showMaxLengthIndicator", function(assert ch.updateRemainingCharacterCounter("abcd", 7); assert.equal(ch.remainingCharacterCounter, "4/7", "#4"); }); +QUnit.test("getControlClass with characterCounter", function(assert) { + StylesManager.applyTheme("defaultV2"); + const inputClasses = "sd-input sd-text"; + const constrolWithCharacterCounter = "sd-text__character-counter"; + const characterCounterBig = "sd-text__character-counter--big"; + + const survey = new SurveyModel({ elements: [{ type: "text", name: "q1" }] }); + const q = survey.getQuestionByName("q1"); + assert.equal(q.getControlClass(), inputClasses, "#1"); + + q.maxLength = 99; + assert.equal(q.getControlClass(), inputClasses + " " + constrolWithCharacterCounter, "#2"); + + q.maxLength = 100; + assert.equal(q.getControlClass(), inputClasses + " " + constrolWithCharacterCounter + " " + characterCounterBig, "#3"); + StylesManager.applyTheme("default"); +}); QUnit.test("Set empty text", function(assert) { const survey = new SurveyModel({ diff --git a/visualRegressionTests/tests/defaultV2/etalons/question-text-remaining-character-counter-maxLength-100-with-focus.png b/visualRegressionTests/tests/defaultV2/etalons/question-text-remaining-character-counter-maxLength-100-with-focus.png new file mode 100644 index 0000000000000000000000000000000000000000..ea6ab5d50e9c0a4be6933e9e1ee474278fbb56bf GIT binary patch literal 4199 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 literal 0 HcmV?d00001 diff --git a/visualRegressionTests/tests/defaultV2/question.ts b/visualRegressionTests/tests/defaultV2/question.ts index ddfe3f6eac..d183ecffd5 100644 --- a/visualRegressionTests/tests/defaultV2/question.ts +++ b/visualRegressionTests/tests/defaultV2/question.ts @@ -687,7 +687,7 @@ frameworks.forEach(framework => { test("Remaining character counter - mobile view", async (t) => { await wrapVisualTest(t, async (t, comparer) => { - await t.resizeWindow(350, 500); + await t.resizeWindow(350, 900); await initSurvey(framework, { focusFirstQuestionAutomatic: true, questions: [ @@ -696,6 +696,11 @@ frameworks.forEach(framework => { type: "text", maxLength: 25, defaultValue: "Tewwwwwwwwwwwwwwwwwwwwst" + }, { + name: "text", + type: "text", + maxLength: 100, + defaultValue: "Tewwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwst" }, { "type": "multipletext", "name": "question1", @@ -718,6 +723,10 @@ frameworks.forEach(framework => { await takeElementScreenshot("question-text-remaining-character-counter-mobile-view-with-focus.png", Selector(".sd-text__content"), t, comparer); await takeElementScreenshot("question-multipletext-remaining-character-counter-mobile-view-without-focus.png", Selector(".sd-multipletext__content"), t, comparer); + await takeElementScreenshot("question-text-remaining-character-counter-maxLength-100-without-focus.png", Selector(".sd-text__content").nth(1), t, comparer); + + await t.pressKey("tab"); + await takeElementScreenshot("question-text-remaining-character-counter-maxLength-100-with-focus.png", Selector(".sd-text__content").nth(1), t, comparer); await t.pressKey("tab"); await takeElementScreenshot("question-text-remaining-character-counter-mobile-view-without-focus.png", Selector(".sd-text__content"), t, comparer);