fix(badge): change rings for borders

adevinta · Oct 5, 2023 · cd7911b · cd7911b
1 parent 9304984
commit cd7911b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/packages/components/badge/src/Badge.tsx b/packages/components/badge/src/Badge.tsx
@@ -10,7 +10,7 @@ export const Badge = forwardRef<HTMLElement, BadgeProps>(({ children, ...props }
   return isStandalone ? (
     <BadgeItem ref={ref} type="standalone" {...props} />
   ) : (
-    <div className="relative flex">
+    <div className="relative inline-flex">
       {children}
       <BadgeItem ref={ref} {...props} />
     </div>

diff --git a/packages/components/badge/src/BadgeItem.styles.tsx b/packages/components/badge/src/BadgeItem.styles.tsx
@@ -22,23 +22,23 @@ export const styles = cva(
           'basic',
         ]
       >({
-        main: ['bg-main', 'text-on-main', 'ring-on-main'],
-        support: ['bg-support', 'text-on-support', 'ring-on-support'],
-        accent: ['bg-accent', 'text-on-accent', 'ring-on-accent'],
-        success: ['bg-success', 'text-on-success', 'ring-on-success'],
-        alert: ['bg-alert', 'text-on-alert', 'ring-on-alert'],
-        danger: ['bg-error', 'text-on-error', 'ring-on-error'],
-        info: ['bg-info', 'text-on-info', 'ring-on-info'],
-        neutral: ['bg-neutral', 'text-on-neutral', 'ring-on-neutral'],
-        surface: ['bg-surface', 'text-on-surface', 'ring-on-surface'],
-        basic: ['bg-basic', 'text-on-basic', 'ring-on-basic'],
+        main: ['bg-main', 'text-on-main', 'border-on-main'],
+        support: ['bg-support', 'text-on-support', 'border-on-support'],
+        accent: ['bg-accent', 'text-on-accent', 'border-on-accent'],
+        success: ['bg-success', 'text-on-success', 'border-on-success'],
+        alert: ['bg-alert', 'text-on-alert', 'border-on-alert'],
+        danger: ['bg-error', 'text-on-error', 'border-on-error'],
+        info: ['bg-info', 'text-on-info', 'border-on-info'],
+        neutral: ['bg-neutral', 'text-on-neutral', 'border-on-neutral'],
+        surface: ['bg-surface', 'text-on-surface', 'border-on-surface'],
+        basic: ['bg-basic', 'text-on-basic', 'border-on-basic'],
       }),
       size: makeVariants<'size', ['sm', 'md']>({
         sm: ['text-small', 'px-[var(--sz-6)] py-[var(--sz-2)]', 'empty:h-sz-12 empty:w-sz-12'],
         md: ['text-caption', 'px-md py-sm', 'empty:h-sz-16 empty:w-sz-16'],
       }),
       type: {
-        relative: ['relative -translate-x-2/4 -translate-y-2/4 ring-2'],
+        relative: ['absolute right-none translate-x-2/4 -translate-y-2/4 border-md'],
         standalone: [],
       },
     },