diff --git a/.changeset/fix-BadgeHeight.md b/.changeset/fix-BadgeHeight.md new file mode 100644 index 000000000..757607b9a --- /dev/null +++ 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 index 9880abf81..5c883ceb8 100644 --- 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 index 5fa9e2869..c53d416e3 100644 --- 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'}; `;