Update listitem for new counterbubble styles

Signed-off-by: marco <marcoambrosini@pm.me>

Author: marcoambrosini

src/components/CounterBubble/CounterBubble.vue

@@ -59,7 +59,7 @@ export default {
 			type: String,
 			default: '',
 			validator(value) {
-				return ['highlighted', 'outlined'].indexOf(value) !== -1
+				return ['highlighted', 'outlined', ''].indexOf(value) !== -1
 			},
 		},
 	},

src/components/ListItem/ListItem.vue

@@ -28,7 +28,7 @@
 		:bold="false"
 		:details="'One hour ago'"
 		:counter-number="44"
-		:counter-highlighted="true">
+		counterType="highlighted">
 		<template #icon>
 			<avatar :size="44" user="janedoe" display-name="Jane Doe" />
 		</template>
@@ -147,7 +147,7 @@
 							<span v-if="!displayActions" class="line-two__counter">
 								<CounterBubble
 									v-if="counterNumber != 0"
-									:highlighted="counterHighlighted">
+									:type="counterType">
 									{{ counterNumber }}
 								</CounterBubble>
 							</span>
@@ -276,13 +276,15 @@ export default {
 		 },
 
 		/**
-		 * Toggles the highlighted state of the counter
+		 * Outlined or highlighted state of the counter
 		 */
-		 counterHighlighted: {
-			 type: Boolean,
-			 default: false,
-		 },
-
+		counterType: {
+			type: String,
+			default: '',
+			validator(value) {
+				return ['highlighted', 'outlined', ''].indexOf(value) !== -1
+			},
+		},
 	},
 
 	data() {