From 564d0c1492ad8639b024ce95c9aecbbc3b6eb1ae Mon Sep 17 00:00:00 2001
From: Vitaly Rtishchev <rtivital@gmail.com>
Date: Mon, 26 Aug 2024 14:25:16 +0400
Subject: [PATCH] [@mantine/core] Badge: Fix unexpected change to block layout,
 fix incorrect alignment when fixed width is set (#6698, #6680)

---
 .../core/src/components/Badge/Badge.module.css | 16 ++++++++++++++--
 .../core/src/components/Badge/Badge.story.tsx  | 18 ++++++++++++++++++
 .../core/src/components/Badge/Badge.tsx        | 10 +++++++++-
 3 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/packages/@mantine/core/src/components/Badge/Badge.module.css b/packages/@mantine/core/src/components/Badge/Badge.module.css
index e602571abfc..45ec75cdba8 100644
--- a/packages/@mantine/core/src/components/Badge/Badge.module.css
+++ b/packages/@mantine/core/src/components/Badge/Badge.module.css
@@ -34,8 +34,7 @@
   line-height: var(--badge-lh);
   text-decoration: none;
   padding: 0 var(--badge-padding-x);
-  display: grid;
-  grid-template-columns: auto 1fr auto;
+  display: inline-grid;
   align-items: center;
   justify-content: center;
   width: fit-content;
@@ -49,6 +48,18 @@
   background: var(--badge-bg);
   border: var(--badge-bd);
 
+  &:where([data-with-right-section]) {
+    grid-template-columns: 1fr auto;
+  }
+
+  &:where([data-with-left-section], [data-variant='dot']) {
+    grid-template-columns: auto 1fr;
+  }
+
+  &:where([data-with-left-section][data-with-right-section]) {
+    grid-template-columns: auto 1fr auto;
+  }
+
   &:where([data-block]) {
     display: flex;
     width: 100%;
@@ -91,6 +102,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-align: center;
 }
 
 .section {
diff --git a/packages/@mantine/core/src/components/Badge/Badge.story.tsx b/packages/@mantine/core/src/components/Badge/Badge.story.tsx
index 6a66adffad7..93add0cccf8 100644
--- a/packages/@mantine/core/src/components/Badge/Badge.story.tsx
+++ b/packages/@mantine/core/src/components/Badge/Badge.story.tsx
@@ -33,6 +33,24 @@ export function Usage() {
   );
 }
 
+export function WithFixedWidth() {
+  return (
+    <div style={{ padding: 40 }}>
+      <Badge w={200} rightSection="R" leftSection="L">
+        Badge
+      </Badge>
+      <Badge w={200} leftSection="L">
+        Badge
+      </Badge>
+      <Badge w={200} rightSection="R">
+        Badge
+      </Badge>
+      <Badge w={200}>Badge</Badge>
+      <span>Other content</span>
+    </div>
+  );
+}
+
 export function WithIconInSection() {
   return (
     <Badge
diff --git a/packages/@mantine/core/src/components/Badge/Badge.tsx b/packages/@mantine/core/src/components/Badge/Badge.tsx
index 62cc155a135..fdfa5df2a93 100644
--- a/packages/@mantine/core/src/components/Badge/Badge.tsx
+++ b/packages/@mantine/core/src/components/Badge/Badge.tsx
@@ -147,7 +147,15 @@ export const Badge = polymorphicFactory<BadgeFactory>((_props, ref) => {
   return (
     <Box
       variant={variant}
-      mod={[{ block: fullWidth, circle }, mod]}
+      mod={[
+        {
+          block: fullWidth,
+          circle,
+          'with-right-section': !!rightSection,
+          'with-left-section': !!leftSection,
+        },
+        mod,
+      ]}
       {...getStyles('root', { variant })}
       ref={ref}
       {...others}