[@mantine/core] Badge: Fix unexpected change to block layout, fix inc…

…orrect alignment when fixed width is set (#6698, #6680)
mantinedev · Aug 26, 2024 · 564d0c1 · 564d0c1
1 parent ccc0f3c
commit 564d0c1
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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}