feat(Badge): rework sizes

nuxt · Dec 13, 2024 · d9967f5 · d9967f5
1 parent cef16cd
commit d9967f5
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 27 deletions.
diff --git a/docs/content/3.components/badge.md b/docs/content/3.components/badge.md
@@ -62,7 +62,7 @@ Use the `size` prop to change the size of the Badge.
 ::component-code
 ---
 props:
-  size: lg
+  size: xl
 slots:
   default: Badge
 ---

diff --git a/src/theme/badge.ts b/src/theme/badge.ts
@@ -21,11 +21,17 @@ export default (options: Required<ModuleOptions>) => ({
       subtle: ''
     },
     size: {
+      xs: {
+        base: 'text-[8px]/3 px-1 py-0.5 gap-1 rounded-[calc(var(--ui-radius))]',
+        leadingIcon: 'size-3',
+        leadingAvatarSize: '3xs',
+        trailingIcon: 'size-3'
+      },
       sm: {
-        base: 'text-xs px-1.5 py-0.5 gap-1 rounded-[calc(var(--ui-radius))]',
-        leadingIcon: 'size-4',
+        base: 'text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))]',
+        leadingIcon: 'size-3',
         leadingAvatarSize: '3xs',
-        trailingIcon: 'size-4'
+        trailingIcon: 'size-3'
       },
       md: {
         base: 'text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)]',
@@ -38,6 +44,12 @@ export default (options: Required<ModuleOptions>) => ({
         leadingIcon: 'size-5',
         leadingAvatarSize: '2xs',
         trailingIcon: 'size-5'
+      },
+      xl: {
+        base: 'text-base px-2.5 py-1 gap-1.5 rounded-[calc(var(--ui-radius)*1.5)]',
+        leadingIcon: 'size-6',
+        leadingAvatarSize: '2xs',
+        trailingIcon: 'size-6'
       }
     }
   },

diff --git a/test/components/__snapshots__/Badge.spec.ts.snap b/test/components/__snapshots__/Badge.spec.ts.snap
@@ -107,7 +107,17 @@ exports[`Badge > renders with size md correctly 1`] = `
 `;
 
 exports[`Badge > renders with size sm correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-1.5 py-0.5 gap-1 rounded-[calc(var(--ui-radius))] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
+<!--v-if--></span>"
+`;
+
+exports[`Badge > renders with size xl correctly 1`] = `
+"<span class="font-medium inline-flex items-center text-base px-2.5 py-1 gap-1.5 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
+<!--v-if--></span>"
+`;
+
+exports[`Badge > renders with size xs correctly 1`] = `
+"<span class="font-medium inline-flex items-center text-[8px]/3 px-1 py-0.5 gap-1 rounded-[calc(var(--ui-radius))] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;