Fix(Badge): Fixes the Badge height for the label version. Both label …

…and counter variants are now 24px in height. (#1228)
cengage · Apr 15, 2024 · e8a395e · e8a395e · github-actions · Apr 15, 2024
1 parent 32eff37
commit e8a395e
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/.changeset/fix-BadgeHeight.md b/.changeset/fix-BadgeHeight.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(Badge): Fixes the Badge height for the label version. Both label and counter variants are now 24px in height.
diff --git a/packages/react-magma-dom/src/components/Badge/Badge.test.js b/packages/react-magma-dom/src/components/Badge/Badge.test.js
@@ -115,6 +115,10 @@ describe('Badge', () => {
         'background',
         magma.colors.primary
       );
+      expect(getByText(TEXT)).toHaveStyleRule(
+        'padding',
+        `3px ${magma.spaceScale.spacing02}`
+      );
     });
 
     describe('inverse', () => {

diff --git a/packages/react-magma-dom/src/components/Badge/index.tsx b/packages/react-magma-dom/src/components/Badge/index.tsx
@@ -141,7 +141,7 @@ export const baseBadgeStyles = props => css`
   min-width: ${props.theme.spaceScale.spacing06};
   padding: ${props.variant === BadgeVariant.counter
     ? `1px ${props.theme.spaceScale.spacing02}`
-    : `${props.theme.spaceScale.spacing01} ${props.theme.spaceScale.spacing02}`};
+    : `3px  ${props.theme.spaceScale.spacing02}`};
   text-align: ${props.variant == BadgeVariant.counter ? 'center' : 'inherit'};
 `;