Add data attribute for number of comments

[frisi]

trafficstars

Use Cases

We're styling the number of comments a badge and would like to hide the badge in case of 0 comments:

adding a data attribute on the button and/or span containing the count would allow to implement a css condition

<li id="tab-ALL_COMMENTS" role="presentation">
  <button
    aria-controls="tabPane-ALL_COMMENTS" role="tab" aria-selected="true"
    class="coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
    type="button"
    data-count="2">

    <div class="Box-root-acb8bd0953d79380f99868ba1e9c06f2">
      <span>All Comments</span>
      <span class="coral coral-counter" data-count="2">
        <span class="Counter-text-58caffde738d519a54562205d642c007">2</span>
      </span>
    </div>
  </button>
</li>

UPDATE: the same is already done or the markup injected by count.js (see https://docs.coralproject.net/coral/v5/integrating/counts/). however, the fact that the data attribute is added too is not yet mentioned in the example snippet of the documentation

[frisi]

pinging @wyattjoh as you contributed the relevant code. if you are not the one in charge of this please forward to right person - thanks!

our client is asking for this feature and we do not see any other way to implement this other than making the changes outlined above to coral.

[wyattjoh]

Do you think @cvle we could solve this with the same approach we did with reactions?

https://github.com/coralproject/talk/blob/ae24c21a1f753b2b435a27e093d865f14673ad41/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx#L345

[frisi]

from a user perspective both is fine, as long as there is a way to apply css based on the number of comments.

for what it's worth: the markup for the injected counts uses a data attribute.

<span class="coral-count" data-coral-url="..." data-coral-ref="..." data-coral-count="19"><span class="coral-count-number">19</span>
<span class="coral-count-text">Kommentare</span></span>

[tessalt]

You can use the notext attribute to return only the number which should allow for more flexibility