M2-7457: Character Counter

[felipeMetaLab]

📝 Description

🔗 Jira Ticket M2-7457
Creating CharacterCounter component and adding it to Paragraph text

Changes include:

• New component.
• implemented on paragraph

📸 Screenshots

🪤 Peer Testing

1 - crating a paragraph text
2 - the counter must appears on bottom right
3 - validate the color behavios when onFocus and onBlur
4 - validate the number of typed character and limit

[BamMironov]

Please consider a couple of comments from my side. But generally, it looks good to me

[ChaconC]

@felipeMetaLab can you review the failing test cases

[ChaconC]

Ran tests locally and all is passing.
I'm fine as far as my comments, but curious for @BamMironov to take a final pass.

[felipeMetaLab]

@BamMironov I added some validations, when you have a chance, can you validate again and check if every thing is good for you ?
Thanks :)

[BamMironov]

@felipeMetaLab The code looks great!

However, when I ran the app from your git branch to test the component I noticed that I was not able to enter more symbols than limit.

Simulator.Screen.Recording.-.iPhone.15.-.2024-08-28.at.09.30.39.mp4

According to Acceptance Criteria 1 from M2-7457:

Given: Respondent accesses Paragraph Text Item

When: The inputted text reaches the max characters limit set in the Admin Panel

Then: The respondent is still capable to enter any more symbols/ text to overflow the max character limit

AND
The text box enters into an error state, and respondent cannot move to next item

[felipeMetaLab]

@BamMironov that's right, it is the normal behavior of paragraph, the fact is that the component "character counter" accepts more then the limit, we can force some fake limit in paragraph to test the character counter like the image I sent, and the box is expanding as long you add more text but the min height is 170px, for you test the box expanding you should have a greater limit, and insert more text.

[BamMironov]

@felipeMetaLab I see, thanks! Okay, so if maxLength is relevant only for tablets please make sure to specify that in the ticket so that the QA team is aware.

[felipeMetaLab]

You are right @BamMironov I was look at the old criteria, it had a limit implicit, but I noticed it changed, sorry, I will make this adjustment.