feat(v5): Update Badge classes (#5389)

react-bootstrap · Aug 28, 2020 · 651ae24 · 651ae24
1 parent 926c7cf
commit 651ae24
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 30 deletions.
diff --git a/src/Badge.tsx b/src/Badge.tsx
@@ -4,11 +4,12 @@ import React from 'react';
 
 import { useBootstrapPrefix } from './ThemeProvider';
 import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
-import { Variant } from './types';
+import { Color, Variant } from './types';
 
 export interface BadgeProps extends BsPrefixProps {
-  variant?: Variant;
+  bg?: Variant;
   pill?: boolean;
+  text?: Color;
 }
 
 type Badge = BsPrefixRefForwardingComponent<'span', BadgeProps>;
@@ -22,14 +23,20 @@ const propTypes = {
    *
    * @type {('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'light'|'dark')}
    */
-  variant: PropTypes.string,
+  bg: PropTypes.string,
 
   /**
    * Add the `pill` modifier to make badges more rounded with
    * some additional horizontal padding
    */
   pill: PropTypes.bool.isRequired,
 
+  /**
+   * Sets badge text color
+   *
+   * @type {('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'light'|'dark')}
+   */
+  text: PropTypes.string,
   /** @default span */
   as: PropTypes.elementType,
 };
@@ -42,8 +49,9 @@ const Badge: Badge = React.forwardRef(
   (
     {
       bsPrefix,
-      variant,
+      bg,
       pill,
+      text,
       className,
       as: Component = 'span',
       ...props
@@ -58,8 +66,9 @@ const Badge: Badge = React.forwardRef(
         className={classNames(
           className,
           prefix,
-          pill && `${prefix}-pill`,
-          variant && `${prefix}-${variant}`,
+          pill && `rounded-pill`,
+          text && `text-${text}`,
+          bg && `bg-${bg}`,
         )}
       />
     );

diff --git a/test/BadgeSpec.js b/test/BadgeSpec.js
@@ -7,18 +7,18 @@ describe('Badge', () => {
   it('Should render correctly', () => {
     expect(
       mount(
-        <Badge variant="primary" pill>
+        <Badge bg="primary" pill>
           Message
         </Badge>,
       )
-        .assertSingle('span.badge.badge-primary.badge-pill')
+        .assertSingle('span.badge.bg-primary.rounded-pill')
         .text(),
     ).to.equal('Message');
   });
 
   it('should support custom `as`', () => {
     mount(
-      <Badge as="a" href="#" variant="primary" pill>
+      <Badge as="a" href="#" bg="primary" pill>
         Message
       </Badge>,
     ).assertSingle('a[href="#"]');

diff --git a/www/src/examples/Badge/Basic.js b/www/src/examples/Badge/Basic.js
@@ -1,20 +1,20 @@
 <div>
   <h1>
-    Example heading <Badge variant="secondary">New</Badge>
+    Example heading <Badge bg="secondary">New</Badge>
   </h1>
   <h2>
-    Example heading <Badge variant="secondary">New</Badge>
+    Example heading <Badge bg="secondary">New</Badge>
   </h2>
   <h3>
-    Example heading <Badge variant="secondary">New</Badge>
+    Example heading <Badge bg="secondary">New</Badge>
   </h3>
   <h4>
-    Example heading <Badge variant="secondary">New</Badge>
+    Example heading <Badge bg="secondary">New</Badge>
   </h4>
   <h5>
-    Example heading <Badge variant="secondary">New</Badge>
+    Example heading <Badge bg="secondary">New</Badge>
   </h5>
   <h6>
-    Example heading <Badge variant="secondary">New</Badge>
+    Example heading <Badge bg="secondary">New</Badge>
   </h6>
 </div>;
diff --git a/www/src/examples/Badge/Button.js b/www/src/examples/Badge/Button.js
@@ -1,4 +1,4 @@
 <Button variant="primary">
-  Profile <Badge variant="light">9</Badge>
+  Profile <Badge bg="secondary">9</Badge>
   <span className="sr-only">unread messages</span>
 </Button>;
diff --git a/www/src/examples/Badge/Pill.js b/www/src/examples/Badge/Pill.js
@@ -1,26 +1,26 @@
 <div>
-  <Badge pill variant="primary">
+  <Badge pill bg="primary">
     Primary
   </Badge>{' '}
-  <Badge pill variant="secondary">
+  <Badge pill bg="secondary">
     Secondary
   </Badge>{' '}
-  <Badge pill variant="success">
+  <Badge pill bg="success">
     Success
   </Badge>{' '}
-  <Badge pill variant="danger">
+  <Badge pill bg="danger">
     Danger
   </Badge>{' '}
-  <Badge pill variant="warning">
+  <Badge pill bg="warning" text="dark">
     Warning
   </Badge>{' '}
-  <Badge pill variant="info">
+  <Badge pill bg="info">
     Info
   </Badge>{' '}
-  <Badge pill variant="light">
+  <Badge pill bg="light" text="dark">
     Light
   </Badge>{' '}
-  <Badge pill variant="dark">
+  <Badge pill bg="dark">
     Dark
   </Badge>
 </div>;
diff --git a/www/src/examples/Badge/Variations.js b/www/src/examples/Badge/Variations.js
@@ -1,8 +1,12 @@
 <div>
-  <Badge variant="primary">Primary</Badge>{' '}
-  <Badge variant="secondary">Secondary</Badge>{' '}
-  <Badge variant="success">Success</Badge>{' '}
-  <Badge variant="danger">Danger</Badge>{' '}
-  <Badge variant="warning">Warning</Badge> <Badge variant="info">Info</Badge>{' '}
-  <Badge variant="light">Light</Badge> <Badge variant="dark">Dark</Badge>
+  <Badge bg="primary">Primary</Badge> <Badge bg="secondary">Secondary</Badge>{' '}
+  <Badge bg="success">Success</Badge> <Badge bg="danger">Danger</Badge>{' '}
+  <Badge bg="warning" text="dark">
+    Warning
+  </Badge>{' '}
+  <Badge bg="info">Info</Badge>{' '}
+  <Badge bg="light" text="dark">
+    Light
+  </Badge>{' '}
+  <Badge bg="dark">Dark</Badge>
 </div>;