From 79a48a3cc26ec3bee5fed807923e89dd62cfbe97 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 16 Jul 2020 15:31:46 -0400
Subject: [PATCH] Add pill variation to badge

---
 docs/assets/plugins/metadata/metadata.js |  4 ++--
 docs/components/badge.md                 | 20 +++++++++++++++-----
 src/components.d.ts                      |  8 ++++++++
 src/components/badge/badge.scss          | 15 +++++++++++----
 src/components/badge/badge.tsx           |  6 +++++-
 5 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/docs/assets/plugins/metadata/metadata.js b/docs/assets/plugins/metadata/metadata.js
index 0204fef6..1038d7ac 100644
--- a/docs/assets/plugins/metadata/metadata.js
+++ b/docs/assets/plugins/metadata/metadata.js
@@ -292,11 +292,11 @@
               </div>
 
               <div class="component-header__info">
-                <sl-badge type="info">
+                <sl-badge type="info" pill>
                   Since ${tags.since || '?'}
                 </sl-badge>
 
-                <sl-badge type="${badgeType}" style="text-transform: capitalize;">
+                <sl-badge type="${badgeType}" pill style="text-transform: capitalize;">
                   ${tags.status}
                 </sl-badge>
               </div>
diff --git a/docs/components/badge.md b/docs/components/badge.md
index 47ccae0b..6d7566b8 100644
--- a/docs/components/badge.md
+++ b/docs/components/badge.md
@@ -22,6 +22,16 @@ Set the `type` attribute to change the badge's type.
 <sl-badge type="danger">Danger</sl-badge>
 ```
 
+### Pill Badges
+
+```html preview
+<sl-badge type="primary" pill>Primary</sl-icon></sl-badge>
+<sl-badge type="success" pill>Success</sl-badge>
+<sl-badge type="info" pill>Info</sl-badge>
+<sl-badge type="warning" pill>Warning</sl-badge>
+<sl-badge type="danger" pill>Danger</sl-badge>
+```
+
 ### With Buttons
 
 One of the most common use cases for badges is attaching them to buttons. To make this easier, badges will be automatically positioned at the top-right when they're a child of a button.
@@ -29,17 +39,17 @@ One of the most common use cases for badges is attaching them to buttons. To mak
 ```html preview
 <sl-button>
   Requests
-  <sl-badge>30</sl-badge>
+  <sl-badge pill>30</sl-badge>
 </sl-button>
 
 <sl-button style="margin-left: 1rem;">
   Warnings
-  <sl-badge type="warning">8</sl-badge>
+  <sl-badge type="warning" pill>8</sl-badge>
 </sl-button>
 
 <sl-button style="margin-left: 1rem;">
   Errors
-  <sl-badge type="danger">6</sl-badge>
+  <sl-badge type="danger" pill>6</sl-badge>
 </sl-button>
 ```
 
@@ -52,8 +62,8 @@ When including badges in menu items, use the `suffix` slot to make sure they're
   style="max-width: 240px; border: solid 1px var(--sl-color-gray-90); border-radius: var(--sl-border-radius-medium);"
 >
   <sl-menu-label>Messages</sl-menu-label>
-  <sl-menu-item>Comments <sl-badge slot="suffix">4</sl-badge></sl-menu-item>
-  <sl-menu-item>Replies <sl-badge slot="suffix">12</sl-badge></sl-menu-item>
+  <sl-menu-item>Comments <sl-badge slot="suffix" pill>4</sl-badge></sl-menu-item>
+  <sl-menu-item>Replies <sl-badge slot="suffix" pill>12</sl-badge></sl-menu-item>
 </sl-menu>
 ```
 
diff --git a/src/components.d.ts b/src/components.d.ts
index 1cc363a7..2c033613 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -47,6 +47,10 @@ export namespace Components {
         "shape": 'circle' | 'square' | 'rounded';
     }
     interface SlBadge {
+        /**
+          * Set to true to draw a pill-style badge with rounded edges.
+         */
+        "pill": boolean;
         /**
           * The badge's type.
          */
@@ -1105,6 +1109,10 @@ declare namespace LocalJSX {
         "shape"?: 'circle' | 'square' | 'rounded';
     }
     interface SlBadge {
+        /**
+          * Set to true to draw a pill-style badge with rounded edges.
+         */
+        "pill"?: boolean;
         /**
           * The badge's type.
          */
diff --git a/src/components/badge/badge.scss b/src/components/badge/badge.scss
index 35ac9570..47f0eb12 100644
--- a/src/components/badge/badge.scss
+++ b/src/components/badge/badge.scss
@@ -2,8 +2,6 @@
 
 :host {
   display: inline-flex;
-  border-radius: var(--sl-border-radius-pill);
-  pointer-events: none;
 }
 
 .badge {
@@ -14,9 +12,10 @@
   font-weight: var(--sl-font-weight-semibold);
   letter-spacing: var(--sl-letter-spacing-normal);
   line-height: 1;
-  border-radius: inherit;
+  border-radius: var(--sl-border-radius-small);
   white-space: nowrap;
-  padding: 4px 8px;
+  padding: 3px 6px;
+  pointer-events: none;
   user-select: none;
   cursor: inherit;
 }
@@ -49,3 +48,11 @@
   background-color: var(--sl-color-danger-50);
   color: var(--sl-color-white);
 }
+
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+// Pill modifiers
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+.badge--pill {
+  border-radius: var(--sl-border-radius-pill);
+}
diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx
index e7582bf6..6765c0f3 100644
--- a/src/components/badge/badge.tsx
+++ b/src/components/badge/badge.tsx
@@ -21,6 +21,9 @@ export class Badge {
   /** The badge's type. */
   @Prop() type: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' = 'primary';
 
+  /** Set to true to draw a pill-style badge with rounded edges. */
+  @Prop() pill = false;
+
   render() {
     return (
       <span
@@ -35,7 +38,8 @@ export class Badge {
           'badge--info': this.type === 'info',
           'badge--warning': this.type === 'warning',
           'badge--danger': this.type === 'danger',
-          'badge--text': this.type === 'text'
+          'badge--text': this.type === 'text',
+          'badge--pill': this.pill
         }}
         role="status"
       >