Merge pull request #292 from chakra-ui/fix/provide-default-avatar-badge-size

fix/provide default avatar badge size

Author: codebender828

.changeset/breezy-scissors-compete.md

@@ -0,0 +1,30 @@
+---
+"@chakra-ui/vue-composables": patch
+"@chakra-ui/c-close-button": patch
+"@chakra-ui/c-form-control": patch
+"@chakra-ui/c-scroll-lock": patch
+"@chakra-ui/c-breadcrumb": patch
+"@chakra-ui/c-accordion": patch
+"@chakra-ui/c-pin-input": patch
+"@chakra-ui/c-checkbox": patch
+"@chakra-ui/c-skip-nav": patch
+"@chakra-ui/c-popover": patch
+"@chakra-ui/c-spinner": patch
+"@chakra-ui/c-avatar": patch
+"@chakra-ui/c-button": patch
+"@chakra-ui/c-motion": patch
+"@chakra-ui/vue-accessibilty": patch
+"@chakra-ui/c-alert": patch
+"@chakra-ui/c-image": patch
+"@chakra-ui/c-input": patch
+"@chakra-ui/c-modal": patch
+"@chakra-ui/c-code": patch
+"@chakra-ui/c-menu": patch
+"@chakra-ui/vue-layout": patch
+"@chakra-ui/vue-system": patch
+"@chakra-ui/c-tag": patch
+"@chakra-ui/vue-utils": patch
+"@chakra-ui/vue-next": patch
+---
+
+Feature: Provide default `<c-avatar-badge />` box-size"

packages/c-avatar/examples/simple-avatar-with-badge.vue

@@ -5,7 +5,7 @@
     loading="lazy"
     icon="add"
   >
-    <c-avatar-badge bg="tomato" border-color="papayawhip" box-size="1.25em" />
+    <c-avatar-badge bg="tomato" border-color="papayawhip" />
   </c-avatar>
 </template>
 

packages/c-avatar/src/c-avatar-badge.tsx

@@ -70,6 +70,7 @@ export const CAvatarBadge = defineComponent({
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
+      boxSize: "1em",
       ...(placementMap[props.placement] || {}),
       ...styles.value.badge,
     }))

packages/c-avatar/tests/__snapshots__/c-avatar-badge.test.ts.snap

@@ -13,7 +13,7 @@ exports[`CAvatarBadge renders badge without parameters 1`] = `
       EY
     </div>
     <div
-      class="chakra-avatar__badge chakra-2b36mb"
+      class="chakra-avatar__badge chakra-173vitc"
     />
   </span>
 </DocumentFragment>