feat(components): use dynamic width for long circular Badge

This prevents the content from overflowing the background. feature/badge-design feature/badge-design
sumup-oss · Jul 6, 2020 · 0d223cd · 0d223cd
1 parent 78402fe
commit 0d223cd
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 8 deletions.
diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
@@ -69,7 +69,8 @@ exports[`Storyshots Components/Badge Base 1`] = `
 `;
 
 exports[`Storyshots Components/Badge Circular 1`] = `
-.circuit-0 {
+HTMLCollection [
+  .circuit-0 {
   border-radius: 999999px;
   color: #FFFFFF;
   display: inline-block;
@@ -96,15 +97,91 @@ exports[`Storyshots Components/Badge Circular 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  padding: 2px 4px;
   height: 24px;
   width: 24px;
 }
 
 <div
-  class="circuit-0"
->
-  42
-</div>
+    class="circuit-0"
+  >
+    1
+  </div>,
+  .circuit-0 {
+  border-radius: 999999px;
+  color: #FFFFFF;
+  display: inline-block;
+  padding: 2px 8px;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 700;
+  text-align: center;
+  -webkit-letter-spacing: 0.25px;
+  -moz-letter-spacing: 0.25px;
+  -ms-letter-spacing: 0.25px;
+  letter-spacing: 0.25px;
+  background-color: #D8DDE1;
+  color: #0F131A;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 2px 4px;
+  height: 24px;
+  width: 24px;
+}
+
+<div
+    class="circuit-0"
+  >
+    42
+  </div>,
+  .circuit-0 {
+  border-radius: 999999px;
+  color: #FFFFFF;
+  display: inline-block;
+  padding: 2px 8px;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 700;
+  text-align: center;
+  -webkit-letter-spacing: 0.25px;
+  -moz-letter-spacing: 0.25px;
+  -ms-letter-spacing: 0.25px;
+  letter-spacing: 0.25px;
+  background-color: #D8DDE1;
+  color: #0F131A;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 2px 4px;
+  height: 24px;
+  width: auto;
+}
+
+<div
+    class="circuit-0"
+  >
+    999
+  </div>,
+]
 `;
 
 exports[`Storyshots Components/Badge Variants 1`] = `

diff --git a/src/components/Badge/Badge.story.tsx b/src/components/Badge/Badge.story.tsx
@@ -50,4 +50,10 @@ export const variants = () => (
   </Fragment>
 );
 
-export const circular = () => <BaseBadge circle>42</BaseBadge>;
+export const circular = () => (
+  <Fragment>
+    <BaseBadge circle>1</BaseBadge>
+    <BaseBadge circle>42</BaseBadge>
+    <BaseBadge circle>999</BaseBadge>
+  </Fragment>
+);
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
@@ -104,15 +104,23 @@ const variantStyles = ({
   `;
 };
 
-const circleStyles = ({ circle }: BadgeProps) =>
+const isDynamicWidth = (children: BadgeProps['children']) => {
+  if (typeof children === 'string') {
+    return children.length > 2;
+  }
+  return false;
+};
+
+const circleStyles = ({ circle, children }: BadgeProps) =>
   circle &&
   css`
     label: badge--circle;
     display: flex;
     align-items: center;
     justify-content: center;
+    padding: 2px 4px;
     height: 24px;
-    width: 24px;
+    width: ${isDynamicWidth(children) ? 'auto' : '24px'};
   `;
 
 const clickableStyles = ({