A character counter for text fields

sartography / spiff-arena

SpiffWorkflow is a software development platform for building, running, and monitoring executable diagrams

https://www.spiffworkflow.org/

GNU Lesser General Public License v2.1

48 stars 36 forks source link

A character counter for text fields #640

Closed harmeet-status closed 3 weeks ago

harmeet-status commented 6 months ago

Add a widget/functionality allowing displaying to an end-user a count of chars entered to a text field vs the limit of chars set for the field

UPDATE: docs are here.

Kayvon-Martinez commented 3 months ago

I have added a character counter field in https://github.com/sartography/spiff-arena/pull/1113 @harmeet-status

Kayvon-Martinez commented 2 months ago

I need someone to get rid of the feature/character_counter_field branch as I accidentally made it track the numeric_range_field branch. I have made some fixes to the character counter field and pushed the changes to the numeric_range_field branch. The changes and example schema for this field are in https://github.com/sartography/spiff-arena/pull/925.

dinithihj commented 2 months ago

Tested on dev.app (Version 350/352) using the model https://dev.app.spiff.status.im/process-models/misc:qa:forms:test-character-counter and found below issues

When the "ui:field": "character-counter" is added to a text field, the help text appears larger than usual.
When the "ui:field": "character-counter" is added place holder text is not displayed
After adding "ui:field": "character-counter", it's not possible to submit the data after filling it out; it's showing the following error.

dinithihj commented 2 months ago

@harmeet-status Do you want this feature to be available in text area as well? Right now, if I add "ui:field": "character-counter" to a text area, it ends up looking the same as a text field. Screenshot 2024-03-14 163147

dinithihj commented 2 months ago

@Kayvon-Martinez I had a chat with @harmeet-status about the text area (about the above comment) he said it is a bug and needs to be fixed.

And also he suggested it's good to show the character counter on the top right corner of the control.

burnettk commented 2 months ago

The character counter is a feature that is built in to the carbon components, so moving where it is displayed involves hacking on carbon.The direction is to move off of carbon with the new UI/UX. Perhaps we don’t spend too much time tweaking this now?

Kayvon-Martinez commented 2 months ago

@dinithihj I will fix these errors. Thank you for letting me know.

jasquat commented 1 month ago

This is fixed in #1432. It should resolve the bugs however carbon only displays the counter field on the left it seems. Since this will have to get implemented differently with mui we recommend that we accept that constraint at this time.

harmeet-status commented 1 month ago

It's fine let's not fight carbon, we're going to reskin anyways.

dinithihj commented 1 month ago

Tested and verified on dev.app (version 383/384) All the above-mentioned bugs are fixed now and the character counter is working on text fields and text areas. The counter is still positioned on the left side, which is agreed to keep as it is.

dinithihj commented 3 weeks ago

Tested and verified on test.app

madhurrya commented 3 weeks ago

Released to Prod on May 9th.