fix(Badge): without wrapper

Author: eirikbacker

packages/css/badge.css

@@ -2,43 +2,39 @@
   --dsc-badge-background: var(--ds-color-accent-base-default);
   --dsc-badge-color: var(--ds-color-accent-contrast-default);
   --dsc-badge-padding: 0 calc(var(--ds-spacing-1) + calc(var(--ds-spacing-1) / 2));
-  --dsc-badge-height: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2));
-  --dsc-badge-width: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2));
+  --dsc-badge-size: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2));
 
-  background-color: var(--dsc-badge-background);
-  color: var(--dsc-badge-color);
-  border-radius: var(--ds-border-radius-full);
-  display: grid;
-  place-items: center;
-  padding: var(--dsc-badge-padding);
-  height: var(--dsc-badge-height);
-  width: var(--dsc-badge-width);
+  display: inline-flex;
+  position: relative;
 
-  &.ds-badge--count {
-    --dsc-badge-height: var(--ds-sizing-6);
-    --dsc-badge-width: auto;
-    --dsc-badge-padding: 0 calc(var(--ds-spacing-1) + calc(var(--ds-spacing-1) / 2));
+  &::before {
+    content: attr(data-count);
+    background: var(--dsc-badge-background);
+    border-radius: var(--ds-border-radius-full);
+    box-sizing: border-box;
+    color: var(--dsc-badge-color);
+    display: grid;
+    min-height: var(--dsc-badge-size);
+    min-width: var(--dsc-badge-size);
+    padding: var(--dsc-badge-padding);
+    place-items: center;
   }
 
   &[data-size='sm'] {
-    --dsc-badge-height: var(--ds-sizing-3);
-    --dsc-badge-width: var(--ds-sizing-3);
+    --dsc-badge-size: var(--ds-sizing-3);
+    --dsc-badge-padding: 0 var(--ds-spacing-1);
 
-    &.ds-badge--count {
-      --dsc-badge-height: var(--ds-sizing-5);
-      --dsc-badge-width: auto;
-      --dsc-badge-padding: 0 var(--ds-spacing-1);
+    &[data-count] {
+      --dsc-badge-size: var(--ds-sizing-5);
     }
   }
 
   &[data-size='lg'] {
-    --dsc-badge-height: var(--ds-sizing-4);
-    --dsc-badge-width: var(--ds-sizing-4);
+    --dsc-badge-size: var(--ds-sizing-4);
+    --dsc-badge-padding: 0 var(--ds-spacing-2);
 
-    &.ds-badge--count {
-      --dsc-badge-height: var(--ds-sizing-7);
-      --dsc-badge-width: auto;
-      --dsc-badge-padding: 0 var(--ds-spacing-2);
+    &[data-count] {
+      --dsc-badge-size: var(--ds-sizing-7);
     }
   }
 
@@ -68,66 +64,55 @@
   }
 
   /* If placement is present, we are floating */
-  &[data-placement] {
-    transform-origin: center;
+  &[data-placement]::before {
     position: absolute;
   }
 
-  &[data-placement='top-right'][data-overlap='rectangle'] {
+  &[data-placement='top-right']::before {
     top: 0;
     right: 0;
-    transform: translateX(50%) translateY(-50%);
+    translate: 50% -50%;
   }
 
-  &[data-placement='top-left'][data-overlap='rectangle'] {
+  &[data-placement='top-left']::before {
     top: 0;
     left: 0;
-    transform: translateX(-50%) translateY(-50%);
+    translate: -50% -50%;
   }
 
-  &[data-placement='bottom-right'][data-overlap='rectangle'] {
+  &[data-placement='bottom-right']::before {
     bottom: 0;
     right: 0;
-    transform: translateX(50%) translateY(50%);
+    translate: 50% 50%;
   }
 
-  &[data-placement='bottom-left'][data-overlap='rectangle'] {
+  &[data-placement='bottom-left']::before {
     bottom: 0;
     left: 0;
-    transform: translateX(-50%) translateY(50%);
+    translate: -50% 50%;
   }
 
-  &[data-placement='top-right'][data-overlap='circle'] {
+  &[data-placement='top-right'][data-overlap='circle']::before {
     top: 14%;
     right: 14%;
-    transform: translateX(50%) translateY(-50%);
+    translate: 50% -50%;
   }
 
-  &[data-placement='top-left'][data-overlap='circle'] {
+  &[data-placement='top-left'][data-overlap='circle']::before {
     top: 14%;
     left: 14%;
-    transform: translateX(-50%) translateY(-50%);
+    translate: -50% -50%;
   }
 
-  &[data-placement='bottom-right'][data-overlap='circle'] {
+  &[data-placement='bottom-right'][data-overlap='circle']::before {
     bottom: 14%;
     right: 14%;
-    transform: translateX(50%) translateY(50%);
+    translate: 50% 50%;
   }
 
-  &[data-placement='bottom-left'][data-overlap='circle'] {
+  &[data-placement='bottom-left'][data-overlap='circle']::before {
     bottom: 14%;
     left: 14%;
-    transform: translateX(-50%) translateY(50%);
+    translate: -50% 50%;
   }
 }
-
-.ds-badge__wrapper {
-  display: inline-flex;
-  position: relative;
-  width: fit-content;
-  height: fit-content;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-}

packages/react/src/components/Badge/Badge.tsx

@@ -64,44 +64,31 @@ const paragraphSizeMap: {
  * </Badge>
  * ```
  */
-export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
-  (
-    {
-      color = 'accent',
-      size = 'md',
-      placement = 'top-right',
-      overlap = 'rectangle',
-      count,
-      maxCount,
-      children,
-      className,
-      ...rest
-    },
-    ref,
-  ) => {
-    return (
-      <div className={cl('ds-badge__wrapper', className)}>
-        {children}
-        <Paragraph asChild variant='short' size={paragraphSizeMap[size]}>
-          <span
-            className={cl('ds-badge', count && 'ds-badge--count')}
-            ref={ref}
-            data-size={size}
-            data-color={color}
-            {...(children
-              ? {
-                  'data-placement': placement,
-                  'data-overlap': overlap,
-                }
-              : {})}
-            {...rest}
-          >
-            {maxCount && count && count > maxCount ? `${maxCount}+` : count}
-          </span>
-        </Paragraph>
-      </div>
-    );
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
+  {
+    className,
+    color = 'accent',
+    count,
+    maxCount = Infinity,
+    overlap = 'rectangle',
+    placement = 'top-right',
+    size = 'md',
+    ...rest
   },
-);
-
-Badge.displayName = 'Badge';
+  ref,
+) {
+  return (
+    <Paragraph asChild variant='short' size={paragraphSizeMap[size]}>
+      <span
+        className={cl('ds-badge', className)}
+        data-color={color}
+        data-count={count && count > maxCount ? `${maxCount}+` : count}
+        data-overlap={rest.children ? overlap : null}
+        data-placement={rest.children ? placement : null}
+        data-size={size}
+        ref={ref}
+        {...rest}
+      />
+    </Paragraph>
+  );
+});