Replace AppNavigationCounter with CounterBubble

[PVince81]

Because we need a more generic bubble, like in this example:

This is from nextcloud/spreed#5534

Keep the old file to not break existing imports.

I've tested it with some local Talk code that is using AppNavigationCounter and it properly redirects the component.

The only issue I see is that the style guide doesn't show the deprecation notice and replaces the component with the name:

[PVince81]

the best way I found was keeping the old component as is and then marking as deprecated, it then appears like this in the style guide:

This would make it possible to backport to stable3 if necessary, then remove completely on master.

Thoughts ?

[skjnldsv]

Because we need a more generic bubble, like in this example:

This one seems a bit misaligned, no?

[PVince81]

Because we need a more generic bubble, like in this example:

This one seems a bit misaligned, no?

it is, but not related to the component here.

I'll realign it with designer eyes later on in the Talk PR

[skjnldsv]

But shouldn't this be staandardized here? So a bubble can be applied to an action?

[raimund-schluessler]

The usage of AppNavigationCounter in the ListItem component and in the docs should then also be changed, if it is deprecated:
https://github.com/nextcloud/nextcloud-vue/blob/07b40644fbb7f1eb55f46fd1afdc94a2bce662c2/src/components/ListItem/ListItem.vue#L185

https://github.com/nextcloud/nextcloud-vue/blob/07b40644fbb7f1eb55f46fd1afdc94a2bce662c2/src/components/ListItem/ListItem.vue#L38-L40

https://github.com/nextcloud/nextcloud-vue/blob/2ac3f1d8ef348d860ff0b0842eab3e7451e9cb41/src/components/AppNavigationItem/AppNavigationItem.vue#L67-L69

[PVince81]

But shouldn't this be staandardized here? So a bubble can be applied to an action?

Not sure how to standardize alignment in code. It would require knowing the size of the element (action, app navigation, ...) on top of which is needs to be positioned and aligned on top of it. Also need a proper container with position: relative for the positioning the work.

[PVince81]

@raimund-schluessler thanks for pointing out. I've adjusted the usages and also fixed some unrelated warnings while browsing the ListItem page in the style guide.

After seeing the usages, maybe we could add a counter slot for the "Actions" element (or any of the relevent sub-elements), this way the alignment could be achieved by the action* components themselves.

[raimund-schluessler]

@PVince81 Probably not really important, but I guess this is the wrong year and author?