From ae522366f61aa1c841e3c915468be013355a11ec Mon Sep 17 00:00:00 2001 From: Nora Krantz <75342690+nkrantz@users.noreply.github.com> Date: Tue, 17 Sep 2024 08:53:27 -0400 Subject: [PATCH] chore(badge): add min-width to small badge (#4072) --- .changeset/eleven-wombats-sniff.md | 6 ++++++ packages/paste-core/components/badge/src/Badge.tsx | 2 ++ 2 files changed, 8 insertions(+) create mode 100644 .changeset/eleven-wombats-sniff.md diff --git a/.changeset/eleven-wombats-sniff.md b/.changeset/eleven-wombats-sniff.md new file mode 100644 index 0000000000..d489e3525e --- /dev/null +++ b/.changeset/eleven-wombats-sniff.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/badge": patch +"@twilio-paste/core": patch +--- + +[Badge] add a min-width of size-base-50 to small badges to ensure badges with only one character (e.g. "1") render as a circle rather than an oval. diff --git a/packages/paste-core/components/badge/src/Badge.tsx b/packages/paste-core/components/badge/src/Badge.tsx index 797a0f8e06..57d035c8a4 100644 --- a/packages/paste-core/components/badge/src/Badge.tsx +++ b/packages/paste-core/components/badge/src/Badge.tsx @@ -29,6 +29,8 @@ export const Badge = React.forwardRef( element={element} paddingX={size === "small" ? "space20" : "space30"} paddingY={size === "small" ? "space10" : "space20"} + minWidth={size === "small" ? "sizeBase50" : "size0"} + justifyContent="center" variant={variant} ref={ref} {...badgeStyles}