Adding character counter to Text input textfield/textarea component #1081

shubham-adobeaem · 2024-02-21T09:19:50Z

Description

Adds a character counter in textfield component.

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

I have signed the Adobe Open Source CLA.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have read the CONTRIBUTING document.
I have added tests to cover my changes and the overall coverage did not decrease.
All unit tests pass on CircleCi.
I ran all tests locally and they pass.

This reverts commit 8722c84.

@vdua

* FORMS-10718 GuideBridge resolveNode API - bumping af core version @review @vdua DOD(Yes) * FORMS-10718 GuideBridge resolveNode API - bumping af core version @review @vdua DOD(Yes) * Adding an intermitten error as whitelist * Ignoring 403 intermittent error

* test cases for custom submit action with redirect parameters * Update CustomAFSubmitService.java

…model, after validation rule deletion (adobe#859) * FORMS-9492: when validation expression is empty, remove the property from json model * FORMS-9492: test case added * FORMS-9492: incorporated review comments * FORMS-9492: update test-content.json

* [FORMS-10586] update html structure for RTL * add rtl in datepickerwidget * update class name * review points * update readme files * imple v2 wizard core component * update wizard test cases --------- Co-authored-by: Amit Kumar <amitkumar@adobe.com>

…g to styles (adobe#830) * Author UI dialog changes * persisting data into crx in the right format * Updating jcr property in runtime * Support via template policy * Servlet addons * Policy to dropdown within dialog code * Toggle additional properties - with bug of initial hide * storing custom properties in field's property in jcr * Fixed visibility toggle bug with jcr properties * Groupname storage in jcr and separate additional property field * Refactoring multifield hack * Conditonal rendering of advanced tab in dialogs based on presence of custom properties in template policy * Adding policy properties to headless json - WITH BUG: selecting multiple groups renders none * Addition of custom properties in form json, and refactoring * missed code rename from prev commit * Removing crx property for addon checkbox * Reverting removal of check in crx. Requirement exists in js * removed constant * code refactor * Fixing imports * Comment changes * Advanced tab related js * Implemented fix for edge case: Advanced tab will now be rendered on an additional constraint * Added Java ans JSdoc comments * comnvertToArray usecase replacement * Validations in Edit dialog and Template for keys and group names * Dialog warning on custom property delete on template policy * Typp fix * Support for panel and initial test cases * Cypress tests for custom properties * format changes * Fixed flaky test * Fix flaky test and cleanup of policy custom property * Fixed test failure * Test failure fixes * another test fix * fixing select blur test failure * Field descriptions * Custom properties support for Panel container via base ref * Minor fix * Container support * Incorporated review comments * Migration of logic to cq-guides * Clean up and bug fixes * Removed utiltiy functions * Refactoring and clean up * Space fix * Fixing constants * Support for accordion * wizard support * Support for both type of tabs and wizard * Moved snippet of additonal cp to cq guides and incorporated review comments * Fixing imports * Reverted old changes that are not necessary anymore * Incorporated review comments * removed stray xml property * change in internal function * Test case selector fixes * Supporting Omega tracking in design dialogs * Pom changes to incorporate local forms sdk api - needs to be changed when release happens * Updated aem-forms-sdk-api version * Changed aem-forms-sdk-api version post bugfix in cq-guides * Optional resolution of model package * NoClassDef class exception handling * Check in custom properties test to check for latest addon

…)"" This reverts commit 143ddb9.

Dev to master 1109

…0.56

This reverts commit 3f1f981.

This reverts commit 8722c84.

* Releng moving to latest cloud ready quickstart * Fixing flaky test and adding logs * Fixing flaky test

…-components into devToMaster

Dev to master

Dev to master Sep 28

…0.58

* Update af-core version * Fixed test cases

Dev to Master

* FORMS-12203: Added localization changes and test cases * FORMS-12203: Updated test case * FORMS-12203: Altered to contains instead of get * FORMS-12203: Resolved comments * FORMS-12203: Updated test cases * FORMS-12203: Updated delete button * FORMS-12203: Updated button * Retry wizard.locale.spec.js tests * FORMS-12203: Added theme request wait * Update wizard.locale.spec.js * Added latestaddon check * Delete ui.tests/test-module/package-lock.json * Update commands.js * Revert "Delete ui.tests/test-module/package-lock.json" This reverts commit fd97b53. * Reverted package-lock.json changes * FORMS-12203: Removed exception inline * FORMS-12203: Resolved comments * FORMS-12203: Update index.js * FORMS-12203: Removed package-lock.json change * Update index.js * Update error message in index.js * Update index.js * Update wizard.locale.spec.js * Removed an intercept * Updated regex patterns --------- Co-authored-by: Shivangi Mittal <shivangim@Shivangis-MacBook-Pro.local>

@vdua

…be#1169) * FORMS-13851 Support for language in date picker and number input @review @vdua DOD(Yes) * FORMS-13851 Support for language in date picker and number input @review @vdua DOD(Yes) * FORMS-13851 Support for language in date picker and number input @review @vdua DOD(Yes) * FORMS-13851 Support for language in date picker and number input @review @vdua DOD(Yes) * FORMS-13851 Support for language in date picker and number input @review @vdua DOD(Yes) * FORMS-13851 Support for language in date picker and number input @review @vdua DOD(Yes) * FORMS-13851 Support for language in date picker and number input @review @vdua DOD(Yes) * FORMS-13851 Support for language in date picker and number input @review @vdua DOD(Yes) * Update space character for thousands separator in french lang * FORMS-13851 Support for language in date picker and number input @review @vdua DOD(Yes) --------- Co-authored-by: Varun Dua <vdua@adobe.com>

Devtomaster 18 apr

…0.16

sakshi-arora1 · 2024-04-22T09:40:45Z

.../content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/characterCounter.html

@@ -0,0 +1,6 @@
+<template data-sly-template.characterCounter="${@ componentId, showCharCounter, maxLength, bemBlock}">
+  <div data-sly-test="${showCharCounter}" class="${bemBlock}__charcounter" aria-label="Character Counter">


Localize these like:
${'Character Counter' @ i18n, locale=request.locale}

Similarly localize:

Current Character Count

Maximum Character Count

sakshi-arora1 · 2024-04-22T09:47:01Z

ui.tests/test-module/specs/textinput/textinput.authoring.spec.js

@@ -50,6 +50,8 @@ describe('Page - Authoring', function () {
        // Check If Dialog Options Are Visible
        cy.get("[name='./multiLine']")
            .should("exist");
+         cy.get("[name='./showCharCounter']")


Also add test if the input is updated, count is also updated.

sakshi-arora1 · 2024-04-22T09:54:57Z

...root/apps/core/fd/components/form/textinput/v1/textinput/clientlibs/site/js/textinputview.js

+        	const updateCharacterCounter = () => {
+        		const charCount = this.widget.value.length;
+        		if (counterSpan) {
+        			counterSpan.textContent = Granite.I18n.getMessage(charCount);


for localizing the number at runtime, you can't use Granite.I18n. You will need to do what is done at https://github.com/adobe/aem-core-forms-components/blob/dev/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerwidget.js#L1013

sakshi-arora1 · 2024-04-22T09:56:12Z

...root/apps/core/fd/components/form/textinput/v1/textinput/clientlibs/site/js/textinputview.js

+        		const charCount = this.widget.value.length;
+        		if (counterSpan) {
+        			counterSpan.textContent = Granite.I18n.getMessage(charCount);
+        		}


Also do the same for max character count, as authour can write a rule to modify that and then the modified value should show up and also will need to be localized.

sakshi-arora1

Need to take care of localization, tests and a few other minor things.

# Conflicts: # bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/TextInputImpl.java

This reverts commit 089ec60.

ui.af.apps/pom.xml

…haracter-counter

AnurudraS and others added 30 commits September 11, 2023 13:14

Revert "override the inplace editing Edit element query."

2b00e4d

This reverts commit 8722c84.

test cases for custom submit action with redirect parameters (adobe#847)

8acc75f

* test cases for custom submit action with redirect parameters * Update CustomAFSubmitService.java

@releng: fixing client library compilation issue (adobe#865)

2337585

Revert "Revert "Fix inputted date not reflecting in calendar (adobe#856…

62430be

…)"" This reverts commit 143ddb9.

Merge pull request adobe#867 from adobe/devToMaster1109

0bb473d

Dev to master 1109

@releng [maven-scm] :prepare release core-forms-components-reactor-2.…

673c434

…0.56

@releng [maven-scm] :prepare for next development iteration

b4c86b6

Update README.md

2537a79

Update VERSIONS.md

f9a0b80

Merging dev to master.

0e7ad4d

override the inplace editing Edit element query.

ad40c16

Revert "Fix inputted date not reflecting in calendar (adobe#856)"

6393c43

This reverts commit 3f1f981.

Revert "override the inplace editing Edit element query."

732680e

This reverts commit 8722c84.

Conditional specification validation during PR build (adobe#872)

0c1ab18

Optimizing test run (adobe#873)

17bab3b

Releng moving to latest cloud ready quickstart (adobe#874)

f1290d2

* Releng moving to latest cloud ready quickstart * Fixing flaky test and adding logs * Fixing flaky test

Merge branch 'devToMaster' of https://github.com/adobe/aem-core-forms…

aa297b7

…-components into devToMaster

Re-adding Fix inputted date not reflecting in calendar (adobe#856)

b6759bc

Removing sync PR.

c589f3f

Merge pull request adobe#877 from adobe/devToMaster

df7962b

Dev to master

Adding sync PR step back.

1c9d73b

Merge pull request adobe#898 from adobe/dev-master-28

09df3a7

Dev to master Sep 28

@releng [maven-scm] :prepare release core-forms-components-reactor-2.…

3bf7da4

…0.58

@releng [maven-scm] :prepare for next development iteration

2216f1d

Update af-core version (adobe#900)

aaa0e82

* Update af-core version * Fixed test cases

Merge pull request adobe#902 from adobe/dev2Master

8b30f3b

Dev to Master

Pavitra Khatri and others added 7 commits April 18, 2024 09:05

Added condition on description and error message in aria-describedby

fa4651c

Merge pull request adobe#1197 from adobe/devtomaster-18Apr

ad0490c

Devtomaster 18 apr

@releng [maven-scm] :prepare release core-forms-components-reactor-3.…

ad4f690

…0.16

@releng [maven-scm] :prepare for next development iteration

d825c78

Update VERSIONS.md and README.md to include version 3.0.16

7f470d9

sakshi-arora1 reviewed Apr 22, 2024

View reviewed changes

sakshi-arora1 requested changes Apr 22, 2024

View reviewed changes

shubham-adobeaem added 7 commits April 24, 2024 14:47

Merge branch 'master' into feature/text-input-character-counter

95b4549

# Conflicts: # bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/TextInputImpl.java

merge conflicts

089ec60

Merge branch 'dev' into feature/text-input-character-counter

37bcd1d

Revert "merge conflicts"

cffd65f

This reverts commit 089ec60.

merge conflicts

23a3ed1

merge conflicts

78dbcf7

merge conflicts

c70e6b8

sakshi-arora1 reviewed Apr 24, 2024

View reviewed changes

ui.af.apps/pom.xml Outdated Show resolved Hide resolved

shubham-adobeaem added 7 commits May 1, 2024 16:43

Merge remote-tracking branch 'upstream/dev' into feature/text-input-c…

e770ddf

…haracter-counter

Updated

90e89e9

fromatted

5b16fb3

fromatted

4726a38

fromatted

41c53c0

Revert

4269c73

Revert

bac2502

shubham-adobeaem marked this pull request as ready for review May 1, 2024 14:37

shubham-adobeaem added 2 commits May 1, 2024 20:09

Revert

a367389

Localisiing

0a40f26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding character counter to Text input textfield/textarea component #1081

Adding character counter to Text input textfield/textarea component #1081

shubham-adobeaem commented Feb 21, 2024 •

edited

sakshi-arora1 Apr 22, 2024

sakshi-arora1 Apr 22, 2024

sakshi-arora1 Apr 22, 2024

sakshi-arora1 Apr 22, 2024

sakshi-arora1 Apr 22, 2024

sakshi-arora1 left a comment

		@@ -0,0 +1,6 @@
		<template data-sly-template.characterCounter="${@ componentId, showCharCounter, maxLength, bemBlock}">
		<div data-sly-test="${showCharCounter}" class="${bemBlock}__charcounter" aria-label="Character Counter">

Adding character counter to Text input textfield/textarea component #1081

Are you sure you want to change the base?

Adding character counter to Text input textfield/textarea component #1081

Conversation

shubham-adobeaem commented Feb 21, 2024 • edited

Description

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Checklist:

sakshi-arora1 Apr 22, 2024

Choose a reason for hiding this comment

sakshi-arora1 Apr 22, 2024

Choose a reason for hiding this comment

sakshi-arora1 Apr 22, 2024

Choose a reason for hiding this comment

sakshi-arora1 Apr 22, 2024

Choose a reason for hiding this comment

sakshi-arora1 Apr 22, 2024

Choose a reason for hiding this comment

sakshi-arora1 left a comment

Choose a reason for hiding this comment

shubham-adobeaem commented Feb 21, 2024 •

edited