feat: badge fixes

packages/docs/page-config/ui-elements/badge/api-description.ts

@@ -4,7 +4,7 @@ export default defineApiDescription({
   props: {
     text: "Badge text.",
     overlap: "Allows badge to overlap with element.",
-    transparent: "Makes badge semi-transparent.",
+    transparent: "(Deprecated) Makes badge semi-transparent.",
     multiLine: "Badge text will wrap to next line.",
     visibleEmpty: "Badge will be shown even when there is no text.",
     dot: "Shows dot instead of full badge. Useful to notify user without grabbing too much attention.",

packages/docs/page-config/ui-elements/badge/examples/Dot.vue

@@ -3,6 +3,7 @@
     class="mr-6"
     overlap
     dot
+    :offset="[-2, 2]"
   >
     <template #text>
       <va-icon
@@ -19,6 +20,7 @@
   <va-badge
     overlap
     dot
+    :offset="[-2, 2]"
   >
     <template #text>
       <va-icon
@@ -32,3 +34,5 @@
     />
   </va-badge>
 </template>
+<script setup>
+</script>

packages/docs/page-config/ui-elements/badge/examples/Overlap.vue

@@ -1,36 +1,44 @@
 <template>
-  <va-badge
-    dot
-    overlap
-    placement="bottom-center"
-    class="mr-8"
-  >
-    <va-avatar src="https://randomuser.me/api/portraits/women/1.jpg" />
-  </va-badge>
+  <div class="flex items-center">
+    <va-badge
+      dot
+      overlap
+      placement="bottom-right"
+      :offset="[-7, -7]"
+      class="mr-8"
+    >
+      <va-avatar src="https://randomuser.me/api/portraits/women/1.jpg" />
+    </va-badge>
 
-  <va-badge
-    text="5"
-    overlap
-    class="mr-6"
-  >
-    <va-icon name="&#xe0cb;" />
-  </va-badge>
+    <va-badge
+      text="5"
+      overlap
+      class="mr-6"
+      :offset="[-3,3]"
+    >
+      <va-icon name="&#xe0cb;" />
+    </va-badge>
 
-  <va-badge
-    text="5"
-    overlap
-    class="mr-6"
-    style="--va-badge-text-wrapper-border-radius: 50%;"
-  >
-    <va-icon name="&#xe0cb;" />
-  </va-badge>
+    <va-badge
+      text="5"
+      overlap
+      class="mr-6"
+      :offset="[-3,3]"
+      style="--va-badge-text-wrapper-border-radius: 50%;"
+    >
+      <va-icon name="&#xe0cb;" />
+    </va-badge>
 
-  <va-badge
-    placement="bottom-end"
-    text="99+"
-    overlap
-    style="--va-badge-text-wrapper-border-radius: 40px;"
-  >
-    <va-icon name="&#xe0cb;" />
-  </va-badge>
+    <va-badge
+      placement="bottom-end"
+      text="99+"
+      overlap
+      :offset="[0,-4]"
+      style="--va-badge-text-wrapper-border-radius: 40px;"
+    >
+      <va-icon name="mail_outline" />
+    </va-badge>
+  </div>
 </template>
+<script setup>
+</script>

packages/docs/page-config/ui-elements/badge/examples/Placement.vue

@@ -44,6 +44,8 @@
 
     <va-badge
       overlap
+      dot
+      :offset="-5"
       text="5"
       placement="bottom-center"
     >

packages/docs/page-config/ui-elements/badge/examples/WithOtherComponents.vue

@@ -4,8 +4,10 @@
       placement="top-left"
       text="New"
       overlap
-      :offset="['2rem', '1rem']"
+      :offset="[32, 0]"
       class="mr-6"
+      style="--va-badge-text-wrapper-border-radius: 40px;"
+
     >
       <va-card>
         <va-card-content>
@@ -20,7 +22,6 @@
       overlap
       dot
       class="mr-8"
-      style="--va-badge-text-wrapper-border: 2px solid white;"
     >
       <va-icon name="&#xe0e1;" />
     </va-badge>
@@ -30,23 +31,25 @@
       dot
       overlap
       class="mr-8"
+      :offset="[3, 3]"
     >
       <va-avatar
         src="https://randomuser.me/api/portraits/women/8.jpg"
         square
       />
     </va-badge>
 
-    <va-badge overlap>
+    <va-badge
+      overlap
+    >
       <template #text>
-        <va-icon
-          name="notifications"
-          size="12px"
-        /> 5+
+        5+
       </template>
       <va-button preset="primary">
         Profile
       </va-button>
     </va-badge>
   </div>
 </template>
+<script setup>
+</script>

packages/docs/page-config/ui-elements/badge/index.ts

@@ -4,7 +4,7 @@ import apiDescription from "./api-description";
 export default definePageConfig({
   blocks: [
     block.title("Badge"),
-    block.paragraph("VaBadge is used to highlight information related to other element, such as missed notifications near the user's avatar."),
+    block.paragraph("VaBadge is used to showcase information related to other element, such as missed notifications near the user's avatar."),
 
     block.component("Playground"),
 
@@ -16,7 +16,7 @@ export default definePageConfig({
 
     block.example("Placement", {
       title: "Placement",
-      description: "The `placement` allows you to set placement of the badge relatively to the base element. Available values: `top/bottom/left/right - start/center/end`. The `offset` prop allows you to amend the selected position - it moves badge forward or backward relatively to the main axis (`top/bottom/left/right`)."
+      description: "The `placement` prop allows you to set placement of the badge relatively to the base element. Available values are: `top/bottom/left/right - start/center/end`. The `offset` prop allows you to amend the selected position - it moves badge forward or backward relatively to the main axis (`top/bottom/left/right`)."
     }),
 
     block.example("Color", {
@@ -26,12 +26,7 @@ export default definePageConfig({
 
     block.example("Dot", {
       title: "Dot",
-      description: "The `dot` property puts the component in a minimalist mode in order to accentuate the base element."
-    }),
-
-    block.example("Offset", {
-      title: "Offset",
-      description: "The `offset` is used to set a distance between the base element and the badge."
+      description: "The `dot` property minimizes badge to accentuate the base element."
     }),
 
     block.example("Overlap", {
@@ -41,12 +36,7 @@ export default definePageConfig({
 
     block.example("WithOtherComponents", {
       title: "Usage with other components",
-      description: "By combining a component with others, you can add information to them or focus attention on them."
-    }),
-
-    block.example("NoContent", {
-      title: "Without content",
-      description: "By default, the component is hidden unless content is passed to it via a slot or the `text` property. The `visible-empty` property allows displaying an empty component as a colored square."
+      description: "By combining a badge with other components, you can add information or focus attention."
     }),
 
     block.subtitle("API"),

packages/ui/src/components/va-badge/_variables.scss

@@ -2,7 +2,7 @@
 :host {
   /* General */
   --va-badge-py: 0;
-  --va-badge-font-size: 0.625rem;
+  --va-badge-font-size: 0.563rem;
   --va-badge-border: 0.125rem;
   --va-badge-size: calc(var(--va-badge-font-size) * var(--va-badge-line-height) + var(--va-badge-border) * 2);
   --va-badge-line-height: 1.4;