From d48d21079be60ab83b36bdb62d535287fa252eab Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Mon, 16 Sep 2024 14:17:03 +0200
Subject: [PATCH 1/3] fix(Badge): without wrapper

---
 packages/css/badge.css                        | 93 ++++++++-----------
 packages/react/src/components/Badge/Badge.tsx | 67 ++++++-------
 2 files changed, 66 insertions(+), 94 deletions(-)

diff --git a/packages/css/badge.css b/packages/css/badge.css
index 7c1de21f5d..c568d396a9 100644
--- a/packages/css/badge.css
+++ b/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;
-}
diff --git a/packages/react/src/components/Badge/Badge.tsx b/packages/react/src/components/Badge/Badge.tsx
index 5d27ae17f9..c9d8a1b04c 100644
--- a/packages/react/src/components/Badge/Badge.tsx
+++ b/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>
+  );
+});

From adad27091226d2886e567f6e369ce031beee085e Mon Sep 17 00:00:00 2001
From: Eirik Backer <eirik.backer@gmail.com>
Date: Mon, 16 Sep 2024 14:19:14 +0200
Subject: [PATCH 2/3] Create seven-ladybugs-admire.md

---
 .changeset/seven-ladybugs-admire.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/seven-ladybugs-admire.md

diff --git a/.changeset/seven-ladybugs-admire.md b/.changeset/seven-ladybugs-admire.md
new file mode 100644
index 0000000000..a46b621401
--- /dev/null
+++ b/.changeset/seven-ladybugs-admire.md
@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Badge: Only use single DOM element for rendering 

From 8fbb9f5dfffdedd0918e9f7e90a5c1343f30de87 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Wed, 18 Sep 2024 09:54:22 +0200
Subject: [PATCH 3/3] fix(Badge): remove maxcount default

---
 packages/react/src/components/Badge/Badge.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Badge/Badge.tsx b/packages/react/src/components/Badge/Badge.tsx
index c9d8a1b04c..1d35a677d0 100644
--- a/packages/react/src/components/Badge/Badge.tsx
+++ b/packages/react/src/components/Badge/Badge.tsx
@@ -69,7 +69,7 @@ export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
     className,
     color = 'accent',
     count,
-    maxCount = Infinity,
+    maxCount,
     overlap = 'rectangle',
     placement = 'top-right',
     size = 'md',
@@ -82,7 +82,9 @@ export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
       <span
         className={cl('ds-badge', className)}
         data-color={color}
-        data-count={count && count > maxCount ? `${maxCount}+` : count}
+        data-count={
+          count && maxCount && count > maxCount ? `${maxCount}+` : count
+        }
         data-overlap={rest.children ? overlap : null}
         data-placement={rest.children ? placement : null}
         data-size={size}