refactor(badge): update to match conventions (#262)

Tap30 · Nov 17, 2024 · 24f8f03 · 24f8f03
1 parent 4158837
commit 24f8f03
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 6 deletions.
diff --git a/packages/web-components/src/badge-wrapper/badge-wrapper.style.ts b/packages/web-components/src/badge-wrapper/badge-wrapper.style.ts
@@ -1,6 +1,16 @@
 import { css } from "lit";
 
 export default css`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    display: inline-block;
+  }
+
   .root.left .badge {
     transform: translate(-50%, -50%);
   }

diff --git a/packages/web-components/src/badge-wrapper/constants.ts b/packages/web-components/src/badge-wrapper/constants.ts
@@ -1,4 +1,4 @@
 export const Slots = {
   DEFAULT: "",
   BADGE: "badge",
-};
+} as const;
diff --git a/packages/web-components/src/badge/badge.style.ts b/packages/web-components/src/badge/badge.style.ts
@@ -12,15 +12,15 @@ export default css`
   }
 
   :host {
-    display: inline-flex;
+    display: inline-block;
   }
 
-  .root:not(.dot).medium {
+  .root:not(.dot).md {
     height: 1.5rem;
     min-width: 1.5rem;
   }
 
-  .root:not(.dot).small {
+  .root:not(.dot).sm {
     height: 1.25rem;
     min-width: 1.25rem;
   }
@@ -82,6 +82,8 @@ export default css`
     align-items: center;
     justify-content: center;
 
+    vertical-align: middle;
+
     gap: var(--tap-sys-spacing-2);
 
     font-family: var(--tap-sys-font-family);

diff --git a/packages/web-components/src/badge/badge.ts b/packages/web-components/src/badge/badge.ts
@@ -22,7 +22,7 @@ export class Badge extends LitElement {
   public priority: "high" | "low" = "high";
 
   @property({ type: String })
-  public size: "medium" | "small" = "medium";
+  public size: "md" | "sm" = "md";
 
   @state()
   private _hasIcon = false;

diff --git a/packages/web-components/src/badge/index.ts b/packages/web-components/src/badge/index.ts
@@ -11,7 +11,7 @@ export { Slots } from "./constants";
  * @prop {'pill' | 'numeral' | 'dot'} [variant='pill'] - The variant of the badge.
  * @prop {'success' | 'error' | 'info' | 'warning' | 'neutral'} [color='neutral'] - The color of the badge.
  * @prop {'high' | 'low'} [priority='high'] - The priority level of the badge.
- * @prop {'medium' | 'small'} [size='medium'] - The size of the badge.
+ * @prop {'md' | 'sm'} [size='md'] - The size of the badge.
  */
 @customElement("tap-badge")
 export class TapBadge extends Badge {