Fix text and height on buttons and badges

design-library/src/components/BccBadge/BccBadge.css

@@ -1,27 +1,21 @@
 @layer components {
   .bcc-badge {
-    @apply inline-flex items-center justify-center gap-2.5 rounded-md font-normal leading-none tracking-wide;
+    @apply inline-flex items-center justify-center gap-1 px-2 rounded-md whitespace-nowrap;
   }
 
   /* Size */
-  .bcc-badge-xs {
-    @apply text-label-xs px-2 py-0.5;
+  .bcc-badge.xs {
+    @apply text-label-xs leading-none h-5;
   }
-  .bcc-badge-sm {
-    @apply text-label-sm leading-4 px-3 py-1;
+  .bcc-badge.sm {
+    @apply text-label-sm leading-none h-6;
   }
-  .bcc-badge-md {
-    @apply text-label-sm leading-4 px-4 py-2;
+  .bcc-badge.md {
+    @apply text-label-sm leading-none h-8;
   }
 
-  .bcc-badge-xs.bordered {
-    @apply border py-[1px];
-  }
-  .bcc-badge-sm.bordered {
-    @apply border py-[3px];
-  }
-  .bcc-badge-md.bordered {
-    @apply border py-[7px];
+  .bcc-badge.bordered {
+    @apply border;
   }
 
   /* Variants light */
@@ -80,10 +74,10 @@
   .bcc-badge-icon {
     @apply h-3 w-3;
   }
-  .bcc-badge-sm .bcc-badge-icon {
+  .bcc-badge.sm .bcc-badge-icon {
     @apply h-4 w-4;
   }
-  .bcc-badge-md .bcc-badge-icon {
+  .bcc-badge.md .bcc-badge-icon {
     @apply h-4 w-4;
   }
 }

design-library/src/components/BccBadge/BccBadge.spec.ts

@@ -7,5 +7,6 @@ describe("BccBadge", () => {
   it("renders a text from the default slot", () => {
     const wrapper = mount(BccBadge, { slots: { default: "Test Badge" } });
     expect(wrapper.text()).toBe("Test Badge");
+    expect(wrapper.html()).toMatchSnapshot();
   });
 });

design-library/src/components/BccBadge/BccBadge.stories.ts

@@ -1,5 +1,5 @@
 import BccBadge from "./BccBadge.vue";
-import { CheckCircleIcon } from "@bcc-code/icons-vue";
+import { CheckCircleIcon, DownloadingIcon } from "@bcc-code/icons-vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 
@@ -82,6 +82,23 @@ Example.parameters = {
   },
 };
 
+/**
+ * Set the `size` prop to control the color of the badge
+ */
+export const Size: StoryFn<typeof BccBadge> = (args) => ({
+  components: { BccBadge },
+  setup() {
+    return { args, DownloadingIcon };
+  },
+  template: `
+    <div class="flex items-start space-x-2">
+      <BccBadge v-bind="args" size="xs" :icon="DownloadingIcon">extra-small</BccBadge>
+      <BccBadge v-bind="args" size="sm" :icon="DownloadingIcon">small</BccBadge>
+      <BccBadge v-bind="args" size="md" :icon="DownloadingIcon">medium</BccBadge>
+    </div>
+  `,
+});
+
 /**
  * Set the `context` prop to control the color of the badge
  */

design-library/src/components/BccBadge/BccBadge.vue

@@ -37,16 +37,10 @@ const themeClass = {
   mongoose: "bcc-badge-mongoose",
   brand: "bcc-badge-brand",
 };
-
-const sizeClass = {
-  xs: "bcc-badge-xs",
-  sm: "bcc-badge-sm",
-  md: "bcc-badge-md",
-};
 </script>
 
 <template>
-  <div class="bcc-badge" :class="[themeClass[context], contrast, sizeClass[size], { bordered }]">
+  <div class="bcc-badge" :class="[themeClass[context], contrast, size, { bordered }]">
     <component
       v-if="icon"
       :is="icon"

design-library/src/components/BccBadge/__snapshots__/BccBadge.spec.ts.snap

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BccBadge > renders a text from the default slot 1`] = `
+"<div class="bcc-badge bcc-badge-neutral light xs">
+  <!--v-if--><span class="order-2">Test Badge</span>
+</div>"
+`;

design-library/src/components/BccButton/BccButton.css

@@ -1,24 +1,24 @@
 @layer components {
     .bcc-button {
-        @apply select-none font-semibold inline-flex items-center tracking-wide border justify-center active:shadow-inner focus-visible:outline focus-visible:outline-2 focus-visible:outline-emphasis focus-visible:outline-offset-2;
+        @apply select-none inline-flex items-center border justify-center active:shadow-inner focus-visible:outline focus-visible:outline-2 focus-visible:outline-emphasis focus-visible:outline-offset-2;
         @apply cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none;
 
         /* Default base size */
-        @apply text-base leading-5 py-2.5 px-5 gap-x-2 h-10 rounded-lg;
+        @apply text-label leading-none py-2.5 px-5 gap-x-2 h-10 rounded-lg;
     }
 
     /* Size */
     .bcc-button-xs {
-        @apply text-xs leading-3 py-1.5 px-3 gap-x-1.5 h-6 rounded-md;
+        @apply text-label-xs leading-none py-1.5 px-3 gap-x-1.5 h-6 rounded-md;
     }
     .bcc-button-sm {
-        @apply text-sm leading-4 py-2 px-3 gap-x-1.5 h-8 rounded-md;
+        @apply text-label-sm leading-none py-2 px-3 gap-x-1.5 h-8 rounded-md;
     }
     .bcc-button-lg {
-        @apply text-base leading-5 py-3 px-5 gap-x-2.5 h-12 rounded-lg;
+        @apply text-label-lg leading-none py-3 px-5 gap-x-2.5 h-12 rounded-lg;
     }
     .bcc-button-xl {
-        @apply text-xl leading-5 py-4 px-6 gap-x-2.5 h-14 rounded-lg;
+        @apply text-heading-lg leading-none py-4 px-6 gap-x-2.5 h-14 rounded-lg;
     }
 
     /* Rounded */