feat(NcCounterBubble): add count prop for humanized count display

[ShGKme]

☑️ Resolves

• Fix NcCounterBubble just keeps counting up #5486

Currently, the maximal number is limited via ... ellipsis. It doesn't make sense for numbers. And it is broken on Nextcloud 30 styles.

In general, having a slot doesn't make much sense for me. As the component is supposed to show a count, it is better to work with it as a number, not any content.

Instead, add an explicit count humanize output using:

• Added count prop for the value
• Humanize output with localization by default
• Even humanized output from the default slot content, if a plain number is passed
• Mark default slot as deprecated in flavor of count or NcChip
• Added raw prop to disable this behavior
• Improved docs
• Added tests

🖼️ Screenshots

With new count prop

English	Chinese

With old slot

Docs for styling

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 3️⃣ Backport to next requested with a Vue 3 upgrade

[jancborchardt]

Very nice! :)

Is it possible to have this be default and not a choice/prop? That is, if a counter bubble is used anywhere, it should never go up further than 1000.

What about using 1K+ instead of 999+?

I'd prefer 999+ as that's more universally localized and a bit clearer that it's "a ton".

[ShGKme]

Is it possible to have this be default and not a choice/prop? That is, if a counter bubble is used anywhere, it should never go up further than 1000.

The limit is 999 by default. However, it will work only if you pass the number as a count value, not as a custom HTML content.

Changing the behavior of the current custom content rendering would be more breaking and also dirty implementation-wise.

[susnux]

Is it possible to have this be default and not a choice/prop?

It is 999 by default, which in most cases makes sense, but sometime even 99 would be ok, so we should not hard code this but just have a meaningful default, no?

[Antreesy]

Rest is good!

[marcelklehr]

I would like to stress that numbers well above 1000 are a regular occurence. I would like to keep support for strings to allow consumers to pass things like "12.5k" if they so choose

[st3iny]

As far as I can see, you can still use the slot for custom strings. It was only deprecated for now. Removing it is a breaking change and implies a major bump.

[ShGKme]

@marcelklehr do you have an example, where NcCounterBubble is used in such a way?

[marcelklehr]

I use it in the bookmarks app to show bookmarks counts for folders and menu items

[jancborchardt]

Ok, then let’s do it as you suggested (and also as e.g. Twitter does for favs and retweets):

• "1K" from 1000 on
• "1M" from 1 million on
• Maximum 1 decimal point

Then it fulfills multiple requirements:

• Still keeps an actual count (what @marcelklehr was saying)
• Shows there are a ton of things (what the "999+" was communicating)
• Doesn’t change small digits in large numbers

Sounds good @ShGKme @marcelklehr @susnux?

[susnux]

Sounds good for me :)

(While I personally would prefer a small k but a capital M to align with unit prefixes)

[jancborchardt]

@susnux small "k" and capital "M" sounds good to me too, it seems like the standard. Not sure what the specific reason to Twitter using a capital K is.

[ShGKme]

Before I polish it, @susnux What do you think about this solution?

[ShGKme]

• Rebased onto master
• Changed behavior:
  • Instead of + and limit -- humanize using Intl compact format
  • Also humanize plain number from slot content

[ShGKme]

@jancborchardt Updated, see screenshots

[susnux]

Shall we deprecate the whole default slot?
As the counter function is done by the prop, using the slot without the counter handling feels like you want to use NcChip or NcUserBubble.

[ShGKme]

Done

[susnux]

BTW just for my reasoning:
From my point of view it makes no sense that we have so many components supporting the same use case.
This one is specialized for counting / showing a count, so we should stick with that behavior.

If there are complains about this, we still could add a unit prop where you can put n('row', 'rows') and the result would be 1 row, 99 rows, 1k rows. But lets see if this is needed.

[ShGKme]

/backport to next

[jancborchardt]

Awesome @ShGKme, sorry for the tears :D

[Antreesy]

Looks good code-wise now!

[susnux]

Super cool!

Maybe it makes sense to provide humanizeCount as part of @nextcloud/l10n?

[susnux]

(just needs to be squashed (fixup commit))

[ShGKme]

Maybe it makes sense to provide humanizeCount as part of @nextcloud/l10n?

I'm not sure. It's basically a browser feature, just a default compact format + getting locale from l10n.

[ShGKme]

Rebased onto master and squashed

[ShGKme]

Maybe it makes sense to provide humanizeCount as part of @nextcloud/l10n?

Maybe makes sense to make it easier for developers