Once we decide to start working on this task, we will need @KieranMcCann to define the following items listed as open questions:

• We need to evaluate if we want to indicate the exceeded characters and, if yes, the style for these exceeded characters.
  
• We need to define the right padding between the helper text and characters counter so both texts are not too close to each other when the helper text is too long. Also, we need to define the maximum case to know how both texts grow when they are long.
  

You can check the Figma explorations.

@kostajh thank you for adding real use cases for this proposed improvement. I want to clarify if there is an expectation from Trust & Safety Tools for the character count to be implemented in the TextArea ahead of T337566: [EPIC]: Incident Reporting System - Minimal Testable Product (MTP). It wasn't totally clear to me based on this comment if the near-term plan is to implement the counter yourself or to implement it / have it implemented in Codex.

In T331000#9146186, @CCiufo-WMF wrote:

@kostajh thank you for adding real use cases for this proposed improvement. I want to clarify if there is an expectation from Trust & Safety Tools for the character count to be implemented in the TextArea ahead of T337566: [EPIC]: Incident Reporting System - Minimal Testable Product (MTP). It wasn't totally clear to me based on this comment if the near-term plan is to implement the counter yourself or to implement it / have it implemented in Codex.

I would be happy if it's something that DST wants to take on so that all consumers of the component benefit, but understand that it's unplanned work for your team. If you intend to work on it in the next month or two, then we'd wait for your implementation, otherwise we would figure out something ourselves.

In T331000#9146234, @kostajh wrote:

In T331000#9146186, @CCiufo-WMF wrote:

@kostajh thank you for adding real use cases for this proposed improvement. I want to clarify if there is an expectation from Trust & Safety Tools for the character count to be implemented in the TextArea ahead of T337566: [EPIC]: Incident Reporting System - Minimal Testable Product (MTP). It wasn't totally clear to me based on this comment if the near-term plan is to implement the counter yourself or to implement it / have it implemented in Codex.

I would be happy if it's something that DST wants to take on so that all consumers of the component benefit, but understand that it's unplanned work for your team. If you intend to work on it in the next month or two, then we'd wait for your implementation, otherwise we would figure out something ourselves.

I know this is always my default response, but it sort of has to be 😁: ideally T&ST upstreams this to Codex if you plan on implementing it anyway? I think there is some challenge here based on what you're proposing in T338817#9133502, since the Codex implementation should be MediaWiki agnostic. I'm open to us setting up a time to at least chat through some options. In the worst case, your PIRS-specific implementation could be upstreamed later, or replaced with the eventual Codex version.

In T331000#9146234, @kostajh wrote:

I would be happy if it's something that DST wants to take on so that all consumers of the component benefit, but understand that it's unplanned work for your team. If you intend to work on it in the next month or two, then we'd wait for your implementation, otherwise we would figure out something ourselves.

Hi @kostajh – we discussed this use-case today in the DST design/engineering meeting. I don't think that any changes are actually required in Codex to support the behavior that you need. Instead of us introducing some new functionality into specific Codex components, we can provide a demo (complete with code sample) that you all should be able to adapt to the specific needs of your project (and which may be useful to other teams in the future). Feel free to then CC one of the DST engineers on the relevant patch in your project and we can provide a little bit of code review assistance if necessary.

How does that sound? We should be able to publish such an example in a in a few days (maybe next week at some point). I can link here when it's live.

In T331000#9147875, @egardner wrote:

In T331000#9146234, @kostajh wrote:

I would be happy if it's something that DST wants to take on so that all consumers of the component benefit, but understand that it's unplanned work for your team. If you intend to work on it in the next month or two, then we'd wait for your implementation, otherwise we would figure out something ourselves.

Hi @kostajh – we discussed this use-case today in the DST design/engineering meeting. I don't think that any changes are actually required in Codex to support the behavior that you need. Instead of us introducing some new functionality into specific Codex components, we can provide a demo (complete with code sample) that you all should be able to adapt to the specific needs of your project (and which may be useful to other teams in the future). Feel free to then CC one of the DST engineers on the relevant patch in your project and we can provide a little bit of code review assistance if necessary.

How does that sound? We should be able to publish such an example in a in a few days (maybe next week at some point). I can link here when it's live.

Sure, that works, thanks!

for what is worth, we have a (front-end only) implementation on wikifunctions, it would be generally helpful to have standard solution, e.g. a prop for character count for all valid text inputs.

see also https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/WikiLambda/+/refs/heads/master/resources/ext.wikilambda.edit/components/widgets/AboutEditMetadataDialog.vue#327

Ok – @kostajh and @AAlhazwani-WMF (and anyone else in need of similar functionality):

Demo

At this point in time, we recommend using the new Field component in Codex to implement this kind of a feature. You can use <CdxField> to wrap other components like <CdxTextArea>.

You can see an interactive example (complete with MediaWiki-compatible code samples) here: https://doc.wikimedia.org/codex/latest/components/demos/field.html#with-custom-help-text-content

Explanation

The Field component exposes a slot called #help-text which appears immediately below the content; by default any text here is a light gray color. Since this slot can hold essentially any kind of markup structure, you could place a message and a text counter side-by-side in a container that's styled with CSS Flexbox (so that the counter is always in the lower right corner, for example).

The Field component also accepts a status property, which can be set to either default or error. You can provide a messages prop to cause an error message to be displayed whenever the Field has the error status.

This example relies on two computed properties – the first computes the number of remaining characters (equal to max character limit minus current length of the user's text), and the second returns a status value ("default" if the remaining character count is zero or above, and "error" if it the number is negative).

In a real-world example you might disable a "submit" button or otherwise prevent submission when the Field is in the "error" state. You could also swap out the very basic character-counting logic with something more language-aware, but the basic structure would still hold.

Let me know if you have questions, and feel free to CC me on a patch if you implement this kind of a feature in your own code. At some point in the future we may introduce some kind of "official" counter into Codex, but for now this is probably the most straightforward way to add this functionality into your own applications.

In T331000#9162100, @egardner wrote:

Ok – @kostajh and @AAlhazwani-WMF (and anyone else in need of similar functionality):

Demo

At this point in time, we recommend using the new Field component in Codex to implement this kind of a feature. You can use <CdxField> to wrap other components like <CdxTextArea>.

You can see an interactive example (complete with MediaWiki-compatible code samples) here: https://doc.wikimedia.org/codex/latest/components/demos/field.html#with-custom-help-text-content

Thank you!